web-dev-qa-db-ja.com

Summernote WYSIWYGエディターでイメージマネージャーを追加するにはどうすればよいですか？

TinyMCE、Ckeditor、Summernoteなどの多くのWYSIWYGエディターを試しました。

私はSummernoteのシンプルさと 編集/保存 機能が好きですが、summernoteにはTinyMCEやCKEditorのような画像マネージャープラグインがないようです。

私のウェブアプリには、個々のユーザーがアップロードできる写真のプール（メディアライブラリ）があります。ユーザーがプールから写真を選択し、Summernoteで記事を編集するときにテキスト領域に追加できる機能が欲しいです（Wordpressのように）。

プラグインが本当にサポートされていない場合、誰かがこの機能を手動で実行する方法のヒントを教えてもらえますか？

javascriptsummernote
10
wilson Liu

summernotegithub号の私の投稿に見られるように。 https://github.com/summernote/summernote/issues/12

これは、elFinderファイルマネージャーをSummernoteと統合するために私が行うことです。

エディタでボタンを作成する

(function (factory) {
  /* global define */
  if (typeof define === 'function' && define.AMD) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    // Browser globals: jQuery
    factory(window.jQuery);
  }
}(function ($){
  // template, editor
  var tmpl = $.summernote.renderer.getTemplate();
  // add plugin
  $.summernote.addPlugin({
    name: 'genixcms', // name of plugin
    buttons: { // buttons
      readmore: function () {
        return tmpl.iconButton('fa fa-long-arrow-right', {
          event: 'readmore',
          title: 'Read more',
          hide: false
        });
      },
      elfinder: function () {
        return tmpl.iconButton('fa fa-list-alt', {
          event: 'elfinder',
          title: 'File Manager',
          hide: false
        });
      },
    },

    events: { // events
      readmore: function (event, editor, layoutInfo) {
        layoutInfo.holder().summernote("insertText", "[[--readmore--]]");
      },
      elfinder: function (event, editor, layoutInfo) {
        elfinderDialog();
      },

    }
  });
}));

私が私のcmsのために作った2つのボタンがあります。ファイルマネージャのelfinderボタンを参照してください。 elfinderイベントはelfinderDialog（）関数を実行し、その後関数を作成する必要がありました。

その後、summernoteconfigにボタンを追加します。

$('.editor').summernote({
    height: 300,
    toolbar: [
            ['style', ['style']],
            ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
            ['genixcms', ['elfinder']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ],
    onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0],editor,welEditable);
        }
});

このタグを参照してください['genixcms', ['elfinder']]独自の分割があったため、ボタンは他のボタンとは別に表示されます。サマーノート画像ボタンにはデフォルトの画像アップロードがあります。そしてそれはサーバーにアップロードすることができます。私はそれを動作させ、うまく実行しました。問題は、変更を加える必要があり、ファイルマネージャーが必要になる場合があります。

ElFinderjavascript関数を追加します

すべてのsummernote要件がボタンをロードする準備ができたら。ボタンがクリックされたときに実行される関数を作成する必要があります。以下のコードを参照してください。

function elfinderDialog(){
    var fm = $('<div/>').dialogelfinder({
        url : 'http://localhost/genixcms/inc/lib/Vendor/studio-42/elfinder/php/connector.minimal.php',
        lang : 'en',
        width : 840,
        height: 450,
        destroyOnClose : true,
        getFileCallback : function(files, fm) {
            console.log(files);
            $('.editor').summernote('editor.insertImage',files.url);
        },
       commandsOptions : {
            getfile : {
                oncomplete : 'close',
                folders : false
            }
        }

    }).dialogelfinder('instance');
}

画像を挿入するのは簡単です。画像をダブルクリックするだけで、画像がエディタに挿入されます。

この小さなスニペットが、ファイルマネージャーを必要とし、elFinderをファイルマネージャーとして使用したい人に役立つことを願っています。

ありがとう

10
semplon

彼らのメインページのデモには、画像アップローダーが含まれています。また、そのドキュメントを表示することができます ここ

0
slimeygecko