开发者社区> 游客nilbojqjhu5fm> 正文

富文本编辑器Quill 介绍及在Vue中的使用方法

简介: 在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得
+关注继续查看

在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得。


目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单、易上手特点,成为目前富文本编辑器常用选择之一。与其他富文本相比,Quill 提供了大量内置API接口,为用户根据自己需求对富文本编辑扩展性开发,例如用户交互,添加幻灯片、3D模型组件等。


本篇文章将介绍 Quill 的两种使用方式:


1,Quill 在纯 HTML 页面中的使用;

2,Quill 集成在 Vue 组件的使用;

一,Quill 在原生 HTML 页面中引入

Quill 在HTML 中使用较为简单,分为以下三部:


1,把相关库以及样式文件引入;


2,利用<script> 标签对编辑器初始化;


3,在标签页面中创建对应的DOM元素,与初始化的编辑器进行绑定即可;


整体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式文件 -->
  <link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
  <!-- 引入Quill库文件 -->
  <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
</head>
<body>
  <!-- 创建一个编辑器容器 -->
  <div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
  </div>
<!-- 初始化Quill编辑器 -->
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow'
    });
  </script>
</body>
</html>

效果:

image


Quill 的富文本编辑器默认使用的是 snow主题,如果感到单一或功能还没满足自己日常开发需求,可以借助借助 modules.toolbar自定义,如下:

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 字体
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // 样式标题
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // 下标、上标
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // 缩进
  [{ 'direction': 'rtl' }],                         

  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // 格式清除
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});


更改后富文本工具栏效果如下:

image


二,Quill 在 Vue 中作为组件引入

Quill 在 VUE 中使用,目前较为常见的有两种方式:

2.1,借助 Vue-Quill-Editor

2.2 ,借助VueQuill(Vue的版本)

以上两种方式都是将 Quill 以组件方式集成在 Vue 中,本文将对第一种方式做简单介绍

  • 首先需要安装对应包环境:
npm install vue-quill-editor --save

# or
yarn add vue-quill-editor
  • vue-quill-editor 组件进行挂载引入,引入的话有两种方式:

1,用根组件全局挂载:

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // 引入样式
import 'quill/dist/quill.snow.css' // snow theme
import 'quill/dist/quill.bubble.css' // bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

2,在单组件中局部挂载:

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }


quill-editor 引入后, 作为组件注册到项目中即可正常使用;

<template>
  <!-- Two-way Data-Binding -->
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />
</template>

<script>
// You can also register Quill modules in the component
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '<h2>I am Example</h2>',
      editorOption: [
        ['bold', 'italic', 'underline', 'strike'], // 字体
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }], // 样式标题
        // eslint-disable-next-line standard/object-curly-even-spacing
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        // eslint-disable-next-line standard/object-curly-even-spacing
        [{ 'script': 'sub'}, { 'script': 'super' }], // 下标、上标
        // eslint-disable-next-line standard/object-curly-even-spacing
        [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
        [{ 'direction': 'rtl' }],

        [{ 'size': ['small', false, 'large', 'huge'] }], // 字体
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean'] // 格式清除
      ]
    }
  },
  methods: {
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted () {
    console.log('this is current quill instance object', this.editor)
  }
}
</script>

效果如下:

image



需要注意的是,这里组件 quill-editor 中 绑定的 content 传入的是 String ,但在监听过程中变化的是封装了quill, html, text 三个属性的 Object ,这一点在传参时希望大家多注意一下,

 <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />

组件可以通过 onEditorChange 函数来监听文本编辑器用户的输入内容

 <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
    @change="onEditorChange($event)"
  />

<script>
    onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
    }
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27727 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15291 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19980 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14852 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22217 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23523 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
36336 0
78
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载