web-dev-qa-db-ja.com

tinyMCE-画像のアップロードを処理する方法

私は人々がニュースを投稿するサイトを持っています、それはPHPで書かれています。

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

現在、サイトをアップグレードしており、ユーザーに柔軟性を与えることを検討しているため、JavaScript WYSIWYGテキストエディタを使用する予定です。

最もポピュラーなもの、または少なくともグーグルで見つけたものを確認した後、tinyMCEが最も文書化されていると思います。そのため、私は4〜5時間作業しただけですが、それで行くつもりだと思います。なので、別のエディターに切り替える必要があるかどうかは特に気にしません。

Textareaに画像をドラッグアンドドロップすると、tinyMCEは画像をbase64でエンコードし、画像タグのsrc属性として使用します。

私が思ったのですが、tinyMCEが画像をファイルとしてサーバーにアップロードして、phpでそれらを処理できるようにする方法はありますか（サムネイルを作成し、希望どおりに名前を付けて保存します）？

そうでない場合、それがオプションになるエディタはありますか？

phpjavascriptjquerywysiwygtext-editor
12
ppp

無料でオープンソースの小さなmce用のプラグインがもう1つあります。これを使えます
http://justboil.me/tinymce-images-plugin/

8
Abhishek

「 Responsive File Manager 」をお勧めします

これは、jQueryライブラリ、CSS3、PHPおよびHTML5で作成された無料のオープンソースファイルマネージャーおよび画像マネージャーであり、ファイル、画像、動画をアップロードおよび挿入するための優れたエレガントな方法を提供します。

enter image description here

素晴らしい機能：

  1. 簡単なドラッグ＆ドロップでファイルをアップロードします。
  2. スタンドアロンファイルマネージャー、TinyMCE、CKEditor、CLEditorプラグイン、またはクロスドメインとして使用します。
  3. アップロードされた画像の自動サイズ変更、オプションの画像サイズの制限、ファイル許可リストなどの多くのカスタマイズパラメータ。
  4. アップロードされた画像、ビデオ、オーディオの完全なプレビュー。
  5. サムネイルの自動作成および外部変更後のサムネイルの自動再配置

そして...

7
Milad Safaei

MCImageManager と呼ばれる有料のプラグインファイルマネージャーがあります。

または、uplodifyなどを画像の追加ポップアップに統合し、画像がアップロードされたらtinyMCEImageList.jsファイルを更新します。

3
Lawrence Cherone

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

ボタンをtinymceにID 'mybutton'でクリックイベントなしで追加します。

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

1
Daniel Flippance

PDWファイルブラウザ を試してください。そのWebページとは異なり、それは本当に優れています（そして、私の意見では、MS Windowsファイルエクスプローラーに似たGUIを提供するため、直感的です）。

0
Ondřej Bouda