TinyMCE 4富文本编辑器详细教程：安装与基础用法

本文档主要介绍了如何在Vue应用中使用`TinyMCE`富文本编辑器的4.x版本。`TinyMCE`是一个功能强大的富文本编辑器，常用于网站和应用程序中的内容编辑。以下是详细的使用步骤： 1. 下载依赖：首先，访问TinyMCE的官方网站 <https://www.tiny.cloud/docs-4x/>，由于文档提到是`tinymce@4`版本，选择适合的定制构建选项，并取消`combinealljsfiles`的选择。这可能意味着您需要手动下载核心库和语言包。 2. 汉化包：下载汉化包，链接为 <https://download.tiny.cloud/tinymce/community/languagepacks/6/zh-Hans.zip>，确保选择中文简体（zh-Hans）包。下载后解压并将汉化文件夹（通常包含`langs`目录）放入TinyMCE的核心包中。 3. 文件引入：将TinyMCE的核心包放置在项目`public`文件夹，便于浏览器访问。同时，在`index.html`中引入编辑器的JavaScript文件（`tinymce.min.js`）以及中文语言文件（`zh-Hans.js`）： ```html <script src="/tinymce/tinymce.min.js"></script> <script src="/tinymce/langs/zh-Hans.js"></script> ``` 4. 在Vue组件中使用：在单文件组件（`.vue`）中，将富文本编辑器集成到模板中。创建一个`textarea`元素并指定ID为`default-editor`，显示默认数据的方式是绑定`value`属性： ```html <textarea id="default-editor"> {{value}} </textarea> ``` 并添加一个点击按钮（`el-button`）来触发事件，获取编辑器中的内容： ```html <el-button @click="handleSubmit">点击获取内容</el-button> ``` 5. Vue组件脚本：在组件的`script`部分，导入Vue的`defineComponent`，定义数据和方法。数据`value`初始化一个包含样式的字符串。`handleSubmit`方法利用`tinymce.activeEditor.getContent()`获取编辑器内容并将其打印到控制台： ```javascript import { defineComponent } from 'vue'; export default defineComponent({ data() { return { value: '<p><em>Hello</em>,<span style="text-decoration:underline;"><strong>World!</strong></span></p>', }; }, methods: { handleSubmit() { console.log(tinymce.activeEditor.getContent()); }, }, mounted() { tinymce.init({ selector: '#default-editor', // 其他配置项... }); }, }); ``` 总结来说，这篇文章详细讲解了如何在Vue项目中使用TinyMCE富文本编辑器，包括下载依赖、引入语言包、在模板中集成编辑器和处理用户交互。通过这些步骤，开发人员可以轻松地在Vue应用中实现自定义内容编辑功能。