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:
