TinyMCE 5:大写的自定义工具栏按钮

时间:2019-04-24 11:43:13

标签: javascript ecmascript-6 tinymce

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

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

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

  callback(items);
},

此代码存在一些问题:

  • 当我应用大写字母时,它将从元素中删除当前样式。例如,如果我将文本加粗/斜体,则会删除样式并将单词大写。我需要将保留所有样式的单词大写。
  • 当我选择多行以应用大写字母时,它也会将样式和类也转换为大写字母。我需要保持所有元素完整无缺,而只是大写单词。

我在这段代码中缺少什么吗?

谢谢

1 个答案:

答案 0 :(得分:0)

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

您可能想深入研究所选内容和大写字母 中的所有子文本节点。但是,这也不容易,因为您的选择可能覆盖了文本节点的一部分(insertContent为您处理的事情很复杂)。

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