tinymce6 结合vue3实现功能强大的富文本

现在是2025年，时光荏苒，前端从jquery，到vue2,再到vue3，一眨眼很多以前用的富文本编辑器已经跟不上前端的发展，有的停更，有的还留在jquery时代；
网上搜富文本编辑器有很多，但是真正能用的其实就几款；
ueditor功能强大，但是百度早早已经放弃更新，目前还是用js原生写法

wangeditor功能简洁实用，目前也已停止更新

kindeditor也是停留在较老的版本

其他富文本不是功能简单，就是更新慢

目前市场上主流的更新快，功能强大的就2款富文本编辑器，ckeditor和tinymce
ckeditor使用较为复杂；
网上tinymce的使用说明版本都比较老，且坑也有很多;

我使用的是tinymce6版本，经过2天摸索，终于把坑都踩完
下面我就介绍一下tinymce6的使用

首先安装

npm tinymce/tinymce-vue

去官网申请apikey
https://www.tiny.cloud/my-account/integrate/#vue

然后组件代码

<template>
    <div class="border border-br flex flex-col" :style="styles">
        <Editor id="tinydemo" licenseKey='gpl' api-key="去官网申请的apikey"
            v-model="valueHtml" :tinymceScriptSrc="tinymceScriptSrcUrl" :init="TinyMCEInitConfig">
        </Editor>
    </div>
</template>

配置代码

import configs from '@/config'
const tinymceScriptSrcUrl = `${configs.baseUrl}tinymce/tinymce.min.js`
// const tinymceScriptSrcUrl = 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/8.0.1/tinymce.min.js'

const TinyMCEInitConfig = computed(() => {
    return {
        // api_key: '去官网申请的apikey',
        // 去除tinyMCE的logo
        branding: false,
        // 去除右上角的按钮
        promotion: false,
        language: 'zh_CN',
        toolbar_mode: 'wrap',
        language_url: `${configs.baseUrl}tinymce/langs/zh_CN.js`,
        height: props.height,
        menubar: true,
        // 一些插件
        plugins: 'advlist preview importcss searchreplace autolink directionality visualblocks visualchars fullscreen image link codesample table charmap pagebreak nonbreaking anchor insertdatetime lists wordcount help charmap quickbars emoticons',
        toolbar: [
            'undo redo bold italic underline strikethrough  pagebreak charmap emoticons fullscreen preview save print insertfile image template link anchor codesample ltr rtl ',
            'pastetext alignleft aligncenter alignright alignjustify outdent indent numlist bullist forecolor backcolor removeformat hr insertdatetime searchreplace ',
            'fontselect fontsizeselect formatselect'
        ],
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif;黑体=simhei,sans-serif;Arial=arial,helvetica,sans-serif;',
        font_size_formats: '12px 14px 16px 18px 20px 24px 28px 32px',
        images_file_types: 'jpg,svg,png,gif',
        images_upload_handler: async (blobInfo: any, progress: any) => {
            // const img = 'data:image/jpeg;base64,' + blobInfo.base64()

            const formData = new FormData()
            formData.append('file', blobInfo.blob())
            const res = await apiUploadImage(formData)
            return res.uri
        }
    };
});

tinymce可以使用线上的CDN
CDN地址 https://cdnjs.cloudflare.com/ajax/libs/tinymce/8.0.1/tinymce.min.js
也可以用本地包
本地包下载地址
https://www.tiny.cloud/get-tiny/

下载后放到项目文件夹下面的public文件夹下
例如：