如何使用TinyMCE上傳圖片？

Question

我檢查了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啟用或上傳圖像嗎？

Answer 1

最簡單的方法內（比postAcceptor.php容易） tinymce.init加入后image ，以插件和工具欄添加：

image_advtab: true,
file_picker_callback: function(callback, value, meta) {
  if (meta.filetype == 'image') {
    $('#upload').trigger('click');
    $('#upload').on('change', function() {
      var file = this.files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        callback(e.target.result, {
          alt: ''
        });
      };
      reader.readAsDataURL(file);
    });
  }
},

並添加

<input name="image" type="file" id="upload" class="hidden" onchange="">

tinymce的textarea標簽之后

Answer 2

您需要在服務器上安裝PHP，並在其中需要“ postAcceptor.php”來處理圖像上傳。

Answer 3

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

假設實際上正在調用PHP文件，我將開始在該PHP文件中添加調試到...

• 確保它被調用
• 確保$ _POST變量包含圖像
• 弄清楚發布圖像的實際作用。

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

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

在images_upload_url （必須創建）中引用的URL上的圖像處理程序必須執行將圖像“存儲”在應用程序中所需的所有操作。 那可能意味着：

• 將項目存儲在Web服務器上的文件夾中
• 將項目存儲在數據庫中
• 將項目存儲在資產管理系統中

...無論您選擇將圖像存儲在何處，圖像處理程序都需要返回一行JSON，告訴TinyMCE圖像的新位置。 正如TinyMCE文檔中所引用的那樣，它可能類似於：

{location：'/uploaded/image/path/image.png'}

然后，TinyMCE會將圖像的src屬性更新為您返回的值。 如果您在init中使用images_upload_base_path setting ，則該images_upload_base_path setting將位於返回位置之前。 TinyMCE頁面上具有所有更多詳細信息：

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

最終的結果是，TinyMCE知道內容中何時存在嵌入式圖像，但是在應用程序的上下文中它可能不知道如何處理該圖像，因此必須創建作業（“圖像處理程序”）。