選擇圖像后如何填充tinyMCE圖像上傳彈出字段

Question

首先提到我被困在tinyMCE版本4.0.20 （對於某些穩定性問題，我無法更新我的項目中的版本）

我已經啟動了 tinyMCE 編輯器和所有必要的插件。 我需要在這里有一個圖像上傳功能（實際上是將圖像嵌入為數據圖像）。 為此，我到目前為止所做的代碼可以在這個jsfiddle 中找到

以下是到目前為止我編寫的file_browser_callback 。

function (field_name, url, type, window) {
   var input = document.createElement('input');
   input.setAttribute('type', 'file');
   input.setAttribute('accept', 'image/*');

   input.onchange = function () {
        var file = this.files[0];
        var reader = new FileReader();

        reader.onload = function () {
        var base64 = reader.result;

        var image = new Image();
        image.src = base64;
        image.alt = file.name;

        image.onload = function () {
          /*
           * just to work around I tried below to populate the fields.
           * but for putting dimesions, I dont know how to do that. I
           * think there should be some function or something in tinyMCE
           * for that purpose
           */
               window.document.getElementById(field_name).value = image.src;
               $('input.mce-last', window.document).val(image.alt);
          }

        };

        reader.readAsDataURL(file);
  };

  input.click();
}

我想用圖像元數據中的圖像標題、描述和尺寸填充彈出字段。 你會注意到在尺寸字段旁邊有一個復選框包含比例應該用於保持來自tinyMCE 的比例

我認為下面的圖片可以幫助您理解。

任何幫助，將不勝感激。

Answer 1

好的，又浪費了一天之后，我在tinyMCE 論壇中找到了解決方案。 實際上我需要做的是觸發url 字段的更改，這將自動填充它的width/height 。

var fieldElement = window.document.getElementById(field_name);

fieldElement.value = image.src;
fieldElement.dispatchEvent(new Event('change'));

正如我之前提到的，我被困在較舊版本的tinyMCE 中，此解決方法適用於 4.2 及更早版本。 對於更高版本， tinyMCE提供了更好的方法。 您將在這里找到合適的文檔有關的變化在這里