TinyMCE 5: пользовательская кнопка на панели инструментов для прописных букв

Question

Я создаю плагин, чтобы поместить все слова в верхний регистр.

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

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

  callback(items);
},

У меня возникли некоторые проблемы с этим кодом:

• Когда я применяю прописные буквыудаляет текущий стиль из элемента.Например, если я выделю текст жирным шрифтом / курсивом, он удалит стиль и заглавные слова.Мне нужно прописать слово в верхнем регистре, сохраняя все стили.
• Когда я выбираю несколько строк, чтобы применить верхний регистр, он также преобразует стили и классы в верхний регистр.Мне нужно сохранить все элементы без изменений и просто прописными буквами слова.

Я что-то упустил в этом коде?

Спасибо

Answer 1

Потеряли ли вы стили, зависит от того, что вы выбрали. editor.insertContent полностью заменит выделение, что может иметь нежелательные побочные эффекты со встроенными стилями.

Возможно, вы захотите перейти ко всем дочерним текстовым узлам в выделении и в верхнем регистре этих . Однако и это нелегко, поскольку ваш выбор может охватывать часть текстового узла (такие сложности - то, с чем insertContent справляется для вас).

Процесс разработки для обеспечения надежного изменения ситуации настолько сложен, что мы решили взять плату за наше решение: https://apps.tiny.cloud/products/case-change/