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文件夹下
例如：

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