在 tinymce V5 中为选定文本添加自定义类答案

【问题标题】：Add custom class to selected text in tinymce V5在 tinymce V5 中为选定文本添加自定义类
【发布时间】：2020-06-18 10:49:16
【问题描述】：

我正在尝试在 tinymce 中实现一个自定义按钮，当单击该按钮时，会在所选文本周围添加一个类。

我试过了：

editor.ui.registry.addButton('fwnormal', {
    text: 'N',
    class: 'nongras'
});

但它不起作用，我收到错误Could not find valid *strict* value for "onAction"

知道我该怎么做吗？

【问题讨论】：

标签： javascript tinymce tinymce-5

【解决方案1】：

https://www.tiny.cloud/docs/configure/content-formatting/

使用如下代码：

tinymce.init({
  selector: "#mytextarea",
  tinymce options: ... ,

  toolbar: "add_class",

  setup: function(editor) {
    editor.on("init", function(e) {

      tinymce.activeEditor.formatter.register("new_class", {
        selector: "p,div,h1,h2,h3,h4,h5,h6", // choose elements
        classes: "myclass",
        styles: { ... },
        attributes: { ... },
      });  // close formatter.register

    });  // close editor.on init

    editor.ui.registry.addButton("add_class", {
      tooltip: "new class",
      icon: "edit-block", // look editor-icon-identifiers page
      onAction: function() {
        tinymce.activeEditor.formatter.apply("new_class");
      }
    }); // close registry.addButton

  }, // close setup function

}); // close tinymce.init

或者试试这些代码：

tinymce.init({
  selector: "#mytextarea",
  tinymce options: ... ,

  toolbar: "add_class",

  setup: function(editor) {

    editor.ui.registry.addButton("add_class", {
      tooltip: "new class",
      icon: "edit-block", // look editor-icon-identifiers page
      onAction: function() {
        var element = tinymce.activeEditor.selection.getNode();
        tinymce.activeEditor.dom.setAttrib(element, "class", "myclass");
      }
    }); // close registry.addButton

  }, // close setup function

}); // close tinymce.init

【讨论】：

【解决方案2】：

自定义类设置在 style_formats https://www.tiny.cloud/docs/configure/content-formatting/

【讨论】：

感谢您的回答。我试过了（以及他们文档中的每一件事以及我可以在 SO 上找到的所有答案），但无法让它发挥作用。如果你知道怎么做，那么一些代码会很好，或者一个工作的 sn-p。

【解决方案3】：

例子

tinymce.init({
  selector: 'textarea',
  style_formats: [
    {title: 'Class name', selector: 'p', classes: 'myclass'} 
  ]
});

http://fiddle.tinymce.com/Slhaab

【讨论】：

经过测试，这绝对没有任何作用。（为什么需要给出第二个答案？你可以编辑你的第一个答案）