vue项目中使用 tinymce 富文本（本地依赖版）

Hlu_xx

已于 2022-12-27 15:26:42 修改

阅读量1.9w

点赞数 7

分类专栏： vue.js 文章标签： vue js

于 2021-06-29 15:57:06 首次发布

本文链接：https://blog.csdn.net/qq_42740164/article/details/118336792

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue项目中使用 tinymce 富文本（本地依赖版）

vue项目要用到富文本展示输入表格，vue-quill-editor表格编辑功能在百度上几乎无相关资料可以参考，因此选用tinymce富文本编辑器，其有cdn在线加载资源，以及本地依赖两种实现，此为本地依赖版本。

一、安装依赖

首先安装tinymce依赖包

npm install tinymce --S

再安装tinymce-vue

npm install @tinymce/tinymce-vue -S

二、public下创建文件夹

依赖安装完成后，我们需要在publi目录下新建static/tinymce文件目录，然后在node_modules文件夹下找到tinymce/skins目录，将skins文件夹复制到新建的static/tinymce文件夹内，如下图所示：
public文件夹

三、下载中文语言包

直接到tinymce官网下载中文语言包
官网语言包下载地址：
https://www.tiny.cloud/get-tiny/language-packages/
如下图：
官网下载语言包
下载解压后是一个langs文件夹里面有zh_CN.js文件，将langs文件夹放在我们刚才新建的static/tinymce文件目录下与skins文件夹同级，如下图：
语言包位置

四、编写组件

准备工作完成，下面开始编写组件，在你放组件的地方新建一个组件，这里我将组件建在了components/imcoder-tinymce下，如下图：

在组件中引入tinymce

import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
import 'tinymce/icons/default/icons';

富文本需要在components中注册，否则无法使用

components: {
    Editor
  },

获取props传参

props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    //默认插件 选择你需要的 注释掉的为富文本全部默认插件
    plugins: {
      type: [String, Array],
      default:
        // "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight"
        "link code table lists wordcount "
    },
    //默认工具栏 选择你需要的 注释掉的为富文本全部默认工具
    toolbar: {
      type: [String, Array],
      default:
        "link code table wordcount | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | formatselect | fontselect | fontsizeselect | bullist numlist |"
    // "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \
    // styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    // table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview"
    }
  },

组件template使用富文本

<template>
  <!-- 富文本 -->
  <div>
    <editor v-model="content" :init="init" :disabled="disabled" ></editor>
  </div>
</template>

data中tinymce的init配置

init: {
        language_url: "/static/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/ui/oxide",
        content_css: '/static/tinymce/skins/content/document/content.css',
        height: 800,
        min_height: 800,
        max_height: 800,
        toolbar_mode: "wrap",
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: "p {margin: 5px 0;}",
        fontsize_formats: "12px 14px 16px 18px 24px 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;",
        branding: false,
        contextmenu: "undo redo | cut copy paste pastetext | selectall table", // 富文本右键菜单
      },

配置好init后需要在mounted中初始化

 mounted() {
    tinymce.init({});
  },

watch监听value的变化

 watch: {
    value(newValue) {
      this.content = newValue;
    },
    content(newValue) {
      this.$emit("input", newValue);
    }
  }

引入tinymce的插件，有些功能是需要引入插件才能支持，例如图片上传、表格等，本项目不需要图片上传等功能因此暂未引入，以下为示例，如下所示：

//引用插件
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';
...

tinymce还可以引入第三方插件，网上有两种引入方式，一是把下载的插件直接放到node_modules/tinymce/plugins下，然后直接引用，还有一种是在src/assets下新建/tinymce/plugins目录，把下载的插件解压缩放进去，然后引用进来。因项目不需要所以没做引用，此处不作展示。

最后贴上完整的组件代码如下：

<template>
  <!-- 富文本 -->
  <div >
    <editor v-model="content" :init="init" :disabled="disabled"></editor>
  </div>
</template>


<script>
import tinymce from 'tinymce/tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
import "tinymce/icons/default/icons";
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 "../assets/tinymce/plugins/lineheight/plugin";
// import "../assets/tinymce/plugins/bdmap/plugin";


export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        // "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave bdmap autoresize lineheight"
        "link code table lists wordcount "
    },
    toolbar: {
      type: [String, Array],
      default:
        "link code table wordcount | alignleft aligncenter alignright alignjustify outdent indent formatpainter | formatselect | fontselect | fontsizeselect | bullist numlist |"
    // "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent lineheight formatpainter | \
    // styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    // table image media charmap hr pagebreak insertdatetime | bdmap fullscreen preview"
    }
  },
  data() {
    return {
      //初始化配置
      init: {
        language_url: "/static/tinymce/langs/zh_CN.js",
        language: "zh_CN",
        skin_url: "/static/tinymce/skins/ui/oxide",
        content_css: '/static/tinymce/skins/content/document/content.css',
        height: 780,
        min_height: 780,
        max_height: 780,
        object_resizing: false, //禁用表格内联样式拖拽拉伸
        table_resize_bars:false,//禁用表格单元格拖拽拉伸
        toolbar_mode: "wrap",
        plugins: this.plugins,
        toolbar: this.toolbar,
        content_style: "p {margin: 5px 0;}",//内容样式
        fontsize_formats: "12px 14px 16px 18px 24px 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;",
        branding: false,//不显示富文本支持方
        contextmenu: "undo redo | cut copy paste pastetext | selectall table", // 富文本右键菜单
      },
      content: this.value
    };
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
    
  },
  watch: {
    value(newValue) {
      this.content = newValue;
    },
    content(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>
<style scoped lang="scss">
</style>

五、在父组件中引用富文本组件

首先引入Eidtor

import Editor from "@/components/imcoder-tinymce";

注册Editor

components: {
    Editor,
  },

使用Eidtor

<editor 
    v-model="form.formDailyTypeWorkToday"
></editor>

六、富文本组件中遇到的坑

1、css样式路径问题，组件写好后进入就报了css样式问题，如下图：
css样式路径报错
多方查证后发现需要在init中配置content_css属性就可以解决，如下：

content_css: '/static/tinymce/skins/content/document/content.css',

在这里我还遇到路径正确但是就是报找不到的问题，最后将content_css的路径重新在编辑器里从"/"走一遍路径，然后删除public才可以的。

2、如果在弹窗中使用富文本会出现下拉框无法显示的问题，查证后发现是工具栏的下拉选择时的层级比弹窗的小，所以被弹窗遮挡了。

审查弹窗层级的z-index属性后发现弹窗的z-index为2001，而富文本下拉框的z-index属性为1300，因此将富文本下拉框的z-index设置大于弹窗的z-index就行。

在skins/skins.min.css文件下把class名为tox-tinymce-aux的第一个的z-index属性变大。

七、以下为效果展示图

效果图

八、感谢各方大佬在网上提供的技术支持！

以下为参考大佬传送门：
http://www.imcoder.fun/archives/1591583350241
https://www.cnblogs.com/liangxia/p/13347255.html

Hlu_xx

关注

7
点赞
踩
26

收藏

觉得还不错? 一键收藏
6
评论
vue项目中使用 tinymce 富文本（本地依赖版）

vue项目要用到富文本展示输入表格，vue-quill-editor表格编辑功能在百度上几乎无相关资料可以参考，因此选用tinymce富文本编辑器，其有cdn在线加载资源，以及本地依赖两种实现，此为本地依赖版本。
复制链接

扫一扫