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组件创建自己的字体系列和字体粗细按钮。我只是在寻找“简单”的东西。

Answer 1

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

这是该项目的一名贡献者的答复：

当前无法对此表示抱歉，因为按钮允许此（例如fontselect）当前使用内部唯一的API。我们的确是想要公开给其他人使用，但是我们还没有安排了这项工作，所以我将其标记为功能请求。

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

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

1 个答案: