Adding a new text in wysihtml5 editor at the cursor position

Question

I have implemented a wysihtml5 editor in my project and in that editor I want to append certain text when I click on a dropdown. I used the combination on selection star method of jquery and setvalue method of wysihtml5 editor. But the text is appending always at the last .The JSFiddle is this.

[http://jsfiddle.net/nt11Lsg2/21/][1]

Thanks

le.net/nt11Lsg2/21/

score 1 · Accepted Answer · answered May 29 '17 at 18:04

1

You can try with this:

var wysihtml5Editor = $('.textarea').data("wysihtml5").editor;
 wysihtml5Editor.composer.commands.exec("insertHTML", txtToAdd);

answered May 29 '17 at 18:04

Manisha Biswas

166
6

score 0 · Answer 2 · answered May 29 '17 at 17:56

0

Try append with index of carret. You can get the position like this:

$("#myTextInput").bind("keydown keypress mousemove", function() {
  alert("Current position: " + $(this).caret().start);
});

source from this

answered May 29 '17 at 17:56

GIA

1,400
2
21
38

score 0 · Answer 3 · answered May 29 '17 at 18:03

I'll share a method that i've used for years that performs a similar functionality. User clicks item from dropdownlist and some text gets inserted at the caret of a textbox.

function insertAtCaret(areaId, ddlID) {
        var ddl = $find(ddlID);
        var text = ddl.get_value();

        var txtarea = document.getElementById(areaId);
        var scrollPos = txtarea.scrollTop;
        var strPos = 0;
        var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false));
        if (br == "ie") {
            txtarea.focus();            
            var range = document.selection.createRange();
            range.moveStart('character', -txtarea.value.length );
            strPos = range.text.length;
        }
        else if (br == "ff")
            strPos = txtarea.selectionStart;

        var front = (txtarea.value).substring(0, strPos);
        var back = (txtarea.value).substring(strPos, txtarea.value.length);
        txtarea.value = front + text + back;
        strPos = strPos + text.length;

        if (br == "ie") {
            txtarea.focus();
            var range = document.selection.createRange();
            range.moveStart('character', -txtarea.value.length);
            range.moveStart('character', strPos);
            range.moveEnd('character', 0);
            range.select();
        }
        else if (br == "ff") {
            txtarea.selectionStart = strPos;
            txtarea.selectionEnd = strPos;
            txtarea.focus();
        }
        txtarea.scrollTop = scrollPos; 
    }

Adding a new text in wysihtml5 editor at the cursor position

3 Answers3