editor修改样式 vue_vue-html5-editor 富文本的使用

与其庸人自扰，不如看淡点好。

在安装好脚手架的依赖后，要执行 npm install vue-html5-editor -S 来安装这个富文本插件

由于这个富文本插件的图标是依赖font-awesome.css的，所以要npm install font-awesome --save安装这个css然后在main.js中引入这个css import 'font-awesome/css/font-awesome.min.css'

在这里插入图片描述

然后按照文档将其注册

import VueHtml5Editor from 'vue-html5-editor'

// import initRichText from './common/initHTMLEditor.js'

import 'font-awesome/css/font-awesome.min.css'

let opt = {

// 全局组件名称，使用new VueHtml5Editor(options)时该选项无效

name: "vue-html5-editor",

// 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称

showModuleName: true,

// 自定义各个图标的class，默认使用的是font-awesome提供的图标

icons: {

text: "fa fa-pencil",

color: "fa fa-paint-brush",

font: "fa fa-font",

align: "fa fa-align-justify",

list: "fa fa-list",

link: "fa fa-chain",

unlink: "fa fa-chain-broken",

tabulation: "fa fa-table",

image: "fa fa-file-image-o",

hr: "fa fa-minus",

eraser: "fa fa-eraser",

undo: "fa-undo fa",

"full-screen": "fa fa-arrows-alt",

info: "fa fa-info",

},

// 配置图片模块

image: {

// 文件最大体积，单位字节

sizeLimit