在 wysihtml5 编辑器中的光标位置插入文本

Question

我有一个带有一些值的文本区域和列表框。 当用户将光标放置在文本区域内的任何位置并从列表框中选择值时，应将其注入光标所在的特定位置。

我尝试了一些解决方案，其中文本总是附加在末尾。无法附加在光标位置。

Answer 1

在 wysihtml 编辑器中有一个名为 insertHTML 的命令，它应该完全做到这一点：在光标位置/选择处注入您喜欢的任何代码（ https://github.com/Voog/wysihtml/wiki/Supported-Commands#inserthtml- ）：

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

Answer 2

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

Answer 3

完成奥利弗的回答：

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

见： http : //jsfiddle.net/estani/pfm2bx6j/1/

如果您使用 rails https://github.com/Nerian/bootstrap-wysihtml5-rails gem，并将其添加到simple_for ... as: :wsyihtml5那么选择器应该是：

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