选择图像后如何填充tinyMCE图像上传弹出字段
How to populate tinyMCE image upload popup fields after selecting image
首先要提到的是我卡在 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
保持比例
我觉得下图可以帮助你理解。
如有任何帮助,我们将不胜感激。
好吧,又浪费了一天的时间,我在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
首先要提到的是我卡在 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
保持比例我觉得下图可以帮助你理解。
如有任何帮助,我们将不胜感激。
好吧,又浪费了一天的时间,我在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