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

一、安装

npm install tinymce
npm install @tinymce/tinymce-vue
1
2

二、前期准备工作

1、去官网下载语言包；

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

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

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

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

三、插件使用&配置说明

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

2、扩展插件功能

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

3、踩坑点

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

四、效果

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

2、进阶效果

最后，如果帮到您