有没有办法在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 是您可能正在寻找的事件。这是我正在使用的代码。确保在块的末尾添加一个 return 以允许 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;
});

Answer 3

我最近不得不处理与此类似的问题，并注意到 NodeChange 事件被触发两次，并且每次光标聚焦图像时都会被触发。我发现在查找特定的 mceUpdateImage 命令时使用 ExecCommand 事件处理程序允许我在将图像插入编辑器时仅执行一次代码。进入处理程序后，您可以访问 e.value 对象中的图像数据。该事件发生在图像插入编辑器之后，如果您需要在使用 BeforeExecCommand 事件之前执行某些操作。

setup: function (editor) {
  editor.on('ExecCommand', function (e) {
    if (e.command == "mceUpdateImage") {
      console.log("mceUpdateImage event fired");
      var alt = e.value.alt;
      var src = e.value.src;
    }
    return;
  })
}

这在 TinyMCE 7 中对我有用。