1.安装依赖包,建议tinymce包安装5.3版本。
npm install @tinymce/tinymce-vue@3.2.2 tinymce@5.3.1 -S
2.(1)在public新建tinymce,将modules下tinymce的skins文件复制到public/tinymce文件夹下。
(2)因为tinymce是引文版的,所以还得引入中文语言包。中文语言包下载地址:zh_CN.js,放到public/tinymce下,和skins同级。
(3)富文本中表情包功能需要用到这个文件,将modules/tinymce/plugins/emoticons/js/emojis.js文件也复制到public/tinymce中,和skins同级。
3.引入包文件及主题文件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/icons/default/icons'
// 引入富文本编辑器主题的js和css
import 'tinymce/themes/silver/theme'
import 'tinymce/skins/ui/oxide/skin.min.css'
4.引入富文本编辑时需要的插件,这些插件不一定都需要,都是可灵活配置的。
//扩展插件
//插入图片
import 'tinymce/plugins/image'
//链接
import 'tinymce/plugins/link';
//文字格式
import 'tinymce/plugins/code';
//表格插入
import 'tinymce/plugins/table';
//高级列表插件
import 'tinymce/plugins/lists';
//表情插件
import 'tinymce/plugins/emoticons'
// 字数统计插件
import 'tinymce/plugins/wordcount';
// 插入视频插件
import 'tinymce/plugins/media';
// 模板插件
import 'tinymce/plugins/template';
//粘贴
import 'tinymce/plugins/paste';
//预览
import 'tinymce/plugins/preview';
//上下文菜单
import 'tinymce/plugins/contextmenu';
//文字颜色
import 'tinymce/plugins/textcolor';
//全屏
import 'tinymce/plugins/fullscreen';
//查找替换
import 'tinymce/plugins/searchreplace';
4.使用
注意:很多人在这一步都会发现如下图所示的报错信息
这个是因为你在引入配置路径时路径不对,特别是中文语言包引入的时候,我看到的有的博主说要加上publicPath,其实不加是可以的,要加的话先在vue.config.js里面配置公用路径。
<template>
<Editor :id="tinymceId" v-model="tinymceHtml" :init="init"></Editor>
</template>
</script>
export default {
name: 'tinymce-comp',
components: {Editor},
props:{
tinymceId:{
type:String,
default:'tinymceId'
},//使用不同id,防止缓存
height:{
type:Number,
default:400,
},
plugins:{
type:String,
default:'link lists image code table emoticons wordcount media fullscreen preview paste contextmenu textcolor fullscreen searchreplace',
},
toolbar:{
type:String,
default:'fontselect | bold italic underline strikethrough | link unlink image emoticons | undo redo | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | code | searchreplace removeformat fullscreen'
},
previewWidth:{
type:Number,
default:400
},
previewHeight:{
type:Number,
default:750
}
},
data() {
return {
tinymceHtml: '',
init: {
placeholder:'请输入',
//注意这个地址,千万不要写错了,这个地址对应你存放zh_CN.js的位置
language_url: "/tinymce/zh_CN.js",
language: "zh_CN",
//皮肤主题:这个地址我看博主写的是引用到了skin.css这一级,但是写上去之后发现会报错
skin_url: "/tinymce/skins/ui/oxide",
//编辑区的css文件地址
content_css: "/tinymce/skins/content/default/content.css",
//富文本高度
height: this.height,
//编辑区css样式
content_style: '* { padding:0; margin:0; } img {max-width:100% !important }',
// 预览宽度
plugin_preview_width: this.previewWidth,
plugin_preview_height: this.previewHeight,
lineheight_val: "1 1.1 1.2 1.3 1.35 1.4 1.5 1.55 1.6 1.75 1.8 1.9 1.95 2 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3 3.1 3.2 3.3 3.4 4 5",
//字体
fontsize_formats: "8pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 17pt 18pt 24pt 36pt",
font_formats:"微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
//插件
plugins: this.plugins,
powerpaste_word_import: 'merge',
toolbar: this.toolbar,
paste_data_images: true,
// 底部的状态栏
statusbar: true,
// 最上方的菜单
menubar: true,
// 水印“Powered by TinyMCE”
branding: false,
//默认表情列表文件地址
emoticons_database_url:'/tinymce/emojis.js',
}
}
},
mounted() {
tinymce.init({});
},
}
</script>
其他详细配置可见官方文档:TinyMCE文档