富文本编辑器

富文本编辑器是前端的核心功能，基本上大部分的管理系统都是有需要的

常见优秀的富文本编辑器

1. TinyMCE - 富文本编辑器里的 Word ，功能想不到的丰富
2. tiptap - 多人在线实时协同编辑
3. CKEditor 5 - 开源免费可商用，行内编辑
4. Quill - 易扩展、轻量级二开、代码高亮好用
5. Froala - 插件丰富，UI友好，编辑器里的苹果
6. summernote - 恰到好处的轻，可直接粘贴图片
7. Trumbowyg - 超轻量，体积小巧，仅 8KB

经过慎重的比较与选择，我们最终在项目中选择使用 TinyMCE

TinyMCE 是富文本编辑器领域的头部玩家之一，主流富文本编辑器，功能非常全，你需要的大多数功能它都支持。排出复杂又美观文章样式，代码高亮等都是基础功能。它甚至有点像在线版的 Word，可以在顶部的各种菜单中找到你要的功能

参考文档

官网：https://www.tiny.cloud

下载与安装

npm install tinymce@6.2.0 --save
npm install @tinymce/tinymce-vue@5.0.0 --save
// 特别说明，因为版本不同使用方式差异性较大，本课程所用版本
"@tinymce/tinymce-vue": "^5.0.0",
"tinymce": "^6.2.0",

语言包

TinyMCE 默认是英文的，如果我们希望是中文，需要自己下载语言包

语言包下载地址：https://www.tiny.cloud/get-tiny/language-packages/

配置

1. 在项目根目录下的public目录下创建文件夹tinymce
2. 将下载好的语言包放入到tinymce目录下: /tinymce/langs/zh-Hans.js
3. 复制node_modules下的tinymce文件夹下的skins放入到tinymce目录下：/tinymce/skins

独立组件

xxxxxxxxxx
<template>
    <editor v-model="textContent" :init="init"></editor>
</template>
<script setup>
import tinymce from 'tinymce/tinymce' //tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme' // 主题文件
import 'tinymce/icons/default'
import 'tinymce/models/dom' // Bug修复
// tinymce插件可按自己的需要进行导入
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // 插入上传图片插件
import "tinymce/plugins/importcss"; //图片工具
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/lists' // 列表插件
import "tinymce/plugins/charmap"; // 特殊字符
import 'tinymce/plugins/wordcount' // 字数统计插件
import "tinymce/plugins/codesample"; // 插入代码
import "tinymce/plugins/code"; // 查看源码
import "tinymce/plugins/fullscreen"; //全屏
import 'tinymce/plugins/link' //
import 'tinymce/plugins/preview' // 预览
import "tinymce/plugins/template"; //插入模板
import 'tinymce/plugins/save' // 保存
import "tinymce/plugins/searchreplace"; //查询替换
import "tinymce/plugins/pagebreak"; //分页
import "tinymce/plugins/insertdatetime"; //时间插入
import { reactive, ref,watch,onMounted } from "vue"
const emit = defineEmits(["onDataEvent"])
const props = defineProps({
    value: {
        type: String,
        default: ''
    },
    plugins: {
        type: [String, Array],
        default: 'lists image media table wordcount save preview'
    },
    toolbar: {
        type: [String, Array],
        default: 'undo redo |  formatselect | bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | lists image media table | codesample code removeformat save preview'
        // default: 'formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help'
    }
})
const init = reactive({
    width: 720,
    height: 300,
    language_url: '/tinymce/langs/zh-Hans.js',
    language: 'zh-Hans',
    // 皮肤：这里引入的是public下的资源文件
    skin_url: '/tinymce/skins/ui/oxide',
    // skin_url: 'tinymce/skins/ui/oxide-dark',//黑色系
    plugins: props.plugins,
    toolbar: props.toolbar,
    content_css: '/tinymce/skins/content/default/content.css',
    branding: false,
    // 隐藏菜单栏
    menubar: false,
    // 是否显示底部状态栏
    statusbar: true,
    // convert_urls: false,
    // 初始化完成
    init_instance_callback: (editor) => {
        console.log("初始化完成：", editor)
    },
    // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
    // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
    images_upload_handler: (blobInfo, success, failure) => {
        const img = 'data:image/jpeg;base64,' + blobInfo.base64()
        console.log("图片上传处理：", img)
        success(img)
    }
})
const textContent = ref("")
watch(props.value,(newValue,oldValue) =>{
    textContent.value = newValue
})
watch(textContent,(newValue,oldValue) =>{
    emit("onDataEvent",newValue)
})
onMounted(()=>{
    // 初始化 tinymce
    tinymce.init({})
})
</script>

使用组件

xxxxxxxxxx
<template>
  <Vue3MyEditor @onDataEvent="getDataHandler"/>
</template>
<script setup>
import Vue3MyEditor from "./components/Vue3MyEditor.vue"
const getDataHandler = (data) =>{
  console.log(data);
}
</script>