vue项目中使用tinymce富文本的踩坑经历

Posted 2020-12-17 liangxia

在项目开发中，一般在后台管理系统会有编辑需求，那我们就需要使用到富文本这个东西。现在在写vue项目中就需要到富文本编辑器，所以给大家推荐一款富文本编辑器（TinyMCE）

首先，下载编辑器依赖包

npm install tinymce --save
or
yarn add tinymce

　　在需要用到编辑器的地方引入

import tinymce from ‘tinymce/tinymce‘
import Editor from ‘@tinymce/tinymce-vue‘
import ‘tinymce/themes/silver/theme‘
import ‘tinymce/icons/default/icons‘
import ‘tinymce/plugins/image‘
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‘

　　

<template>
  <Editor v-model="dateValue" :init="init" :disabled="disabled" />
</template>

export default {
  name: ‘TinymceEditor‘,
  components: {
    Editor
  },
  props: {
    value: { type: String, required: true }, // 编辑内容
    option: { type: Object, default: undefined }, // 配置参数
    disabled: { type: Boolean, default: false }
  },
  data() {
    return {
      init: {
        menubar: false, // 禁用菜单栏
        branding: false, // 隐藏右下角技术支持
        elementpath: false, // 隐藏底栏的元素路径
        font_formats: ‘微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif‘,
        fontsize_formats: ‘12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px‘,
        language_url: ‘/static/tinymce/langs/zh_CN.js‘,
        language: ‘zh_CN‘,
        skin_url: ‘/static/tinymce/skins‘,
        content_css: ‘/static/tinymce/skins/content/content.css‘,
        plugins: ‘link lists image code table colorpicker textcolor wordcount contextmenu‘,
        // toolbar:
        //     `bold italic underline strikethrough | fontsizeselect | forecolor backcolor |
        //     alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |
        //     undo redo | link unlink image code | removeformat`,
        // toolbar: ‘bold italic underline strikethrough subscript superscript removeformat | fontselect | fontsizeselect | styleselect | forecolor backcolor | table | image |alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |undo redo | ‘,

        // 工具栏1
        toolbar1: ‘bold italic underline strikethrough subscript superscript removeformat | fontselect | fontsizeselect | styleselect | forecolor backcolor | ‘,
        // 工具栏2
        toolbar2: ‘ table | image | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |undo redo‘,
        contextmenu: false, // 禁用富文本的右键菜单，使用浏览器自带的右键菜单
        height: 500,
        ...this.option
      }
    }
  },
  computed: {
    dateValue: {
               return this.value ? this.value : ‘‘
      },
      set(val) {
        this.$emit(‘input‘, val)
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
  }

}

但是当富文本在某一个弹窗上使用时，工具栏会出现下拉选择时的层级比弹窗的小，所以，选项会被弹窗遮挡。

而解决这个问题，需要把工具栏的下拉框的层级提高，找到skins/skins.min.css文件

把class名为tox-tinymce-aux的第一个的z-index属性变大即可