码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-07-20 22:28:08      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:编辑   内容   提高   eth   one   input   require   需求   第一个   

在项目开发中,一般在后台管理系统会有编辑需求,那我们就需要使用到富文本这个东西。现在在写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属性变大即可

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

标签:编辑   内容   提高   eth   one   input   require   需求   第一个   

原文地址:https://www.cnblogs.com/liangxia/p/13347255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!