Вставить текст в позиции курсора в редакторе wysihtml5

Question

У меня есть текстовая область и список с некоторыми значениями. Когда пользователь помещает курсор в любое место внутри текстовой области и выбирает значение из списка, он должен быть введен в определенную позицию, в которой находится курсор.

Я пробовал какое-то решение, где текст всегда добавляется в конце. Не удается добавить в позиции курсора.

Answer 1

В редакторе wysihtml есть команда с именем insertHTML, которая должна делать именно это: вставлять любой код, который вам нравится, в положение курсора / выбор ( https://github.com/Voog/wysihtml/wiki/Supported-Commands):

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

Если ваша панель инструментов теряет фокус на редактируемой области (как это может сделать выпадающий список или ввод), вы должны сохранить выделение при открытии панели инструментов и восстановить выделение перед выполнением команды с

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

а также

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

Как здесь сделано: https://github.com/Voog/wysihtml/blob/master/examples/wotoolbar.html

Answer 2

Чтобы завершить ответ Оливера:

$('.textarea').data('wysihtml5').editor.composer.commands.exec("insertHTML", "<b>hi!</b>");

см.: http://jsfiddle.net/estani/pfm2bx6j/1/

Если вы используете рельсы https://github.com/Nerian/bootstrap-wysihtml5-rails gem, и добавьте его поверхsimple_for ... as: :wsyihtml5 тогда селектор должен быть:

$('textarea.wysihtml5').data('wysihtml5').editor//...

Answer 3

Для bootstrap-wysihtml5 используйте следующую функцию, она работает для меня:

<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>

использовать как это

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