在summernote中从外部工具栏插入图像答案

【问题标题】：Inserting image from outside toolbar in summernote在summernote中从外部工具栏插入图像
【发布时间】：2015-02-24 12:04:25
【问题描述】：

我已经用summernote 构建了一个所见即所得的编辑器。我真的很喜欢编辑器；但我想添加一些功能。

我无法插入已经存在于我的服务器上的图像。您可以通过在onImageUpload 事件中调用的editor.insertImage(welEditable, url); 上传图像并将其插入到文本区域中。
但我想显示一个对话框，让用户选择一个已经上传的图像。通过单击它应该将图像输入到summernote编辑器。

我遇到的问题是与summernote 编辑器的连接。如何将字符串形式的 url 发送给编辑器？

这是我现在构建的：

$('#summernote').summernote(
 {
   ...
   oninit: function() {
    //- construct button and add it to the ribbon   
        var catalogBtn = '<button id="catalogBtn" type="button" class="btn btn-normal"  data-event="launchCatalog" tabindex="-1"><i class="icon-heart"></i></button>';
        var fileGroup = '<div class="note-file btn-group">' + catalogBtn + '</div>';
        $(fileGroup).appendTo($('.note-toolbar'));
    //- add event listener for the click
        $('#catalogBtn').click(function(event) {
           showCatalog(editor);
        });
   }
})

function showCatalog(editor){
   //- some dialog logic which eventually calls this 
   //  for now the url is hard coded :)
   editor.insertImage( XXXXXX , 'http://example.com/path/to/image.png)
}

X 上应该使用什么？在 summernote.js 中它是 $editable 所以它指的是可编辑的对象？但是哪一个？我怎样才能从图书馆得到它？

【问题讨论】：

标签： javascript wysiwyg summernote

【解决方案1】：

SUmmernote 通过以下方式公开编辑器：

editor = $.summernote.eventHandler.getEditor();

可编辑对象可通过以下 jquery 选择器获得：

$('.note-editable');

所以最后我最终使用了以下附加 javascript：

var editor = $.summernote.eventHandler.getEditor();
editor.insertImage($('.note-editable'), src);

【讨论】：

【解决方案2】：

这很简单。

$summernote = $("#summernote");
$summernote.summernote("insertImage",imgUrl);

【讨论】：