TinyMCE 5：自定义工具栏按钮，用于大写

Question

我正在创建一个插入所有单词的大写字母。

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

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

  callback(items);
},

我在使用此代码时遇到了一些问题：

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

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

谢谢

Answer 1

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

你可能想往下挖所有子文本节点的选择和大写的 。 但是，这也不容易，因为您的选择可能会涵盖文本节点的一部分（复杂性是insertContent为您处理的事情）。

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