Support forums » Products » Rich Text Editor for .NET and ... » Re: Adding code snippets in JavaScirpt

Adding code snippets in JavaScirpt

Last post 12-11-2013, 8:22 AM by Kenneth. 5 replies.
Sort Posts: Previous Next

  •  12-05-2013, 6:43 PM 78518

    Adding code snippets in JavaScirpt

    Reply Quote
    Is there a way to add items to a treeview (such as the code snippets for example) in JavaScript?

  •  12-06-2013, 8:09 AM 78526 in reply to 78518

    Re: Adding code snippets in JavaScirpt

    Reply Quote

    Hi frJericho,

     

    Can you explain your requirement in detail? The treeview is one of the editor toolbar item? Or is the html content what you are editing in editor?

     

    If is second one, you can get the editor edit area document, once you get the editor document, you can use the normal javascript method to get any element of the document. It has the same functions as the html dom.

     

    1. Getting the Active Editor Document  
    2. In order to find the active editor document, you would type:  
    3. // get the active editor document  
    4. var editor1 = document.getElementById('<%= Editor1.ClientID%>').editor;  
    5. var editwin = editor1.GetWindow();  
    6. var editdoc = editwin.document;  
     

     

    Regards,

     

    Ken 

  •  12-06-2013, 9:13 AM 78528 in reply to 78526

    Re: Adding code snippets in JavaScirpt

    Reply Quote

     What I'm trying to do is to add a new item in the "Code Snippet" treeview:

     

    By the way, can I replace the words "Code Snippet" with a custom heading?

  •  12-09-2013, 10:55 PM 78549 in reply to 78528

    Re: Adding code snippets in JavaScirpt

    Reply Quote

    Dear frJericho,

     

    For Adding code snippets in Javascript, please refer the following demo (put the js in head node)

    1. <script type="text/javascript">  
    2.         function RichTextEditor_OnLoader(loader) {  
    3.             var config = loader._config;  
    4.             config.templategrouparray = [{  
    5.                 "text": "leveltop",  
    6.                 "groups": [{ "text": "leve1", "groups":[], "templates": [{ "text": "level1_1", "href": "", "code": "level1_1" }, { "text": "level1_2", "href": "", "code": "level1_2" }] },  
    7.                     { "text": "leve2", "groups": [], "templates": [{ "text": "level2_1", "href": "", "code": "level2_1" }, { "text": "level2_2", "href": "", "code": "level2_2" }] }],  
    8.                 "templates": [{ "text": "level0", "href": "", "code": "level0" }]  
    9.             }];  
    10.             config.templateitemarray = [{ "text": "level0_1", "href": "", "code": "level0_1" }, { "text": "level0_2", "href": "", "code": "level0_2" }];  
    11.         }  
    12.     </script>  
     

    If you want to customize the heading, you can open file "richtexteditor/dialogs/inserttemplate_dropdown.xml"

    <groupbox text="@codesnippet" dock="top" overflow="visible" margin="3"> 

     if you just want to change text, replace @codesnippet with your text

    if you want to use html tag, you need to use our jsml language, such as

     <label dock="top" text="MyTitle"></label>

     

    Regards,

    Jeff 

  •  12-10-2013, 10:17 AM 78568 in reply to 78549

    Re: Adding code snippets in JavaScirpt

    Reply Quote

     Thanks for your explanation on changing the heading, it will be helpful.

     

     Regarding adding code snippets:

    Is it possible to add the items AFTER the editor has been loaded? The reason I'm asking is that I want to render the HTML editor as quickly as possible and execute an AJAX call to a 3rd party web service to retrieve the code snippets. This ajax call can potentially take several seconds and I don't want to block the UI while I'm retrieve the items.

     

  •  12-11-2013, 8:22 AM 78579 in reply to 78568

    Re: Adding code snippets in JavaScirpt

    Reply Quote

    Hi frJericho,

     

    Please try the example below. It shows you how to add the code snippets dynamically in javascript.

     

    If you want to add it in server side code, please refer to http://richtexteditor.com/document/scr/html/code-snippets-dropdown.htm 

     

    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.   
    13.         <RTE:Editor ID="editor1" runat="server"/>  
    14.        <input type="button" value="add custom template" onclick="addCustomTemplate()" />  
    15.     </form>  
    16. </body>  
    17. </html>  
    18.   
    19. <script type="text/javascript">  
    20.     var editor1;  
    21.     function RichTextEditor_OnLoad(editor) {  
    22.         editor1 = editor;  
    23.     }  
    24.     function addCustomTemplate()  
    25.     {  
    26.          editor1.LoadTemplates(function (group) {  
    27.             group.groups.push({  
    28.                 text: "custom group", groups: [], templates: [  
    29.                     { text: "sub template", href: "",code:"template text 1" }  
    30.                 ]  
    31.             });  
    32.             group.templates.push({  
    33.                 text: "my Template", href: "",code:"template text 2"  
    34.             });  
    35.         });  
    36.     }  
    37.   
    38. </script>  
     

    Regards,

     

    Ken 
View as RSS news feed in XML