vue typescript 使用tinymce5富文本编辑器

1.安装tinymce、tinymce ts声明文件

npm install tinymce -S
npm install @types/tinymce -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录复制到 public/tinymce目录下
同时下载简体中文语言包文件，复制到 public/tinymce目录下

skins文件夹及zh_CN.js的路径在后面封装组件初始化tinymce时init配置中的language_url、skin_url会用到

2.安装tinymce-vue

npm install @tinymce/tinymce-vue -S

3.封装组件

<template>
    <div>
        <editor :id="id" v-model="content" :init="init"></editor>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

import tinymce from 'tinymce';
import Editor from '@tinymce/tinymce-vue';

import 'tinymce/themes/silver/theme';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/media';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/codesample';
import 'tinymce/icons/default/icons';

console.log(tinymce);

@Component({ name: 'TinymceEditer', components: { Editor } })
export default class extends Vue {
    //设置prop id
    @Prop({ default: 'vue-tinymce-' + +new Date() }) id!: string;
	
	//默认高度
    @Prop({ default: 300 }) height!: number;

    @Prop({ default: '' })
    private value!: string;

    private content: string = '';

    @Watch('value')
    private onChangeValue(newVal: string) {
        this.content = newVal;
    }

    @Watch('content')
    private onChangeContent(newVal: string) {
        this.$emit('input', newVal);
    }

    //富文本框init配置
    private get init() {
        return {
            selector: '#' + this.id, //富文本编辑器的id
            language: 'zh_CN', //语言
            language_url: '/tinymce/zh_CN.js', //语言包
            skin_url: '/tinymce/skins/ui/oxide', //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
            menubar: false, //菜单条
            plugins:
                'link lists image code table colorpicker textcolor wordcount contextmenu  media table fullscreen preview pagebreak insertdatetime hr paste codesample emoticons', //插件
            toolbar:
                'bold italic underline strikethrough  | fontselect | fontsizeselect | formatselect  | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table  hr pagebreak codesample | code fullscreen preview', //工具条
            font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun;  微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
            fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
            height: this.height, //高度
            branding: false, //水印
            elementpath: false, //底部元素路径
            paste_data_images: true, //允许粘贴图片
            //初始化前执行
            setup: (editor: any) => {},
            //实例化执行
            init_instance_callback: (editor: any) => {
                this.content && editor.setContent(this.content);

                //this.hasInit = true
                editor.on('NodeChange Change KeyUp SetContent', () => {
                    //this.hasChange = true
                    this.content = editor.getContent();
                });
            },

            //视频设置回调
            video_template_callback: (data: any) => {
                return `<video width="
                    ${data.width} " height="${data.height}"
                    ${data.poster ? 'poster="' + data.poster + '"' : ''}
                    controls="controls">
                    <source src="${data.source}"/>
                </video>`;
            },

            //粘贴图片回调
            images_upload_handler: (blobInfo: any, success: Function, failure: Function) => {
                this.handleImgUpload(blobInfo, success, failure);
            },
        };
    }

    private mounted() {
        this.content = this.value;
    }

    //上传图片
    private handleImgUpload(blobInfo: any, success: Function, failure: Function) {
        this.$emit('upload', blobInfo, success, failure);
    }
}
</script>

<style lang="scss">
.tox-tinymce-aux {
    z-index: 3000 !important;
}
</style>

配置项文档：https://www.tiny.cloud/docs/configure/
插件文档：https://www.tiny.cloud/docs/plugins/
官方示例：https://www.tiny.cloud/docs/demo/full-featured/
中文文档：http://tinymce.ax-z.cn/

4.组件使用

<template>
   <tinymce v-model="content" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Tinymce from '@/components/tinymce/tinymce.vue';

@Component({
    components: {
        Tinymce,
    },
})
export default class extends Vue {
    private content: string = '';
}
</script>

<style lang="scss" scoped></style>

5.效果图

插件列表

名称	功能
advlist	高级列表
anchor	锚点插件
autolink	自动链接
autoresize	编辑器自适应
autosave	自动存稿
bbcode	特定格式简写输出，如加粗：[b]...[b]
charmap	特殊字符
code	编辑源码
codesample	代码示例
directionality	文字方向
emoticons	表情插件
fullpage	文档属性
fullscreen	全屏
help	帮助
hr	水平分割线
image	插入编辑图片
imagetools	图片编辑工具
importcss	引入css
insertdatetime	插入日期时间
legacyoutput	输出HTML4
link	超链接
lists	列表插件
media	插入编辑媒体
nonbreaking	插入不间断空格
noneditable	不可编辑元素
pagebreak	插入分页符
paste	粘贴插件
preview	预览
print	打印
quickbars	快速工具栏
save	保存
searchreplace	查找替换
spellchecker	拼写检查
tabfocus	tab切入切出
table	表格插件
template	内容模板
textcolor	文字颜色
textpattern	快速排版
toc	目录生成器
visualblocks	显示元素范围
visualchars	显示不可见字符
wordcount	字数统计