13

人々がニュースを投稿するサイトがあり、PHP で書かれています。

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

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

最も人気のあるもの、または少なくともグーグルで見つけたものを確認した後、tinyMCE が最もよく文書化されていると思います。それが、約 4 ～ 5 時間使用したばかりですが、それを使用するつもりだと思う理由です。 、だから別のエディターに切り替える必要があるかどうかはあまり気にしません。

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

tinyMCE で画像をファイルとしてサーバーにアップロードして、php で処理できるようにする方法はありますか (サムネイルを作成し、必要に応じて名前を付けて保存します)。

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

4

5 に答える 5

8

「レスポンシブ ファイル マネージャー」をお勧めします

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

ここに画像の説明を入力

優れた機能:

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

と ...

于 2015-06-10T06:00:58.083 に答える
7

無料でオープン ソースの tiny mce 用の別のプラグインがあります。これを使用できます
http://justboil.me/tinymce-images-plugin/

于 2012-06-20T13:46:32.347 に答える
3

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

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

于 2012-06-20T12:55:13.383 に答える
1

追加のポップアップ ウィンドウを必要とせずに、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

于 2015-04-18T05:22:26.347 に答える
0

PDW File Browserを試してください。Web ページとは異なり、非常に優れています (MS Windows のファイル エクスプローラーに似た GUI を提供しているため、私の意見では直感的です)。

于 2012-07-21T13:36:22.800 に答える