1

summernote を使用して WYSIWYG エディターを作成しました。私は編集者が本当に好きです。しかし、私はいくつかの機能を追加したいと考えています。

サーバーに既に存在する画像を挿入する機能がありません。画像をアップロードして、イベント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 に答える