与其庸人自扰,不如看淡点好。
在安装好脚手架的依赖后,要执行 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