如何从 tinymce 5 中的工具栏菜单按钮项更改文本？答案

【问题标题】：How to change the text from a toollbar menubutton item in tinymce 5?如何从 tinymce 5 中的工具栏菜单按钮项更改文本？
【发布时间】：2020-09-07 10:20:31
【问题描述】：

我最近从 tinymce 4 迁移到 tinymce 5，但我不知道如何创建像按钮这样的下拉菜单并根据当前选择更改其文本。

基本上，我想要一些类似默认字体或标题按钮的东西。

下面是我创建一个下拉按钮的方法，该按钮将使用<span lang='xx' 标签包裹选定的文本。

addLanguageBtn()
{
    let lngBtn = editor.ui.registry.addMenuButton('languageBtn', {
      text: 'Language',

      fetch: (callback) => {
        let items: any = [
          {text: 'French', value: 'fr', type: 'menuitem'},
          {text: 'German', value: 'de', type: 'menuitem'},
          {text: 'Spanish', value: 'es', type: 'menuitem'},
        ];
        
        items.forEach(item => {

          item.onAction = () => {

            let currentNode = editor.selection.getNode();

            if (currentNode.tagName.toLocaleLowerCase() !== 'body')
            {
              currentNode.setAttribute('lang', item.value);
            }
            else
            {
              let textToWrap = editor.selection.getContent();
              let wrappedContent = `<span lang='${item.value}'>${textToWrap}</span>`;
              editor.selection.setContent(wrappedContent);
            }
          }

        });

        callback(items);

      },

在tinymce 的主要setup 方法中，每当光标放在<span lang='xx' 标记内的单词上时，我想将该按钮的文本更改为所选语言

  setup(ed)
  {
      
    let lngButton = this.addLanguageBtn(ed);


    ed.on('NodeChange', function (ev) {
      if (!lngButton)//No button
      {
        return;
      }
      let lang = ev.element.getAttribute('lang');
      lngButton.text = lang; // <==== This does not work, value is modified but UI is not updated

注意

这是codepen example

编辑：我查看了 tinymce 的源代码，据我所知，他们使用 Alloy 组件创建自己的字体系列和字体粗细按钮。我只是在寻找“简单”的东西。

【问题讨论】：

标签： javascript typescript tinymce tinymce-5

【解决方案1】：

不确定是否有任何直接的方法可以实现这一点，因为在项目的存储库中已经存在与您具有相同要求的 issue。

这是该项目的一位贡献者的回复：

抱歉，目前无法做到这一点，因为按钮允许这个（例如 fontselect）当前使用仅限内部的 API。我们的确是想公开这个供其他人使用，但我们还没有安排工作来做这件事，所以我要把它标记为一个特性请求。

注意：如果您是商业客户，我建议您记录此内容通过我们的支持渠道提出功能请求，因为它会收到更多关注/优先于 GitHub 功能请求。

【讨论】：