Question

我用summernote构建了一个WYSIWYG编辑器。我真的很喜欢编辑;但我想添加一些功能。

我错过了插入已驻留在我服务器上的图片的功能。您可以通过在editor.insertImage(welEditable, url);活动中调用的onImageUpload上传图片并将其插入文本区域。
但我想显示一个对话框，让用户选择已上传的图像。通过单击它，它应该将图像输入到summernote编辑器。

我遇到的问题是与summernote编辑器的连接。如何以字符串的形式向编辑器发送网址？

这就是我现在所构建的：

$('#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所以它引用了可编辑对象？但是哪一个？我怎样才能从图书馆那里得到它？

Answer 1

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

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

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

$('.note-editable');

所以最后我最终使用了以下额外的javascript：

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

Answer 2

这很简单。

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

在summernote中插入来自外部工具栏的图像

2 个答案: