如何使用TinyMCE上傳圖像？

我檢查了tinyMCE文檔，但無法獲得完整的工作腳本，通過拖放文本編輯器上傳圖像或上傳/瀏覽按鈕。如何使用TinyMCE上傳圖像？

我現在使用的波紋管：

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script> 
<script> 
tinymce.init({ 
    selector: "textarea", 
    relative_urls : true, 
    remove_script_host : false, 
    convert_urls : true, 
    default_link_target:"_blank", 
    images_upload_base_path: '../images/tinymce', 
    automatic_uploads: true, 
    file_browser_callback_types: 'file image media', 
    images_upload_url: 'postAcceptor.php', 

    plugins: [ 
    "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", 
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
    "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern" 
    ], 

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", 
    toolbar2: "image | media | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor code | insertdatetime preview | forecolor backcolor", 
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", 
//image, media from toolbar2 
    menubar: false, 
    toolbar_items_size: 'small', 
    height: 300, 
    style_formats: [{ 
    title: 'Bold text', 
    inline: 'b' 
    }, { 
    title: 'Red text', 
    inline: 'span', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Red header', 
    block: 'h1', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Example 1', 
    inline: 'span', 
    classes: 'example1' 
    }, { 
    title: 'Example 2', 
    inline: 'span', 
    classes: 'example2' 
    }, { 
    title: 'Table styles' 
    }, { 
    title: 'Table row 1', 
    selector: 'tr', 
    classes: 'tablerow1' 
    }], 

    templates: [{ 
    title: 'Test template 1', 
    content: 'Test 1' 
    }, { 
    title: 'Test template 2', 
    content: 'Test 2' 
    }], 
    content_css: [ 
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
    '//www.tinymce.com/css/codepen.min.css', 
    "dist/css/AdminLTE.min.css", 
    ] 
}); 
</script>

你能告訴我怎樣才能啓用或利用TinyMCE的上傳圖片？

來源

2016-05-07 shibbir ahmed

您需要處理/保存上傳圖像的服務器端腳本。 –

我已經有它 –

您需要在您的服務器上使用PHP，並且您需要'postAcceptor.php'來處理圖片上傳。

來源

2016-05-07 17:18:17

我有代碼 –

代碼的PHP文件然後你需要開始調試該文件，記錄/轉儲請求開始。 POST中會發生什麼？任何錯誤？ –

我會先從瀏覽器的控制檯中查看是否有任何與嘗試調用PHP文件相關的錯誤 - 如果PHP文件未被調用，則該圖像肯定不會被保存。

假設PHP文件實際上是被調用時，我就開始添加調試到PHP文件...

確保其被稱爲
確保$ _ POST變量包含圖像
找出它實際上對發佈的圖像做了什麼。

上TinyMCE的圖像上傳過程中的一些背景...

的基本過程是，TinyMCE的，將爲您使用圖像編輯器修改圖像每一個單獨的HTTP POST。它會根據init中images_upload_url選項的設置將該圖像發送到您選擇的URL（通過HTTP POST）。

images_upload_url（您必須創建）中引用的URL處的圖像處理程序必須執行任何需要將圖像「存儲」到應用程序中的操作。這可能意味着是這樣的：一個文件夾中

存儲項Web服務器
存儲該項目上的數據庫中
存放在資產管理系統

的項目.. 。無論您選擇存儲圖像的位置，您的圖像處理程序需要返回一行JSON，以告知TinyMCE圖像的新位置。由於TinyMCE的文檔中引用這可能看起來像：

{位置：「/uploaded/image/path/image.png」}

TinyMCE的，然後將更新圖像的src屬性來回報您的價值。如果您在init中使用images_upload_base_path setting，那麼它將被預置到返回的位置。 TinyMCE的頁面已對所有的更多細節：

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

這裏淨是當嵌入圖像中的內容存在，但它不可能知道如何處理在該圖像做到這一點TinyMCE的知道應用程序的上下文，以便作業（「圖像處理程序」）是您必須創建的。

來源

2016-05-09 15:30:32

如何使用TinyMCE上傳圖像？

回答

相關問題