有没有办法在 tinymce 中更改图像信息后获得回调？

Question

我想在更改图像中的 ALT 属性后获得回调。上图显示了功能。

1. 包含图像后，我单击图像，然后单击"图像选项"按钮(或"插入/编辑图像"(。

2. 将打开一个窗口。更改数据后，我想要一个回调，以获取新的替代文本，然后保存在数据库中。

我尝试了这些选项，但不起作用。

我的TinyMCE插件是TinyMCE Rails Gem。tinymce工作正常，我只想要一个回调，以便在使用TinyMCE的默认对话框进行更改后获取alt attr。

TinyMCE 设置：

tinyMCE.init({
selector: "textarea.tinymce",
menubar: false,
paste_as_text: true,
resize: true,
height: 500,
language: "pt_BR",
style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"]
});

谢谢！

编辑 1

更改 tinymce 设置(包括file_browser_callback(后，没有任何反应。代码为：

TinyMCE 设置：

tinyMCE.init({
selector: "textarea.tinymce",
menubar: false,
paste_as_text: true,
resize: true,
height: 500,
language: "pt_BR",
style_formats: [{"title":"Título Principal","block":"h1"},{"title":"Título Secundário","block":"h2"},{"title":"Título Terciário","block":"h3"},{"title":"Título Menor","block":"h4"},{"title":"Parágrafo normal","block":"p"}],
plugins: "link,autolink,advlist,paste,lists,textcolor,colorpicker,hr,emoticons,imagetools,wordcount",
toolbar: ["undo redo removeformat | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent hr | link | forecolor backcolor emoticons"],
file_browser_callback: "UpdateImgAlt"
});

获取回调的函数：

function UpdateImgAlt(callback, value, meta){
console.log('callback: '+callback);
console.log('value: '+value);
console.log('meta: '+meta);
}

Answer 1

编辑器不提供与图像插入相关的特定事件。 如果您查看image插件的源代码，它确实会触发一个change事件，以便您可以在发生这种情况时收到通知。 获取该通知的代码如下所示：

tinymce.init({
selector: '#myeditor',
...
setup: function (editor) {
editor.on('change', function (e) {
console.log('change event fired');
console.log(e);
console.log('Content changed to:  ' + editor.getContent());
});
}
});

然后，您可以查看更改的内容中是否有图像，并从那里执行所需的操作。

Answer 2

NodeChange 是您可能正在寻找的事件。这是我正在使用的代码。确保在块的末尾输入返回符以允许javascript继续执行 - 否则，您将无法执行诸如编辑图像之类的操作。

// When an image is inserted into the editor after image upload...
editor.on('NodeChange', function (e) {
if (e.element.tagName === "IMG") { 
// Set an alt attribute. We will insert the value when the image was successfully uploaded and the imageId was returned from the server. We saved the alt tag that we want into the imageId hidden input field (imageId) when the server returned data. Here, we are taking that value and inserting the new alt tag.
e.element.setAttribute("alt", $("#imageId").val());
return; 
}
return;
});