如何使用 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

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

Answer 2

在您的按钮点击事件处理程序中，您可以调用 TinyMCE 的 .setContent() 方法来设置编辑器内容。

这是一个演示： https://codesandbox.io/s/set-content-in-tinymce-in-vue-jzciu

别忘了，tinymce-vue 不包含 TinyMCE 本身的代码。您要么必须使用 API 密钥（您可以在 tiny.cloud) or use a self-hosted installation of TinyMCE. (For more info, see Step 6, here: https://www.tiny.cloud/docs/integrations/vue/#procedure 免费获得）

Answer 3

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

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

然后你可以设置你的内容

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

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

How to insert content inside tinymce editor using vue js?

tinymce

vue.js