Question

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

在包含图像后，我点击了图像，然后点击了图像选项按钮（或插入/编辑图像）。
将打开一个窗口。更改数据后，我想要一个回调，获取新的替代文本，然后保存在数据库中。

我尝试了these options，但没有效果。

我的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;
});

在改变图像信息后，有一种方法可以获得回调吗？

2 个答案: