如何使用vue js在tinymce编辑器中插入内容？

Question

我想在tinymce编辑器中插入像<span class="some-class">text</span>这样的内容，使用vue js模板中的一个按钮。我如何使用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>');
    }
  }
}

编辑：

我还使用npm i tinymce --save安装了tinymce，并将导入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

如果您想在vue中使用tinymce和typscritt来设置您的内容并避免未定义的错误，则需要将tinyMCE导入为

import { getTinymce } from '@tinymce/tinymce-vue/lib/cjs/main/ts/TinyMCE';

然后你可以设置你的内容

 getTinymce().activeEditor.setContent('coucou');

Answer 3

如果您想要将内容插入到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>');