Как вставить содержимое в редакторе tinymce, используя vue js?

Question

Я хочу вставить содержимое, например <span class="some-class">text</span>, в редактор tinymce, используя кнопку в шаблоне vue js. Как я мог выполнить sh, используя оболочку tinymce- vue? Вот код:

<template>
  <tinymce-editor
    api-key="my-api-key-here"
  />
  <button @click="addContent">button</button>
</template>

import Editor from '@tinymce/tinymce-vue'

export default {
  components: {
    tinymceEditor: Editor
  },
  methods: {
    addContent () {
      tinymce.activeEditor.setContent('<span class="some-class">text</span>');
    }
  }
}

Редактировать:

Я также установил tinymce, используя npm i tinymce --save и добавил импорт import tinymce from 'tinymce/tinymce к коду выше. Теперь я больше не получаю ошибку 'tinymce' is not defined, но редактор тоже не появляется.

Answer 1

В обработчике событий для нажатия кнопки вы можете вызвать метод TinyMCE .setContent() для установки содержимого редактора.

Вот демонстрационная версия: https://codesandbox.io/s/set-content-in-tinymce-in-vue-jzciu

Не забывайте, tinymce-vue не содержит код для самого TinyMCE. Вам нужно будет либо использовать API-ключ (который вы можете получить бесплатно по адресу tiny.cloud ), либо использовать TinyMCE для самостоятельной установки. (Для получения дополнительной информации см. Шаг 6, здесь: https://www.tiny.cloud/docs/integrations/vue/#procedure)

Answer 2

Если вы хотите вставить контент в TinyMCE, вы должны использовать его API для этого:

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setcontent https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

Например:

tinymce.activeEditor.setContent('<span class="some-class">text</span>');
tinymce.activeEditor.insertContent('<span class="some-class">text</span>');