vue 富文本 Vue-Quill-Editor 的使用教程

资料

方法一

• 基于Vue的Vue-Quill-Editor富文本编辑用法
• vue中使用vue-quill-editor富文本编辑器，自定义toolbar修改工具栏options

方法二 ==(建议使用)==

• vue中安装使用Quill富文本编辑器
• 在vue中Quill富文本编辑器的使用（主题、自定义工具栏、自定义字体选项、图片拖拽上传、图片改变大小）
• quill-editor富文本编辑器组件的运用与修改配置使图片上传到服务器
• vue-quill-editor的增强模块，提供图片上传，复制插入，拖拽插入，支持与其他模块一起使用

其他

• 丰富的文本编辑平tiny

1、下载Vue-Quill-Editor

npm install vue-quill-editor --save

2、下载quill（Vue-Quill-Editor需要依赖）

npm install quill --save

3、代码(1)

4、代码(2)

• 依赖包

"quill": "^1.3.6",
"quill-image-extend-module": "^1.1.2",
"vue-quill-editor": "^3.0.6",

5、组件使用

//-富文本
  the-rich-text(
    v-model="data"
    action="http://api.pay-star.com/admin/images"
    :headers="{ 'company-token': '4P6snTNhfADVykzxYkLAvs' }")

---

修改后的组件(支持自定义设置toolbar-工具栏)

6、代码(3)

7、组件使用(修改后)

//-富文本-HTML
  the-rich-text(
    v-model="data"
    :container="toolbar", // 添加自定义功能。
    action="http://api.pay-star.com/admin/images"
    :headers="{ 'company-token': '4P6snTNhfADVykzxYkLAvs' }")

• 设置文档

 * 富文本vue-quill-editor 组件
 * name wangkai
 *-------------------设置文档----------------
 *---------- 1、toolbar工具栏-模块名----------
 *  background  --------------  背景颜色
 *  bold  --------------------  加粗
 *  color --------------------  颜色
 *  font  --------------------  字体
 *  code  --------------------  内联代码
 *  italic  ------------------  斜体
 *  link  --------------------  链接
 *  size  --------------------  大小
 *  strike  ------------------  删除线
 *  script  ------------------  上标/下标
 *  underline  ---------------  下划线
 *  blockquote  --------------  引用
 *  header  ------------------  标题
 *  indent  ------------------  缩颈
 *  list  --------------------  列表
 *  align  -------------------  文本对齐
 *  direction  ---------------  文本方向
 *  code-block  --------------  代码块
 *  formula  -----------------  公式
 *  image  -------------------  图片
 *  video  -------------------  视频
 *  clean  -------------------  清除字体样式

• 数据结构

toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: [] }, { background: [] }],
    ['link', 'image'],
    ['blockquote', 'code-block'],
    [{ align: [] }],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }],
    // [{ header: 1 }, { header: 2 }],
    // [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ size: ['small', false, 'large', 'huge'] }],
    [{ font: [] }],
    // [{ indent: '-1' }, { indent: '+1' }],
  ],