Vue и выпуск TinyMCE

Question

Я пытаюсь интегрировать редактор TinyMCE в мое приложение Vue. Из консоли инструментов разработчика я могу получить доступ к объекту tinymce и манипулировать им. Например:

tinymce.activeEditor.selection.setContent('I am a replacement')

Приведенный выше код заменит выбранный текст в редакторе TinyMCE. Я хочу работать с объектом tinymce из Vue (в нескольких компонентах), но я не уверен, как получить к нему доступ. Точная ошибка, которую я получаю при вводе кода выше в функцию: ошибка 'tinymce' не определена no-undef .

Любая помощь будет высоко ценится. Спасибо.

Answer 1

Даже не видя никакого кода, трудно точно сказать, почему это происходит. Поможет документирование того, как вы создаете экземпляр TinyMCE.

Исходя из сообщения об ошибке, я бы предположил, что вы используете компонент / оболочку TinyMCE Vue для внедрения TinyMCE в компонент Vue. По умолчанию это фактически не загружает основной редактор TinyMCE до времени выполнения - и в это время он загружает вещи через сервер TinyMCE Cloud.

Ошибка, которую вы видите, это то, что ваш инструмент linting (eslint?) Жалуется, что вы пытаетесь вызвать переменную tinymce, но эта переменная нигде не определена.

Существует несколько способов «исправить» eslint жалоба:

1 - доступ к tinymce через объект глобального окна:

window.tinymce

2 - Оберните ваш код директивой для eslint, чтобы не проверять неопределенные переменные:

/*eslint-disable no-undef*/
...
/*eslint-enable no-undef*/

https://eslint.org/docs/user-guide/configuring#disabling -rules-with-inline-comments

3 - Определите глобальное в вашем .eslintrc файле

{
  "globals": {
    "tinymce": true
  }
}

https://eslint.org/docs/user-guide/configuring#specifying -глобальных