在Vue中使用el-editor编辑器

Vue

字数统计: 561阅读时长: 2 min

 2023/11/21 

前言

实际项目中，多处使用到富文本编辑器，每次都配置会比较麻烦，故将要用到的功能封装到一起，需要时可直接调用，故发布了el-editor编辑器。

编辑器基于vue-quill-editor和element封装，目前版本仅支持vue2
与其他编辑器相比，本编辑器支持秀米编辑器、135编辑器样式的粘贴复制
注意，当前编辑器仅提供前端代码，编辑器默认不转存秀米图表，若需要开启这一功能，需要向handlePic参数传真值true，然后编写一个后端接口来实现秀米图片的转存，接口名默认为editor/get_xiumi_pic，可通过参数picURL自行修改

方法一：

1	npm install el-editor@1.0.1

方法二：

1	yarn add el-editor@1.0.1

文件地址：https://tangjue.lanzouw.com/iLXdy1fgwbja

在main.js中引入组件：

import Vue from 'vue'
import editor from "el-editor"
import "../node_modules/el-editor/el-editor.css"
Vue.use(editor)

在需要用到的页面直接使用组件：

1	<quill_editor :content="content" ：picURL="editor/get_xiumi_pic"/>

参数详情：

参数名称	参数含义	默认值	该参数是否必填
content	编辑器的内容	null	是
disabled	是否禁用编辑器	false	否
disabledStyle	设置编辑器被禁用时的样式	{background: "#f5f7fa",color: "#c0c4cc",cursor: "not-allowed",borderRadius: "4px",border: "1px solid #dcdfe6"}	否
editorStyle	设置编辑器的样式	minHeight: '180px',即最小高度180px	否
handlePic	设置是否开启秀米图片转存	false	否
hidetool	是否隐藏所有的工具栏	false	否
options	工具栏配置参数，可通过这一参数自定义定制工具栏	{},为一个空对象	否
picURL	秀米图片转存后端接口路径	默认路径为"editor/get_xiumi_pic"，接口参数为一个名叫urlList的列表	否
placeholder	编辑器提示输入的文字	"请输入内容"	否