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

Question

我最近从 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组件来创建自己的字体系列和字体粗细按钮.我只是在找东西 'simple'.

Answer 1

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

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

There's no way to currently do this sorry, as the buttons that do allow this (eg fontselect) currently use an internal only API. We do want to expose this for others to use, however we haven't yet scheduled the work to do that, so I'm going to label this as a feature request.

Note: If you're a commercial customer I'd recommend logging this feature request via our support channels, as it'll receive more attention/priority than GitHub feature requests.

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

How to change the text from a toollbar menubutton item in tinymce 5?

javascript

typescript

tinymce

tinymce-5