选择图像后如何填充tinyMCE图像上传弹出域

时间:2017-10-31 09:16:38

标签: javascript tinymce tinymce-4 rich-text-editor tinymce-plugins

首先提一下我被困在 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的

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

enter image description here

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:1)

好的,在又浪费了一天之后,我在tinyMCE forum找到了解决方案。我真正需要做的是触发 url字段的更改,这将自动填写 width / height

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

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

正如我之前提到的,我被困在较旧版本的 tinyMCE 中,此解决方法适用于4.2及更早版本。对于以后的版本, tinyMCE 会提供更好的方法。您可以在此处找到有关更改的正确文档here