1.0.1 • Published 6 months ago
el-editor v1.0.1
富文本编辑器v1.0.1
介绍
- 编辑器基于vue-quill-editor和element封装，目前版本仅支持vue2
- 与其他编辑器相比，本编辑器支持秀米编辑器、135编辑器样式的粘贴复制
- 注意，当前编辑器仅提供前端代码，需要编写一个后端接口来实现秀米图片的转存，接口名默认为
editor/get_xiumi_pic，可自行修改
安装
下载组件
方法一：
npm install el-editor@1.0.1方法二：
yarn add el-editor@1.0.1下载html文件并放到public目录下
xiumi-ue-dialog-v5.html:文件地址：代码目录中的public/xiumi-ue-dialog-v5.html
135EditorDialogPage.html:文件地址：代码目录中的public/135EditorDialogPage.html
引入富文本编辑器：
在main.js中引入组件：
import Vue from 'vue'
import editor from "el-editor"
import "../node_modules/el-editor/el-editor.css"
Vue.use(editor)在需要用到的页面直接使用组件：
<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 | 编辑器提示输入的文字 | "请输入内容" |
展示编辑器输入的内容
通过v-html可将输入到编辑器中的内容展示出来：
<div v-html="content" class="ql-editor" >{{ content }}</div>