富文本编辑器v1.0.1

介绍

• 编辑器基于vue-quill-editor和element封装，目前版本仅支持vue2
• 与其他编辑器相比，本编辑器支持秀米编辑器、135编辑器样式的粘贴复制
• 注意，当前编辑器仅提供前端代码，需要编写一个后端接口来实现秀米图片的转存，接口名默认为editor/get_xiumi_pic，可自行修改

安装

下载组件

方法一：

npm install [email protected]

方法二：

yarn add [email protected]

下载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>