文章目录

tinymce简介一、安装二、使用步骤 1.封装组件2.组件中挂载3.应用富文本总结

前言

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

一、安装Tinymce

npm install tinymce@^5.6.2npm install @tinymce/tinymce-vue@^4.0.1

注意：版本可根据自己项目的情况来进行选择。

二、使用步骤

1.封装组件

代码如下（仅展示部分代码）：

<template><div class="tinymce-box"><Editorid="myedit"v-model="content":init="init"tag-name="div":disabled="disabled"@onClick="onClick"/></div></template><script>// import api from '../api/api.js'import Editor from "@tinymce/tinymce-vue";import tinymce from "tinymce/tinymce"; import "tinymce/themes/silver"; import "tinymce/icons/default"; export default {name: "TEditor",components: {Editor,},props: {modelValue: {type: String,default: "",},disabled: {type: Boolean,default: false,},},emits: {"update:modelValue": null,saveContent: "",},setup(props, context) {const $post =getCurrentInstance()?.appContext.config.globalProperties.$post;const content = ref();const info = reactive({content: "",myedit: 0,});tinymce.init; // 初始化const revert_data = (content) => {context.emit("update:modelValue", content);};// 添加相关的事件，可用的事件参照文档=> /tinymce/tinymce-vue => All available eventsonMounted(() => {// readonly();});return {init,};},};</script>

2.组件中挂载

代码如下（示例）：

import Editor from "@/components/editor.vue";

3.应用富文本

<Editor id="data.id" v-model="data.content" />

总结

Vue中应用富文本编辑器，涉及到多个富文本时需要注意的是动态数据的绑定，建议封装组件来进行使用。tinymce整体而言插件丰富、可扩展性强、页面样式可修改，感兴趣的小伙伴可以自己动手尝试一下~