1

首先要提一下，我卡在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的比例

我认为下图可以帮助您理解。

在此处输入图像描述

任何帮助，将不胜感激。

4

1 回答 1

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提供了更好的方法。您将在此处找到有关更改的正确文档

于 2017-11-01T05:28:22.947 回答