标签：编辑 内容 提高 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属性变大即可
标签：编辑 内容 提高 eth one input require 需求 第一个
原文地址：https://www.cnblogs.com/liangxia/p/13347255.html
