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

Question

我想使用 vue js 模板中的按钮在 tinymce 编辑器中插入像 <span class="some-class">text</span> 这样的内容。我怎样才能使用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

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

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

然后你就可以设置你的内容了

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

Answer 2

在您的按钮点击事件处理程序中，您可以调用 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 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>');