【Vue】vue项目中使用tinymce富文本组件（@tinymce/tinymce-vue）

一、安装

npm install tinymce
npm install @tinymce/tinymce-vue

二、前期准备工作

1、去官网下载语言包；

2、将下载的语言包复制到项目中的assets（存放路径您随意）下；

3、到node_modules中找到tinymce对应的文件夹，将其中的skins文件夹复制到static（存放路径您随意）中；

4、如果需要支持粘贴保留原格式，将powerpaste文件夹复制到static（存放路径您随意）中；

powerpaste文件夹提取链接：https://pan.baidu.com/s/1Y7ziHe0Rgm2n5r1XcVEmNg
提取码: xcbz

三、插件使用&配置说明

1、基本功能（不需要配置toolbar&plugins）

toolbar	描述
newdocument	创建一个新文档
undo	撤回
redo	恢复
visualaid	网格线
cut	剪切
copy	复制
paste	粘贴
selectall	全选
bold	加粗
italic	斜体
removeformat	清除格式
alignright	右对齐
alignjustify	两边对齐
outdent	减少缩进
indent	增加缩进
forecolor	前景色
backcolor	背景色
fontsizeselect	字号大小
formatselect	标题大小
underline	下划线
strikethrough	删除线
subscript	下标
superscript	上标
superscript	上标
在node_modules/tinymce/plugins目录中查看其他插件	…

2、扩展插件功能

除了以上的基本功能，TinyMCE编辑器还支持插件扩展，tinymce 通过添加插件plugins的方式来添加功能，在添加之前我们需要先来引入相应的插件，引入插件之后我们就可以在init中重新初始化下对应的toolbar（工具栏图标）和plugins（对应的插件组件）属性

toolbar	插件引入(toolbar)	描述
pastetext	import “tinymce/plugins/paste”;	粘贴为纯文本
powerpaste	import “tinymce/plugins/powerpaste”;	复制粘贴保留原格式
preview	import “tinymce/plugins/preview”;	预览
code	import “tinymce/plugins/code”;	编辑源码
image	import “tinymce/plugins/image”;	插入图片
image	import “tinymce/plugins/imagetools”;	编辑图片
-	import “tinymce/plugins/media”;	插入视频
link	import “tinymce/plugins/link”;	超链接
preview	import “tinymce/plugins/preview”;	预览
code	import “tinymce/plugins/template”;	模板
inserttable	import “tinymce/plugins/table”;	插入表格
tableprops	import “tinymce/plugins/table”;	配置并插入表格
deletetable	import “tinymce/plugins/table”;	删除表格
cell	import “tinymce/plugins/table”;	表格单元配置
row	import “tinymce/plugins/table”;	表格行配置
column	import “tinymce/plugins/table”;	表格列配置
-	import “tinymce/plugins/advlist”;	高级列表
bullist	import “tinymce/plugins/lists”;	项目符号
numlist	import “tinymce/plugins/lists”;	编号列表
-	在node_modules/tinymce/plugins目录中查看其他插件	…

<template>
  <div>
    <editor :id="tinymceId" :init="init">
  </div>
</template>
<script>
// 导入富文本
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default"; //富文本样式
// 配置富文本
import "tinymce/plugins/table";
import "tinymce/plugins/image";
import "tinymce/plugins/imagetools";
import "tinymce/plugins/autoresize";
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/paste"; //可复制
import "tinymce/plugins/link";
import "tinymce/themes/silver/theme.min.js"; //引入富文本的主要脚本
import "tinymce/skins/ui/oxide/skin.min.css"; //富文本样式
const toolbar =
  "  undo redo restoredraft | fontselect fontsizeselect styleselect forecolor backcolor bold italic underline strikethrough  anchor link | alignleft aligncenter alignright alignjustify outdent indent lineheight| \
table tablemergecells  image  charmap emoticons hr pagebreak |bullist numlist | blockquote subscript superscript removeformat | \
insertdatetime print preview | fullscreen | bdmap indent2em  formatpainter axupimgs";
const plugins =
  "powerpaste autoresize print paste preview searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools template  codesample table  charmap hr pagebreak nonbreaking anchor link insertdatetime advlist lists wordcount  textpattern help emoticons autosave ";
const fonts = [
  "宋体=宋体",
  "微软雅黑=微软雅黑",
  "新宋体=新宋体",
  "黑体=黑体",
  "楷体=楷体",
  "隶书=隶书",
  "Courier New=courier new,courier",
  "AkrutiKndPadmini=Akpdmi-n",
  "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,zapf dingbats",
];
export default {
  components: { Editor },
  data() {
    return {
      tinymceId:
        "vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""), //富文本编辑器的id,
      init: {
        language_url: require("@/assets/langs/zh_CN.js"), // 语言包的路径，具体路径看自己的项目（前期工作请下载好语言包）
        language: "zh_CN",
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats: fonts.join(";"),//字体
        setup: function (editor) {
          //设置默认字体样式
          editor.on("init", function (e) {
            this.getBody().style.fontFamily = "宋体";
          });
        },
        min_height: 300,//编辑器最小高度
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        //主题样式路径
        skin_url:
         (process.env.API_ROOT == "//xx.woa.com/wxgame"
            ? "//xx.woa.com/wxgame"
            : process.env.API_ROOT == "//xx.woa.com/wxgame-test"
            ?"//xx.woa.com/wxgame-test"
            : "") + "/static/skins/ui/oxide",// 必选 skin路径，具体路径看自己的项目
          //为编辑区指定css文件
          //  content_css:"./static/css/content.css",//一般我们这里都是直接获取路径是没有问题的，但是有坑点，往下看会有解释原因,skin_url,powerpaste同理
          //正确写法，根据自己的环境判断拼接根路径
          // (process.env.API_ROOT == 测试环境路径
          //  ? 测试环境路径
          // : process.env.API_ROOT == 现网环境路径
          //  ? 现网环境路径
          // : "") 
        content_css:
          (process.env.API_ROOT == "//xx.woa.com/wxgame"
            ? "//xx.woa.com/wxgame"
            : process.env.API_ROOT == "//xx.woa.com/wxgame-test"
            ?"//xx.woa.com/wxgame-test"
            : "") + "/static/css/content.css",
        // 添加复制可保留原格式扩展插件开始
        external_plugins: {
        //powerpaste 路径
          powerpaste:
            (process.env.API_ROOT == "//xx.woa.com/wxgame"
            ? "//xx.woa.com/wxgame"
            : process.env.API_ROOT == "//xx.woa.com/wxgame-test"
            ?"//xx.woa.com/wxgame-test"
            : "") + "/static/powerpaste/plugin.min.js",
        },
        powerpaste_word_import: "propmt", // 参数可以是propmt, merge, clear，效果自行切换对比
        powerpaste_html_import: "propmt", // propmt, merge, clear
        powerpaste_allow_local_images: true,
        // 添加复制可保留原格式扩展插件结束
        image_dimensions: true, // 保存图片的时候可以设置大小
        //表格默认样式
        table_default_styles: {
          "line-height": "47px",
          "border-collapse": "collapse",
          width: "100%",
          "border-color": "#EBEEF5",
          "box-sizing": " border-box",
        },
        plugins: plugins,
        toolbar: toolbar,
      },
    };
  },
  mounted() {
    tinymce.init({});
  },
};
</script>

3、踩坑点

• 踩坑点：开发环境测试无问题，等项目打包上线后，发现skin_url、content_css和powerpasteurl不生效；
• 原因：打包后路径不对，自己根据自己的项目环境进行拼接url路径；

四、效果

1、基础功能（即不需配置toolbar、plugins）

2、进阶效果

最后，如果帮到您