Einfügen von Text an der Cursorposition in WYSIHTML5 Editor

Question

Ich habe einen Textbereich und ein Listenfeld mit einigen Werten. Wenn der Benutzer den Cursor an einer beliebigen Stelle innerhalb des Textbereichs platziert und den Wert aus dem Listenfeld auswählt, sollte er an der bestimmten Position eingefügt werden, an der sich der Cursor befindet.

Ich habe einige Lösung versucht, wo der Text immer am Ende angehängt wird. Nicht in der Lage, an der Cursorposition anzuhängen.

Answer 1

In wysihtml Editor gibt es einen Befehl insertHTML genannt, die genau das tun shoult: injizieren, was Code, den Sie an der Cursorposition mag/Auswahl (https://github.com/Voog/wysihtml/wiki/Supported-Commands#inserthtml-):

editorInstance.composer.commands.exec("insertHTML", "<blockquote>foobar</blockquote>"); 

Wenn Ihre Symbolleiste auf bearbeitbaren Bereich konzentrieren verliert (wie wählen Sie Dropdown tun oder Eingabe kann), müssen Sie Auswahl der Symbolleiste auf die Öffnung speichern und Auswahl wiederherstellen, bevor Befehl mit

var b = editorInstance.composer.selection.getBookmark(); 

und

Ausführung

var editorInstance.composer.selection.setBookmark(b); 

Wie hier ist getan: https://github.com/Voog/wysihtml/blob/master/examples/wotoolbar.html#L351

Answer 2

für Bootstrap-wysihtml5 Verwendung Funktion folgende es für mich arbeiten:

<script> 

    $(function() { 
    // Replace the <textarea id="editor1"> with a CKEditor 
    // instance, using default configuration. 
    // CKEDITOR.replace('editor1'); 
    //bootstrap WYSIHTML5 - text editor 
    $(".textarea").wysihtml5(); 

    }); 



function injectString(str){ 
    var sel=frames[0].getSelection(); 
    var nd=sel.anchorNode; 
    var txt=nd.data+''; 
    var pos=sel.anchorOffset||0; 
    sel.anchorNode.data=txt.slice(0,pos)+str+txt.slice(pos); 
}</script> 

Verwendung wie diese

<button id="name" data-wysihtml5-command="foreFrac" onclick="injectString('{name}')" type="button" class="btn btn-block btn-success btn-lg">Name </button>