Сначала упомянуть, что я застрял в 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. На самом деле мне нужно было вызвать изменение поля url, и это автоматически заполнит его шириной/высотой.
var fieldElement = window.document.getElementById(field_name);
fieldElement.value = image.src;
fieldElement.dispatchEvent(new Event('change'));
Как я упоминал ранее, я застрял в более старом издании tinyMCE, это обходное решение для версии 4.2 и более ранних версий. Для более поздней версии tinyMCE предлагает лучший подход. Здесь вы найдете правильную документацию об изменениях здесь