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

#javascript #ecmascript-6 #tinymce

#javascript #ecmascript-6 #tinymce

Вопрос:

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

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

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

  callback(items);
},
  

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

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

Я что-то упускаю в этом коде?

Спасибо

Ответ №1:

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

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

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