C# equivalent code for inserting HTML text in HTMLEditor control

Question

I've the below javascript code for inserting the html text at the current cursor location.

function insertTextInHTMLEditorAtCursor() {

        var editorControl = document.getElementById("Editor1");
        var editPanel = editorControl.control.get_editPanel();
        if (editPanel.get_activeMode() == 0) {
            var designPanel = editPanel.get_activePanel(); // Achievable till here
            designPanel.insertHTML("Additional text"); // C# equivalent?                
        }
    }

The above code does the job perfectly fine by using Javascript.

However, my requirement is to achieve the same using code behind (not by using JS).

So far I achieved writing the C# equivalent code using Reflection till the line with the comment "Achievable till here". Below is the C# code:

        PropertyInfo piEditPanel = this.testEditor.GetType().GetProperty(
                                               "EditPanel", 
                                                System.Reflection.BindingFlags.NonPublic | 
                                                System.Reflection.BindingFlags.Static | 
                                                System.Reflection.BindingFlags.Instance);

        var editPanel = piEditPanel.GetValue(this.testEditor, null);
        PropertyInfo piActiveMode = piEditPanel.PropertyType.GetProperty("ActiveMode");
        dynamic designMode = piActiveMode.GetValue(editPanel, null);   

        FieldInfo fiModelPanel = piEditPanel.PropertyType.GetField("ModePanels", 
                                                                    BindingFlags.Static | 
                                                                    BindingFlags.NonPublic | 
                                                                    BindingFlags.Instance);

        dynamic modePanels = fiModelPanel.GetValue(editPanel);
        var designModel = modePanels[0]; // I get the DesignPanel

I'm stuck at the next following line - the reason being insertHTML method is not defined in any of the .cs files (I downloaded the AJAX Control toolkit source code to check this). It is rather defined as a Javascript function in DesignPanel.pre.js file.

My question: Is there a way that I can "somehow" be able to call the insertHTML method?

Thanks in advance.

C# is server side code, JavaScript and HTML is Client side code, that means executed on client side. Do you understand now. Without JavaScript there is no way to communicate with the server, and there is no way to communicate from C# to Client side (HTML pages only). In order to change something you need to use JavaScript. And there is also way to parse html pages in C# but not to change anything on client side after response!!!!!!! — Senad Meškin, Dec 19 '13 at 15:45
Cant u use **editor1.Content += your_text** for HTML editors at server side? — Hitesh Gaur, Dec 19 '13 at 16:10
@HI2: Doing that would only append the text at the bottom, not at the current cursor position. — Ads, Dec 19 '13 at 16:18

mason · Answer 1 · 2013-12-19T16:30:12.077

0

There is no need for reflection. You're try doing a simple thing here, but your attempt is overcomplicating it. What you need to do from your code behind is set the .Content property of your HTMLEditor to the string that contains your HTML markup.

protected void Page_Load(object sender, EventArgs e)
   {
   if(!IsPostBack)
      {
      string MyHtml=GetMyHtmlFromDatabaseOrSomewhere();
      MyHTMLTextEditor.Content=MyHtml;
   }
}

edited Dec 19 '13 at 16:30

answered Dec 19 '13 at 16:03

mason

31,774
10
77
121

there's no property by name ".Text" for the HTMLEditor control. – Ads Dec 19 '13 at 16:17
Are you using a TextBox and then using the HTMLEditorExtender from the AjaxControlToolkit? Please edit your question and show the markup so we can see what you're doing. – mason Dec 19 '13 at 16:21
The question title says "HTMLEditor". Anyway, it's an AjaxControlToolkit.HTMLEditor.Editor control. – Ads Dec 19 '13 at 16:24
I've updated my answer. It appears it uses the Content property instead of Text, based on the source for AjaxControlToolkit.HTMLEditor.Editor http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Server/AjaxControlToolkit/HTMLEditor/Editor.cs – mason Dec 19 '13 at 16:30
Right, it uses the Content property. However, this property doesn't serve the purpose of inserting the text at the current cursor location; it rather appends the text at the bottom. – Ads Dec 19 '13 at 16:34
That's because server side has no idea where the cursor is. If you want to insert at a specific position, you HAVE to use client side code. – mason Dec 19 '13 at 16:35
Okay, makes sense. Assume that if I were to able to access the function insertHTML through Reflection (just as I was able to with other functions), would it have worked that way? – Ads Dec 19 '13 at 16:40

score 0 · Answer 2 · answered Dec 19 '13 at 17:07

0

My suggestion will be to use a hiddenfield to store the position of cursor, using javascript and then at server side code a) use substring for the editor.content starting from 0 index, having length till that value from hidden field, b) append your text to result of step a

    //hf_cursor_position is id of hiddenfield 
    //where you would store value of current position of cursor 
    //using javascript
    int cursor_position = 0;
    int.tryParse(hf_cursor_position.value, out cursor_position);

    editor1.content = editor1.Content.Substring(0, (cursor_position + 1)) + your_text;

answered Dec 19 '13 at 17:07

Hitesh Gaur

362
1
11

That's a cool idea. I'll try figuring it out if there's a way to get the current cursor position using Javascript from HTMLEditor control. Thanks man. – Ads Dec 19 '13 at 17:21
I tried but in vain. There are no methods like selectionStart and selectionEnd in HTMLEditor control. – Ads Dec 19 '13 at 17:41
@Ads: [http://stackoverflow.com/questions/8664504/designmode-iframe-get-cursor-position](http://stackoverflow.com/questions/8664504/designmode-iframe-get-cursor-position) this link tells you how to get cursor position inside an iframe, since htmlEditor uses iframe to render its content. – Hitesh Gaur Dec 20 '13 at 06:20
The link provided by you was most helpful. Thanks. – Ads Dec 22 '13 at 02:29

C# equivalent code for inserting HTML text in HTMLEditor control

2 Answers2