tinyMCE - 如何處理圖片上傳

我有一個網站，人們發佈新聞，它是用PHP編寫的。tinyMCE - 如何處理圖片上傳

到目前爲止，發佈故事的人都有一個用於文本輸入的textarea和一個用於上傳故事圖像的表單域。

現在我正在升級網站，我正在考慮給人們更多的靈活性，所以我打算使用JavaScript所見即所得的文本編輯器。

在回顧了最流行的話題之後，或者至少我發現了google，我認爲tinyMCE是最好的記錄，這就是爲什麼我認爲我會去用它，雖然我剛剛與它合作4-5小時，所以我不在乎是否必須切換到其他編輯器。

在textarea中拖放圖像時，tinyMCE會將圖像編碼爲base64，並將其用作圖像標記的src屬性。

我想知道，有沒有辦法讓tinyMCE將圖像上傳到服務器作爲文件，以便我可以使用php來處理它們（使縮略圖，名稱和存儲它們，如我所願）？

如果沒有，是否有編輯器，那將是一個選項？

來源

2012-06-20 ppp

我用的CKEditor具有CKFinder作爲一個非自由除處理媒體的是一種選擇爲你？ – gunnx

U可能使用eMinder插件for tinyMCE：https://www.google.ru/search?q=tinymce+elfinder – Sergey

@gunnx非免費代碼可能是一個選項，具體取決於整合時間和成本。我會將其作爲一個選項進行檢查。 – ppp

還有另外一個可以免費開源的微型mce插件。您可以使用此
http://justboil.me/tinymce-images-plugin/

來源

2012-06-20 13:46:32 abhi

玩，我可以上傳圖片到服務器？我也希望上傳的圖像能夠在文本內部上傳 – Lykos

我很困惑我是否應該開始使用它，因爲大量不積極的評論 –

有一個支付插件文件經理叫MCImageManager

或者你可以整合uplodify或成等附加圖像彈出，圖像上傳，然後當更新tinyMCEImageList.js文件。

來源

2012-06-20 12:55:13

用這個插件不能和mod_security – Imperative

嘗試PDW File Browser。與其網頁不同，它非常好（在我看來，直觀，因爲它提供了類似於MS Windows File Explorer的GUI）。

來源

2012-07-21 13:36:22

下面是使用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-18 05:22:26

PHP響應代碼片段會是什麼樣子？非常感激。 – Marcel

我建議「Responsive File Manager」

這與jQuery庫做了一個免費的開源文件管理器和圖像管理器，CSS3，PHP和HTML5，提供了一個很好的和優雅的方式來上傳並插入文件，圖像和視頻。

enter image description here

強大的功能：

用簡單的拖放&降上傳文件。
用作獨立文件管理器，如TinyMCE，CKEditor或CLEditor插件或作爲跨域。
許多自定義參數，例如上傳的圖像的自動調整大小，圖像尺寸的可選限制，文件允許列表。
上傳圖片，視頻和音頻的完整預覽。
自動創建縮略圖和外部變化

和縮略圖後自動調整...

來源

2015-06-10 06:00:58 MiladSafaei

tinyMCE - 如何處理圖片上傳

回答

相關問題