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, //富文本编辑器的idlanguage: '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 = trueeditor.on('NodeChange Change KeyUp SetContent', () => {//this.hasChange = truethis.content = editor.getContent();});},//视频设置回调video_template_callback: (data: any) => {return ` " height="${data.height}"${data.poster ? 'poster="' + data.poster + '"' : ''}controls="controls">${data.source}"/>`;},//粘贴图片回调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.效果图

插件列表

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！