tinyMCE - 画像のアップロードを扱う方法

Question

私はニュースを投稿するサイトをPHPで書いています。

これまで、記事を投稿する人は、テキスト入力用のテキストエリアと、その記事の画像をアップロードするフォームフィールドを持っていました。

私はサイトをアップグレードしています。私は人々にもっと柔軟性を与えることを検討していますので、JavaScriptのWYSIWYGテキストエディタを使用する予定です。

私が見つけた最もポピュラーなもの、または少なくとも私がグーグルで見つけたものを見直した後、私はtinyMCEが最もよく文書化されていると思っています。なぜなら、 4-5時間ですので、別のエディタに切り替える必要があるかどうかは気にしません。

テキストエリアでイメージをドラッグドロップすると、tinyMCEはイメージをbase64でエンコードし、imageタグのsrc属性として使用します。

私はPHPでそれらを扱うことができるようにtinyMCEをファイルとしてサーバーにアップロードする方法があるのでしょうか（サムネイルを作って、名前を付けて保存します）？

もしそうでなければ、それはオプションになるエディタがありますか？

Answer 1

フリーでオープンソースの小さなmce用のプラグインがあります。あなたは使用することができ、この
http://justboil.me/tinymce-images-plugin/

Answer 2

が支払われたプラグインファイルマネージャが

MCImageManagerと呼ばそれとも、uplodify統合したり、そのような追加の画像、ポップアップ、画像がアップロードされ、その後更新tinyMCEImageList.jsファイルに可能性があります。

Answer 3

はPDW File Browserを試してみてください。 Webページとは違って、それは本当に良い（私の意見では、MS Windowsのファイルエクスプローラに似たGUIを提供するので、直感的です）。

Answer 4

追加のポップアップウィンドウを必要とせずにPluploadを使用してツールバーボタンから直接TinyMCEから画像をアップロードする簡単なオプションがあります。注 - これにより、ファイルピッカーを使用してファイルを選択できますが、ドラッグドロップはサポートされません。

ID 'myButtonという' とノークリックイベントでTinyMCEのためにボタンを追加します。

tinymce.init({selector:'.use-tinymce', 
    plugins: "code link visualblocks", 
    menubar: false, 
    extended_valid_elements : "span[!class]", 
    toolbar: "undo redo | formatselect | link code | mybutton", 
    visualblocks_default_state: true, 
    setup: function(editor) { 
     editor.addButton('mybutton', { 
      type: 'button', 
      title: 'Insert image', 
      icon: 'image', 
      id: 'mybutton' 
     }); 
     editor.on('init', function(e) { 
      var pluploadHandler = new PluploadHandler(jQuery, plupload); 
     }); 
    }   
});  

リファレンスこのボタンをPluploadの初期化で：

var PluploadHandler = function($, plupload) { 
    ... 
    this.uploader = new plupload.Uploader({ 
     runtimes : 'html5,flash,silverlight,html4', 
     browse_button : document.getElementById('mybutton'), 
     url : '/path/to/upload/the/image', 

あなたはサーバを書く必要がありますあなたのアップロードパス/path/to/upload/the/imageの画像を保存し、新しい画像へのURLで応答するためのサイドコード。

最後にアップロードされた応答をキャッチし、TinyMCEのに自分のイメージタグを追加します。

this.uploader.init(); 
    this.uploader.bind("FilesAdded", handlePluploadFilesAdded); 
    this.uploader.bind("FileUploaded", handlePluploadFileUploaded); 

    function handlePluploadFilesAdded(up, files) { 
     console.log("+ handlePluploadFilesAdded"); 
     up.start(); 
    } 

    function handlePluploadFileUploaded(up, file, res) { 
     console.log("++ res.response: " + JSON.stringify(res.response)); 
     var img = "<img src='" + res.response + "?" + Date.now() + "'>"; 
     tinymce.activeEditor.execCommand('mceInsertContent', false, img); 
    } 
} 

完全なソースコードは、ここ（TinyMCEを4.1.9でテストされ、Plupload 2.1。2）： https://gist.github.com/danielflippance/e1599fd58ada73b56bfb

Answer 5

私がアップロードする素晴らしく、エレガントな方法を提供していますjQueryライブラリ、CSS3、PHPおよびHTML5で作られた無料のオープンソースファイルマネージャとイメージマネージャである「Responsive File Manager」

をお勧めしますファイル、画像、動画を挿入することができます。

偉大な機能：簡単なドラッグ＆ドロップ&と

1. アップロードファイル。
2. スタンドアロンファイルマネージャとして、TinyMCE、CKEditor、CLEditorのプラグインまたはクロスドメインとして使用します。
3. アップロードされた画像の自動サイズ変更などの多くのカスタマイズパラメータ 画像、画像サイズのオプションの制限、ファイル許可リスト。
4. アップロードした画像、動画、音声のプレビューサムネイルと私はメディアを処理するために非フリーの追加としてCKFinderを持ってCKEditorバージョンを使用していた外部の変更

と...