1

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

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

我遇到的问题是与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 所以它指的是可编辑的对象？但是哪一个？我怎样才能从图书馆得到它？

4

2 回答 2

1

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

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

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

$('.note-editable');

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

var editor = $.summernote.eventHandler.getEditor();
editor.insertImage($('.note-editable'), src);
于 2014-12-28T16:13:42.180 回答
0

这很简单。

$summernote = $("#summernote");
$summernote.summernote("insertImage",imgUrl);
于 2015-10-23T21:56:08.030 回答