Support forums » Products » Rich Text Editor for .NET and ... » How can I dynamically set the EditorBodyStyle from JavaScript?

How can I dynamically set the EditorBodyStyle from JavaScript?

Last post 03-28-2014, 11:56 AM by Kenneth. 9 replies.
Sort Posts: Previous Next

  •  07-26-2013, 5:42 PM 77774

    How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    We are using a variation of the One Editor, Multiple Edit Areas scenario, except that each edit area has its own editor body style.  

     

    For example, let's assume there are two edit areas, with the specified body styles:

    1. DarkBlue background, LightBlue foreground
    2. DarkGreen  background, Yellow foreground

    When a user edits area 1, we want the EditorBodyStyle to be DarkBlue bg, Lightblue fg.

    When the user edit area 2, we want the EditoryBodyStyle to be DarkGreen bg, Yellow fg.

     

    We do not want the user to be able to modify the body style.

     

    Also, these body styles must also be applied to the Preview tab.

     

     

    How do we accomplish this?


    Gerard

  •  07-26-2013, 8:26 PM 77776 in reply to 77774

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    Hi gll1559,

     

    Please try the example below, it shows you how to change the editor body style dynamically in javascript code.

     

    1. <%@ Page Language="c#" ValidateRequest="false" %>  
    2.   
    3. <%@ Register TagPrefix="RTE" Namespace="RTE" Assembly="RichTextEditor" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head>  
    7.     <title>example</title>  
    8. </head>  
    9.   
    10. <body>  
    11.     <form id="Form1" method="post" runat="server">  
    12.         <RTE:Editor ID="editor1" runat="server" />  
    13.     <input type="button" value="change editor body style"  onclick="styleChange()"/>  
    14.     <script type="text/javascript">  
    15.         function styleChange()  
    16.         {  
    17.             // get the rich text editor instance  
    18.             var editor1 = document.getElementById('<%= editor1.ClientID%>').editor;  
    19.             // get the active editor document  
    20.             var editwin = editor1.GetWindow();  
    21.             var editdoc = editwin.document;  
    22.             //change the editor body style in javascript  
    23.             editdoc.body.style.backgroundColor = "red";  
    24.         }  
    25.     </script>  
    26.     </form>  
    27. </body>  
    28. </html>  
     

    Regards,

     

    Ken 

  •  07-29-2013, 6:19 PM 77787 in reply to 77776

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    I tried your example and found a bug.

    1. Click the change editor body style button to make the background red.
    2. Type a few characters (e.g., "abc")
    3. Press Ctrl-Z to undo those characters.
    4. The background turns white.

    Other body styles will be undone as well, such as foreground color, font family, and so on.

     

    Gerard

     

  •  07-30-2013, 1:31 PM 77804 in reply to 77787

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    Hi gll1559,

     

    Please try the new example below, it should work.

     

    1. <%@ Page Language="c#" ValidateRequest="false" %>    
    2.     
    3. <%@ Register TagPrefix="RTE" Namespace="RTE" Assembly="RichTextEditor" %>    
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    5. <html xmlns="http://www.w3.org/1999/xhtml">    
    6. <head>    
    7.     <title>example</title>    
    8. </head>    
    9.     
    10. <body>    
    11.     <form id="Form1" method="post" runat="server">    
    12.         <RTE:Editor ID="editor1" runat="server"  />    
    13.     <input type="button" value="change editor body style"  onclick="styleChange()"/>    
    14.     <script type="text/javascript">  
    15.        
    16.         function styleChange() {  
    17.             // get the rich text editor instance    
    18.             var editor1 = document.getElementById('<%= editor1.ClientID%>').editor;  
    19.             // get the active editor document    
    20.             var editwin = editor1.GetWindow();  
    21.             var editdoc = editwin.document;  
    22.             //change the editor body style in javascript    
    23.             editdoc.body.style.backgroundColor = "red";  
    24.         }  
    25.         function RichTextEditor_OnExecCommand(editor, arg) {  
    26.             var a0 = arg.Arguments[0];  
    27.             if (a0 == "Undo")  
    28.             {  
    29.                 setTimeout("styleChange()", 1);  
    30.             }  
    31.         }  
    32.     </script>    
    33.     </form>    
    34. </body>    
    35. </html>    
     

    Regards,

     

    Ken 

  •  08-01-2013, 5:42 PM 77811 in reply to 77804

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    The OnExecCommand handler trick is a good work-around, but there is a white flash after the undo operation, as the body style background color is reset to white, followed by the styleChange() method setting the background color to red.  The fix "restores" the body style rather than "preserves" it.

     

    Gerard

  •  08-01-2013, 6:38 PM 77812 in reply to 77804

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    The dynamically set EditorBodyStyle is also being erased by the Create Image Map dialog.

     

    Reproduction steps:

    1. Open second example page provided by Kenneth.
    2. Click button to turn background red.
    3. Insert an image.
    4. Open the Create Image Map dialog.
      1. Oddly, the editor's page title is changed to NaN,NaN.
    5. Click the dialog's Cancel button to exit the dialog.
    6. The editor background turns white.

     

    I added some code to log to the console.

     

    RichTextEditor_OnExecCommand = function (rteEditor, info) {
        var cmd = info.Arguments[0];

        console.log("OnExecCommand, cmd = " + cmd);
    };
    RichTextEditor_OnExecUICommand = function (rteEditor, info) {
        var cmd = info.Arguments[1],
            thing = info.Arguments[0];

        console.log("OnExecUICommand, cmd = " + cmd + ", thing = " + thing);
    };

    When I ran the repro steps in Chrome, I saw the following log messages:

    OnExecUICommand, cmd = tabedit, thing = null
    OnExecCommand, cmd = tabedit
    OnExecUICommand, cmd = InsertGallery, thing = [object HTMLDivElement]
    OnExecUICommand, cmd = InsertImageMap, thing = [object HTMLDivElement] 

  •  08-02-2013, 2:00 PM 77813 in reply to 77812

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    Hi gll1559,

     

    I can reproduce it too. I will report it to the development team, once issue is fix, I will keep you posted.

     

    Regards,

     

    Ken 

  •  09-05-2013, 4:18 PM 77959 in reply to 77813

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    Have you made any progress on this bug?

     

    Gerard

     

  •  09-06-2013, 1:12 PM 77960 in reply to 77959

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    Hi gll1559,

     

    The development team still working on it. We will fix this bug in next patch.

     

    Regards,

     

    Ken 

  •  03-28-2014, 11:56 AM 80174 in reply to 77960

    Re: How can I dynamically set the EditorBodyStyle from JavaScript?

    Reply Quote

    Hi gll1559,

     

    We have fixed this issue, please download the latest build at http://richtexteditor.com/download/richtexteditor.rar  and try again.

     

    Regards,

     

    Ken 
View as RSS news feed in XML