tinymce富文本编辑器vue3项目中如何使用

在 Vue3 项目中使用 TinyMCE 富文本编辑器，可以按照以下步骤进行操作：

1. 安装 TinyMCE

npm install tinymce

2. 在 Vue3 中引入 TinyMCE

在 `main.js` 文件中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import tinymce from 'tinymce/tinymce'

// 引入所需的插件和主题
import 'tinymce/themes/silver'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/link'
import 'tinymce/plugins/table'
import 'tinymce/plugins/image'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/code'

// 初始化 TinyMCE
tinymce.init({
  selector: 'textarea', // 选择器
  plugins: ['paste', 'link', 'table', 'image', 'lists', 'code'], // 插件
  toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | link image | code', // 工具栏
  height: 500, // 编辑器高度
  menubar: false // 菜单栏
})

createApp(App).mount('#app')

3. 在 Vue3 组件中使用 TinyMCE

在组件的模板中添加 `textarea` 标签，并为其添加 `v-model` 指令，将其绑定到组件的 data 中的一个属性上。

<template>
  <div>
    <textarea v-model="content"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '' // 绑定的属性
    }
  }
}
</script>

完成上述步骤后，即可在 Vue3 项目中使用 TinyMCE 富文本编辑器。