tinymce vue3

<template>
  <div>
    <editor
      api-key="your-api-key"  <!-- 替换为你的 Tinymce API Key -->
      v-model="content"
      :init="editorInit"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';  // 引入 Tinymce Vue 组件

// 定义编辑器内容的响应式数据
const content = ref('<p>初始内容</p>');

// 配置 Tinymce 初始化参数
const editorInit = {
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  toolbar: 'undo redo | formatselect | bold italic backcolor | \
            alignleft aligncenter alignright alignjustify | \
            bullist numlist outdent indent | removeformat | help'
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. 引入 Tinymce Vue 组件：

   • 使用 @tinymce/tinymce-vue 包来引入 Tinymce 的 Vue 组件。

2. 定义编辑器内容的响应式数据：

   • 使用 Vue 3 的 ref 来创建一个响应式的 content 变量，用于绑定编辑器的内容。

3. 配置 Tinymce 初始化参数：

   • editorInit 对象中包含了 Tinymce 的初始化配置，如高度、插件、工具栏等。
   • api-key 是 Tinymce 的 API 密钥，需要替换为你自己的密钥。

4. 模板部分：

   • 使用 <editor> 标签来渲染 Tinymce 编辑器，并通过 v-model 绑定到 content 变量。
   • :init 绑定初始化配置对象 editorInit。

5. 样式：

   • 样式部分可以根据实际需求进行自定义。