tinymce 富文本在vue3

### 集成和配置 TinyMCE 富文本编辑器

#### 安装依赖包
为了在 Vue 3 项目中集成 TinyMCE 编辑器，需先安装 `@tinymce/tinymce-vue` 和 `tinymce` 这两个 npm 包。这可以通过命令行工具完成：

npm install @tinymce/tinymce-vue tinymce --save

#### 创建 TinymceEditor 组件
创建一个新的组件文件用于封装 TinyMCE 的初始化逻辑。

// src/components/TinyMceEditor.vue
<template>
  <editor
    api-key="no-api-key"
    :init="editorConfig"
    v-model="content"
  />
</template>

<script setup>
import { ref, defineProps } from 'vue';
import Editor from '@tinymce/tinymce-vue';

const props = defineProps({
  modelValue: String,
});

const content = ref(props.modelValue);

defineExpose({ content });

const editorConfig = {
  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>

此代码片段定义了一个可重用的 TinyMCE 编辑器组件，并设置了基本配置项[^1]。

#### 在页面中使用组件
接下来，在需要使用的页面或父级组件里引入并注册这个自定义组件。

<!-- ParentComponent.vue -->
<template>
  <div class="container">
    <!-- 使用之前创建好的 TinyMceEditor 组件 -->
    <tiny-mce-editor v-model="form.content"></tiny-mce-editor>
    
    <button type="submit">提交</button>
  </div>
</template>

<script setup>
import TinyMceEditor from './components/TinyMceEditor.vue'; 

const form = reactive({
  content: ''
});
</script>

上述例子展示了如何将 TinyMCE 编辑器嵌入到表单字段内，允许用户输入富文本内容[^3]。

#### 图片上传处理
默认情况下，TinyMCE 不支持本地图片上传功能；如果希望实现该特性，则需要额外编写服务器端接口来接收客户端发送过来的数据流，并返回可供访问的新 URL 地址给前端显示[^2]。