Ajax Control Toolkit HTML Editor Customization Problem?

StackOverflow https://stackoverflow.com/questions/2056661

Question

How to Change default setting for ACT HTML Editor? I want to load editor with for example Selected Bold Button or with rtl direction instead of ltr defaultly.
How can I perform that? I overrided FillTopToolbar() method to add Custom buttons but I dont Know how to change default settings.
as Default ltr is selected I want to change it to rtl.

Was it helpful?

Solution

I edited my answer to correct some things

The HTMLEditor doesn't provide a way to set the state of those buttons using serverside code. Although, on the client, it initializes by using Sys.Application.load Event. If you ran your code after their initializers, but before the user will interact with the UI, you could then set whatever properties you want to set in that event handler.

Here is the code you need to set the bold button and the rtl buttons states. You can take it from here if you want to change the states of other buttons:

// Attach a handler to the load event.
Sys.Application.add_load(myOnLoadLoader);

function myOnLoadLoader() {
    //This will run JUST after ALL code that was set to run during the load event has run
    window.setTimeout(myOnLoad, 0);
}

function myOnLoad() {
    var editor = $find('<% =editor.ClientID %>');
    var toolbar = editor.get_changingToolbar();
    var toolbarButtons = toolbar.get_buttons();
    for (var i = 0; i < toolbarButtons.length; i++) {
        var toolbarButton = toolbarButtons[i];
        if (toolbarButton instanceof AjaxControlToolkit.HTMLEditor.ToolbarButton.Rtl ||
        toolbarButton instanceof AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold) {
            toolbarButton.set_activeEditPanel(editor.get_editPanel());
            toolbarButton.callMethod();
        }
    }
}

Sys (and therefore Sys.Application) is a namespace that comes from the ASP.Net AJAX javascript (file(s) that are added thanks to the ScriptManager that you add to your page). If you use this, you need to be sure that this line Sys.Application.add_load(myOnLoad); runs after the ASP.Net AJAX files load. You can do this a couple of ways:

  1. Add this script lower in the page than the scriptManager.
  2. Move your script into a separate JS file, and use the ScriptManager to load it (recommended).

If you move your script into a separate file, you'll notice that var editor = $find('<% =youreditor.ClientID %>'); no longer works. That is because javascript files do not parse out server tags and replace them with the server side value (as aspx pages do). So the part that is a problem here is <% =youreditor.ClientID %>.

To fix that, here is what you do:

Add this to your aspx markup (in the head section):

<script language="javascript">
    var myEditorId = '<%= youreditor.ClientID %>';
</script>

So it looks something like this:

<head runat="server">
    <script language="javascript">
        var myEditorId = '<%= youreditor.ClientID %>';
    </script>
<title></title>
</head>

(If you are using a Master Page, you'll just add the script tag below the ScriptManager in your page)

And in your JS file, replace this

var editor = $find('<% =youreditor.ClientID %>');

with this

var editor = $find(myEditorId);

OTHER TIPS

You will need to do this using CSS as the editor control doesn't support rtl natively. The following CSS will set direction to rtl - 

div
{
    direction:rtl;
}

The default styles for the HTML editor can be found in the Editor.css file.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top