javascript - TinyMCE 5：大写的自定义工具栏按钮

Question

我正在创建一个插件以将所有单词都大写。

const items = [
    {
      type: 'menuitem',
      text: 'uppercase',
      onAction: () => {
        const uppercaseContent = editor.dom
          .decode(editor.selection.getContent())
          .toUpperCase();

        editor.insertContent(uppercaseContent);
      },
    },
  ];

  callback(items);
},

我对这段代码有一些问题：

• 当我应用大写时，它会从元素中删除当前样式。例如，如果我用粗体/斜体放置文本，它会删除样式并将单词大写。我需要将保持所有样式的单词大写。
• 当我选择多行来应用大写时，它也会将样式和类转换为大写。我需要保持所有元素完好无损，并且只将单词大写。

我在这段代码中遗漏了什么吗？

谢谢

标签： javascriptecmascript-6tinymce

Answer 1

您是否丢失样式取决于您选择的内容。editor.insertContent将完全替换选择，内联样式可能会产生不希望的副作用。

您可能想要深入挖掘选择中的所有子文本节点并将那些. 然而，这也不容易，因为您的选择可能涵盖文本节点的一部分（这些复杂性是insertContent您要处理的事情）。

可靠地实现更改案例的开发过程非常复杂，我们决定为我们的解决方案收费： https ://apps.tiny.cloud/products/case-change/