0

最近、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

ノート

ここにコードペンの例があります

編集: tinymce のソース コードを調べたところ、Alloy コンポーネントを使用して独自のフォント ファミリとフォント ウェイト ボタンを作成していることがわかりました。私はただ「シンプル」なものを探しています。

4

1 に答える 1

2

プロジェクトのリポジトリにあなたと同じ要件を持つ問題がすでに存在するため、これを達成する直接的な方法があるかどうかはわかりません。

これは、プロジェクトの貢献者の 1 人からの返信です。

これを許可するボタン (fontselect など) は現在、内部専用 API を使用しているため、現在これを行う方法はありません。他のユーザーが使用できるようにこれを公開したいと考えていますが、そのための作業をまだスケジュールしていないため、これを機能要求としてラベル付けします。

注: 商用のお客様の場合は、GitHub の機能要求よりも注目/優先度が高くなるため、サポート チャネルを通じてこの機能要求をログに記録することをお勧めします。

于 2020-09-10T04:20:05.837 に答える