Insert Text at Cursor Postion in Wijmo Editor

Wijmo Editor provides lot of options for inserting various elements in its editor such as table, image, links etc. but there is no direct method to insert text at current cursor position. However, Wijmo Editor being a jQuery based control, we can easily achieve this by using its client side object model. In this blog, we will create a custom method which implements the same. In order to insert any element, the most important thing we need is to access the document object of the control. After retrieving the document object by traversing through the iFrame element of Wijmo Editor, we can insert the text using createRange and execCommand methods. Here is the complete method which you can directly use in your application:

 function insetTextAtCursor(inputText) {  
    //get the container  
    var $designView = $("iframe", $(".wijmo-wijeditor-container")),  
         win, doc, range;  

    if ($designView && $designView.length > 0) {  
        //retrieve the Window object generated by the iframe  
        win = $designView[0].contentWindow;  
     }  

    if (win) {  
         //access the document object  
         doc = win.document;  
     }  

     if (doc) {  
        try {  
           //check if the browser is IE  
           if ($.browser.msie) {  
              //insert the given text  
              doc.body.focus();  
              range = doc.selection.createRange();  
              range.pasteHTML(inputText);  
              range.collapse(false);  
              range.select();  
           } else {  
              doc.execCommand('insertText', false, inputText);  
           }  
        } catch (e) {  
     }  
   }  
 }

You may also check out this sample implementing the same.The output will look like: