这是我参与「第四届青训营」笔记创作活动的的第1天
前言
在本次的大项目中使用到了tinymce编辑器组件作为项目编辑器。但是在使用上遇到了诸多坑，特此在此处编写使用方法，让大家少走些弯路
介绍
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。跟word很类似，基本的功能需求都能满足。输出的格式直接以html样式的形式输出，可以直接展示在前端html页面上。 TinyMCE的优势：
- 开源可商用，基于LGPL2.1
- 插件丰富，自带插件基本涵盖日常所需功能
- 接口丰富，可扩展性强，有能力可以无限拓展功能
- 界面好看，符合现代审美
- 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
- 对标准支持优秀（自v5开始）
- 多语言支持，官网可下载几十种语言。
安装
首先先用npm进行安装。在vue中使用tinymce需要安装一下两个包：
npm install @tinymce/tinymce-vue
npm install tinymce
安装完毕以后，在vue页面中直接引用两个组件就可以了。
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
在使用之前，还需要下载中文语言包www.tiny.cloud/get-tiny/la… 之后，在public目录下新建文件夹static/tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的static/tinymce文件夹内，如下图所示
使用
首先在使用之前最好将编辑器组件单独写成一个compoents，以便以后代码复用。 新建一个tinymce.vue文件
<template>
<div>
<div class="tinymce-editor" style="position: relative">
<editor
v-model="myValue"
:init="init"
@onKeyUp="onImgQuery"
@onPaste="onImgQuery"
@onClick="onClick"
>
</editor>
</div>
</div>
</template>
<script>
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import axios from "axios"
import "tinymce/themes/silver/theme";
import "tinymce/models/dom";
import "tinymce/icons/default";
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
// import 'tinymce/plugins/fullpage' //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
// import 'tinymce/plugins/hr' //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
// import 'tinymce/plugins/paste' //粘贴插件
import "tinymce/plugins/preview"; //预览
// import 'tinymce/plugins/print'//打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
// import 'tinymce/plugins/spellchecker' //拼写检查，暂未加入汉化，不建议使用
// import 'tinymce/plugins/tabfocus' //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
export default {
components: {
Editor,
},
props: {
value: {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: true,
},
plugins: {
type: [String, Array],
default:
" preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
},
},
data() {
return {
//初始化配置
init: {
language_url:
"/tinymce/langs/zh-Hans.js" /*vue3.x 的路径/tinymce/langs/zh_CN.js ，vue2.x的路径/static/tinymce/langs/zh_CN.js*/,
language: "zh-Hans",
skin_url: "/tinymce/skins/ui/oxide",
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;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式
lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //行高配置，也可配置成"12px 14px 16px 20px"这种形式
plugins: this.plugins,
branding: false,
toolbar: false,
menubar: false,
inline: true
},
myValue:'',
};
},
mounted() {
tinymce.init({});
},
};
</script>
这个配置包括了基本上tinymce上的所有免费可用的功能。如果需要删去某些功能只需要删除import的那个功能和在plugins数组中的功能，如要新增也是同理，import相关插件然后再plugin数组中添加就可以了。 效果如下图：
常见bug以及解决方法
- 无法使用某个功能，并且F12控制台报如下错误
解决方法：应该是该功能未安装到node_module之中。正确去官网安装即可。或者也可以暂时将该组件注释，可以正常使用其他功能
