0.2.1 • Published 2 years ago

@gdyfe/quill-editor v0.2.1

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

gdy-quill-editor

基于Quill的vue编辑器组件 npm@0.1.6

Base

"quill": "2.0.0-dev.4"

Install

// npm
npm install gdy-quill-editor  
// yarn
yarn add gdy-quill-editor 

Start

lerna bootstrap
// if you want run demo
yarn serve:demo

Usage

Global

// gdyEditor = { Quill, gdyEditor, install, Dplayer }
// VUE Global registration
import Vue from 'vue'
import 'gdy-quill-editor/dist/main.css'
import gdyEditor from 'gdy-quill-editor'
Vue.use(gdyEditor)

Local

// VUE Local registration 
import { gdyEditor } from 'gdy-quill-editor'
import 'gdy-quill-editor/dist/main.css'
components: {
  gdyEditor,
},

Options & Events

  • props
props类型是否必填默认值描述
isShowTipsBooleanfalsefalse是否显示title tips(鼠标悬浮弹出的提示框)
isShowCodeBooleanfalsetrue是否显示html代码区(出现在编辑区下方)
optionsObjectfalsefalse编辑器是否能编辑
isShowTipsBooleanfalse{placeholder: '请输入你的内容', ...}quill设置(参考quill文档https://quilljs.com/docs/configuration/#options
globalOptionsObjectfalse{}全局quill设置(优先级大于options,Obj二级直接覆盖,说明见globalOptions)
toolbarOptionsObjectfalse{}菜单栏设置(优先级大于globalOptions)
  • emit
emit参数描述
blurquill实例编辑器失焦
focusquill实例编辑器聚焦
inputquill实例编辑器输入
change{ html, text, quill }编辑器改变
readyquill实例编辑器初始化完成
imgHandle{base64: String, imgFile: File , insert: Function}图片上传(参数:「图片的base64对象,图片的File对象 , 上传成功调用插入方法」
  • inner methods
methods参数描述
addVideoLink{ url: String, id: String, poster: String, height: String,width: String}添加一个自定义视频, 参数:「视频url,视频唯一id,视频封面 ,视频height 默认50 单位px,视频width 默认100 单位px 」
addTextLink{ innerText: String, dataValue: String, href: String}添加一个自定义超链接, 参数:「插入的文字,data-value,链接」
  • globalOptions
// 1. 使用已定义的toolbar
import { fontType, fontColor, other, alltype } from 'gdy-quill-editor/lib/config/toolbar'
import { handlers } from 'gdy-quill-editor/lib/config/handlers'
toolbarOptions = {
  container: alltype,
  handlers,
}
// 2. 你也可以自定义你的toolbar
// 比如:<div id="toolbar">
toolbarOptions = {
  container: '#toolbar',
  handlers,
}
  • titleConfig
titleConfig说明
ql-bold加粗
ql-color颜色
ql-font字体
ql-code插入代码
ql-italic斜体
ql-link添加链接
ql-background背景颜色
ql-size字体大小
ql-strike删除线
ql-script上标/下标
ql-underline下划线
ql-blockquote引用
ql-header标题
ql-indent缩进
ql-list列表
ql-align文本对齐
ql-direction文本方向
ql-code-block代码块
ql-formula公式
ql-image图片
ql-video视频
ql-clean清除字体样式
ql-grammarly-inline插入分割线
ql-shortcode自定义命令
ql-table表格
ql-table-insert-row增加行
ql-table-insert-column增加列
ql-table-delete-row删除行
ql-table-delete-column删除列
ql-lineHeight行高
ql-history-back返回
ql-history-redo撤销返回
ql-emoji表情
ql-dangerously-paste完全复制, 禁用quill所有的黏贴过滤规则, 存在position样式可能会出现不能复制的问题
  • video

// video在编辑视频并不会播放,会以封面图的图片展示  
// 你需要在预览中初始化视频的播放:
// 使用Dplayer初始化
import { Dplayer } from 'gdy-quill-editor'
// 参考 packages/editor-demo/src/components/EditorDemo/index 273-300
const op = HTMLDecode(options[1])
op.container = document.querySelectorAll('#' + op.container)[1]
const myvideo = new Dplayer(op)
myvideo.play()
  • 上传图片
// <gdy-editor @imgHandle="imgHandle"/>
// ...
imgHandle(param) { 
  // 这里使用axios举个🌰
  axios.post(url: 'http://xxx.xxx.xxx',qs.stringify({img: param.base64,})).then(
     () => { 
       /* 200 */ param.insert()
       /* else */ param.insert(param.base64)
     },
     // failed
     () => {
       param.insert(base64)
     }
   )
  },
  • 其他 initEditor中自定义图标和方法
// 1. 现在toolbarOptions中的handlers添加一个自己的方法
handlers['xxx'] = function() {}
// 2. 操作dom给它添加图标和title tip
document.getElementsByClassName(className)[0].innerHTML = `图标`
document.querySelector('.ql-toolbar').querySelector('.ql-xxx').dataset.title = 'xxx'
// 3. 给它定义触发事件
quill.getModule('toolbar').addHandler('xxx', () => {})
// or.你也可以在handlers添加方法 handlers.xxx = function(){},但要注意作用域

// 上传并添加后的图片地址
// 参考 packages/editor-demo/src/components/EditorDemo/index 194-250

Screenshot

avatar