vue使用tinymce实现富文本编辑器

1. 安装两个插件tinymce和  @tinymce/tinymce-vue

 npm install [email protected] @tinymce/[email protected] -S 

注意：

• @tinymce/tinymce-vue 是对tinymce进行vue的包装，主要作用当作vue组件使用
• -S保存到package.json文件 

2. 把node_modules/tinymce下的目录（icons、plugins、skins、themes）拷贝到public/tinymce里面 

 

 3. 汉化tinymce中的语言，下载 langs/zh_CN.js，[语言包下载地址](https://www.tiny.cloud/get-tiny/language-packages/)

 选择

 4.解压，将langs文件也拷贝到public/tinymce

 5.引入tinymce编辑器

import TinymceRich from "@tinymce/tinymce-vue";

6.引入node_modules里的tinymce相关文件文件

import tinymce from "tinymce/tinymce"; 

7.使用TinymceRich组件 

8.引入编辑器插件

import 'tinymce/themes/silver'
import 'tinymce/plugins/advlist' //高级列表
import 'tinymce/plugins/anchor' //锚点
import 'tinymce/plugins/autolink' //自动链接
import 'tinymce/plugins/autosave'//编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/code'//编辑源码
import 'tinymce/plugins/codesample'//代码示例
import 'tinymce/plugins/directionality'//文字方向
import 'tinymce/plugins/fullscreen'全屏插件
import 'tinymce/plugins/hr'//水平分割线
import 'tinymce/plugins/insertdatetime'//插入日期时间
import 'tinymce/plugins/link'//链接插件
import 'tinymce/plugins/lists'列表插件
import 'tinymce/plugins/media' //媒体插件
import 'tinymce/plugins/nonbreaking'//插入不间断空格
import 'tinymce/plugins/noneditable'
import 'tinymce/plugins/pagebreak'//插入分页符
import 'tinymce/plugins/paste' //预览
import 'tinymce/plugins/print'//打印
import 'tinymce/plugins/save' //保存
import 'tinymce/plugins/searchreplace'//查找替换
// import 'tinymce/plugins/spellchecker' //拼写检查，未加入汉化，不建议使用
import 'tinymce/plugins/tabfocus'//切入切出，按tab键切出编辑器，切入页面其他输入框中
import 'tinymce/plugins/template'//内容模板
import 'tinymce/plugins/textpattern'//快速排版
import 'tinymce/plugins/visualblocks' //显示元素范围
import 'tinymce/plugins/visualchars' //显示不可见字符
import 'tinymce/plugins/wordcount'//字数统计
import 'tinymce/plugins/table'//表格插件
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/toc"; //目录生成器

 

9.为RichText组件自定义属性(disabled 禁用状态,plugins 可用插件,toolbar 工具栏, modelValue 用于自定义RichText组件的v-model指令，名字是固定的)

 10.初始化Editor组件,在data()选项中定义，并实现图片上传

let initOption = ref({
    base_url: '/tinymce', // [必要参数] 指定public的目录
    language_url: "/tinymce/langs/zh-Hans.js",//语言类型的路径
    language: 'zh-Hans', // 语言类型（中文），默认会到tinymce/langs/zh_CN.js文件
    skin_url: '/tinymce/skins/ui/oxide', // 皮肤，浅色
    // skin_url: '/tinymce/skins/ui/oxide-dark', // 皮肤，深色
    plugins: props.plugins, // 插件配置
    toolbar: props.toolbar, // 工具栏配置，设置false则为隐藏
    toolbar_mode: 'sliding', // 工具栏移除模式，floating / sliding / scrolling / wrap
    // menubar: 'file edit', // 菜单栏配置，设置为false则隐藏，不配置默认显示全部菜单
    fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
    font_formats: '微软雅黑=Microsoft YaHei, Helvetica Neue, PingFang SC, sans-serif; 苹果苹方=PingFang SC, Microsoft YaHei, sans-serif; 宋体=simsun,serif; 仿宋体=FangSong,serif; Impact=impact,chicago', // 字体
    lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2.2.5 3 4 5', // 行高配置，也可配置成'12px 14px 16px 18px'这种形式
    height: 400, // 注：引入autoresize插件时，此属性无效
    placeholder: '在这里输入文字',
    branding: false, // tiny技术支持信息是否显示
    resize: false, // 编辑器宽高是否可变，false-否，true-高可变，'both'-宽高均可（注意引号）
    // statusbar: false, // 最下方的元素路径和字数统计那一栏是否显示
    elementpath: false, // 元素路径是否显示
    content_style: 'img { max-width: 100%; }', // 自定义可编辑区的css样式
    setup: function (editor: any) {
        editor.ui.registry.addIcon(
            "image",
            ``
        );
        editor.ui.registry.addIcon('preview', '');
    },
    paste_data_images: true, // 图片是否可以粘贴

    images_upload_handler: (blobInfo: any, success: any, failure: any) => {//自定义图片上传 
        // let img = 'data:image/jpeg;base64,' + blobInfo.base64();
        let formData = new FormData();//创建一个表单对象
        formData.append('file', blobInfo.blob());//通过formData对象封装图片二进制数据
        upload(formData).then((res: any) => {//上传的图片路径
            success(res.data.url);//返回图片的回调地址
        }).catch((err: any) => {
            failure(err.response.data.message);
        })
    }
});

11.自定义RichText组件v-mode，定义计算属性contentValue，使用get和set巧妙的完成RichText和Editor两个组件之间的数据联动

let props = defineProps({//自定义属性用于设置默认值
    modelValue: {// 用于自定义v-model的value 父组件向子组件传递的值
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
    plugins: {  //插件
        type: [String, Array],
        default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap nonbreaking anchor insertdatetime advlist lists wordcount autosave'
    },
    toolbar: { //工具栏
        type: [String, Array],
        default: 'fullscreen undo redo restoredraft | table image media charmap hrpagebreak insertdatetime print preview | cut copy paste pastetext | forcolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter  alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | code selectal searchreplace visualblocks indent2em lineheight formatpainter axupimgs'
    }
});


// 计算属性
let contentValue = computed({
    // 富文本框内容
    get() { // 取值 父组件向子组件传值
        return props.modelValue;
    },
    set(value: string) { // 赋值 子组件向父组件传值 ，吧value传递过去，
        emit('update:modelValue', value)
    }
})

 整体代码

效果图：