ansaurus

Question

Ajax Control Toolkit HTML Editor Customization Problem ?

Answer 1

A:

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.

CraigS 2010-01-16 04:09:12

my Hole web Page is rtl. but there is no effect on ACT Editor because it is Dependant from Page Style. I want to Set Direction Button to RTL as Default.

mahdiahmadirad 2010-01-16 13:06:17

You can find the default CSS styling in AjaxControlToolkit\HTMLEditor\Editor.css. HTMLEditor also has a CssClass property.

CraigS 2010-01-16 20:22:22

Would You Mind Point me Witch Class name should I Change? there is lots of class names and I can't find witch one of them is for textarea style to change the style to RTL. though I don't think this Solution Causes to see selected rtl Button in control toolbar.

mahdiahmadirad 2010-01-17 12:23:04

Answer 2

+4 A:

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:

Add this script lower in the page than the scriptManager.
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);

Gabriel McAdams 2010-01-19 02:12:51

This is tremendous overkill for the question...all you have to do is set the existing stylesheet property and put the default styles you want in there. The buttons update themselves already...

Nick Craver 2010-01-19 16:29:49

@Nick: You're wrong. The OP didn't ask how to make an element in a page read right to left. He asked how to set the properties of an HTMLEditor component.

Gabriel McAdams 2010-01-19 18:08:11

@Gabrial McAdams: after your edit, the answer's much more appropriate, it was the other changes that made it overkill. I deleted my answer to this because the auto-detect functionality is not in the default Ajax Toolkit it seems, got taken out sometime before the latest release. Your current answer is spot on now, if they add the functionality for state detection back in with the 4.0 release, I'll come back and update this question.

Nick Craver 2010-01-19 19:35:37

Hi Mr.McAdams and thank you for your detailed Answer. I think your Answer is Perfect but there is a problem and this problem is My poor Knowledge About Asp.net AJAX Library. I am very beginner. I put your code in a <script> tag in page my Editor placed and the debugger does not recognize Sys.Application Object. I repeated this in Ajax Control Toolkit Sample Website Source Under the HTML Editor Folder and the result was the same. Which Java script source file should I add to my project that is not exist in ACT sample website!? Please Learn Me about using your code. Thank You.

mahdiahmadirad 2010-01-20 20:31:13

Sys.Application should be there. This may be a script loading order issue. Put your script into a separate js file, add your script file to your scriptmanager so that it'll be loaded in the proper order.

Gabriel McAdams 2010-01-20 20:36:53

mahdiahmadirad 2010-01-21 19:35:22

Sorry. Once you move your javascript to an external file, the server tag wont work. You have to replace that with its asp.net generated id. I added this to my answer if you want to see how its done.

Gabriel McAdams 2010-01-21 21:06:32

thank you. I did what you said but now there is another problem with var myEditorId = '<%= youreditor.ClientID %>'; an error occurs: "message: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."I replaced <%= to <%# and the error fixed but now there is nothing in myEditorId variable and its content is:"".here is a Q: is there any difference between ID="editor1" and id="editor1" as an ACT Editor identification in this situation?

mahdiahmadirad 2010-01-21 22:17:30

How are you adding that script tag to the page? See my modified answer for a good example.

Gabriel McAdams 2010-01-21 22:41:22

I fixed that by placing script tag inside form tag(because script tag for a page inside head tag will will place in MaterPage!). but there is another problem with your JScript code. toolbarChanging Method does not contains any button to retrieve. I put the screenshot Here: http://tinyurl.com/acttrace So For Loop doesn't loops and if conditions doesn't work! var myEditorId = '<%= youreditor.ClientID %>'; works properly.

mahdiahmadirad 2010-01-22 07:32:44

I'm not sure why the buttons collection is null. I will look into it. One option, though, is to take the cached buttonids, split it on ';' and for each one, call $find(). That'll give you the buttons also.

Gabriel McAdams 2010-01-22 16:04:47

Sorry for disturbing you Gabriel. I Modified the code as you say: var toolbarButtons = toolbar._cachedButtonIds.split(';'); so Now I have all buttonIds in toolbarButtons but these are Ids not the exact Buttons and the if conditions inside foreach will never be True to call Methods! Can you help me about this?

mahdiahmadirad 2010-01-22 17:22:37

for each id, call this function to get the button object - `var button = $find(thebuttonid);`

Gabriel McAdams 2010-01-22 17:43:00

I did it.so after lots of corrections! I reached to RTL and Bold Button and button.callMethod(); method called. but unfortunately No any changes to Editor Happened. what does callMethod() do?

mahdiahmadirad 2010-01-22 19:42:53

I looked at this, and I had some things incorrect. At the time my script runs, the buttons have not yet been initialized. If it is run later (after the page has loaded) then it works. I will try to get it to work earlier.

Gabriel McAdams 2010-01-22 20:38:03

After reading more of the javascript code for the HTMLEditor, it seems that although the editor is created during init, it and the toolbar and toolbar buttons are initialized during load. This means that your code MUST run after the load event, but before the page is usable. Also, I noticed that at this point, the buttons need to have their active editPanel set manually as well (it is set later, so there's no harm in doing so this way). I modified my answer accordingly. The code in my modified answer has been tested and it works.

Gabriel McAdams 2010-01-22 21:12:17

@ Gabriel McAdams: Really Really Really Thank You For Your Time! The Problem Solved Properly According to Your patiently Answers. Excuse Me If I Hurt You By My Disturbing Questions. I learned Many New Things in Client Side from you. anyway Thank you.

mahdiahmadirad 2010-01-22 21:32:29

Don't worry about it. I was happy to help. I'm glad you got it up and running.

Gabriel McAdams 2010-01-22 21:36:13

I posted about this on my blog. Thought it would make it easier for other developers to walk through. http://www.thecodepage.com/post/Change-the-default-state-of-an-AJAXControlToolkit-HTMLEditor-Toolbar-Button.aspx

Gabriel McAdams 2010-02-10 05:18:38

Answer 3

A:

This is exactly what I want, but I can't seem to get it working at all. Can anyone help on this? Pretty sure I followed the instructions exactly, and my code looks like this

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script language= "javascript" type="text/javascript">
    // Attach a handler to the load event. 
    Sys.Application.add_load(myFunction);

    function myFunction() {
        //Setup myOnLoad to run AFTER the load event handlers have all completed 
        window.setTimeout(myOnLoad, 0);
    }

    function myOnLoad() {
        //Find the instance of editor 
        var editor = $find('<%=editor.ClientID %>');
        //Access the editor's toolbar 
        var toolbar = editor.get_changingToolbar();
        //Get an array of toolbar buttons 
        var toolbarButtons = toolbar.get_buttons();
        //Loop through the buttons array looking for the one we need 
        for (var i = 0; i < toolbarButtons.length; i++) {
            //If this button is the right to left direction button, then toggle
            if (toolbarButtons[i] instanceof AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold) {
                //first, make sure the button has an edit panel set 
                toolbarButtons[i].set_activeEditPanel(editor.get_editPanel());
                //Call the callMethod function (toggles the button) 
                toolbarButtons[i].callMethod();
                //toolbarButtons[i].style.display = "none";
            }
        }
    } 
</script>
<cc1:Editor Id="editor" runat="server" Height="300px" />

This is inside a master page content container. However, when I run the page, the bold is never toggled on to start. What am I missing?

Also once at this point, how would I hide buttons I don't want to show? I found the page that says how to do that, but I can't do that with my project because its a web app, not a website with an app_code folder. Someone else said set the style to display none, but when I tried that that also didn't work.

sah302 2010-10-13 17:04:05

please read all "Gabriel McAdams" answer with all 14 comments. It works for me fine. if you couldn't solve your problem i can send my source and you can read it edit it or use it.

mahdiahmadirad 2010-10-21 08:48:27

ansaurus

tags:

views:

answers:

Ajax Control Toolkit HTML Editor Customization Problem ?

related questions