vue--富文本插件Quill(一)基础使用

简介

Quill是一个很流行的富文本编辑器，github上star大约21k：
github：https://github.com/quilljs/quill/

官网： https://quilljs.com/

简单demo

<!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.6/quill.snow.css" rel="stylesheet">
</head>
<body><div id="editor"><p>Hello World!</p><p>Some initial <strong>bold</strong> text</p><p><br></p></div><!-- Include the Quill library --><script src="https://cdn.quilljs.com/1.3.6/quill.js"></script><!-- Initialize Quill editor --><script>var quill = new Quill('#editor', {theme: 'snow'});</script>
</body>
</html>

vue组件使用

安装

npm install quill@1.3.6

简单demo

<template><div><div id="editor"><p>Hello World!</p><p>啊嘞 <strong>加粗</strong> 文字</p><p><br></p></div></div>
</template><script>
import Quill from 'quill'
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {name: "QuillEditor",mounted () {this.initQuill()},beforeDestroy () {this.quill = nulldelete this.quill},methods: {initQuill () {const quill = new Quill('#editor', {theme: 'snow'})this.quill = quill},}
}
</script>

Quill实例需要两个参数，container（区域）与options（工具栏）
container可以是css选择器，也可以是DOM对象：

 const editor = new Quill('#editor')或者const container = document.getElementById('editor');const editor = new Quill(container);

Options:包括theme、formats、modules等

const options = {debug: 'info', // 去除默认栏下的空显示modules: {toolbar: '#toolbar'},placeholder: 'Compose an epic...',readOnly: true,theme: 'snow'
};
const editor = new Quill('#editor', options);

获取与显示编辑内容
富文本编辑器的主要作用是编辑文本、保存、显示等。
获取编辑完成的内容：

const html = document.querySelector('#editor').children[0].innerHTML
console.log(html)

获取内容后置于编辑器中显示：

const html = document.querySelector('#editor').children[0].innerHTML
this.quill.pasteHTML('<h3>哇哈哈哈</h3>' + html)

显示：

Toolbar定制栏格式区

const toolbarOptions = ['bold', 'italic', 'underline', 'strike'];const quill = new Quill('#editor', {modules: {toolbar: toolbarOptions}});

效果：

更多：

const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],        // toggled buttons['blockquote', 'code-block'],[{ 'header': 1 }, { 'header': 2 }],               // custom button values[{ 'list': 'ordered'}, { 'list': 'bullet' }],[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent[{ 'direction': 'rtl' }],                         // text direction[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown[{ 'header': [1, 2, 3, 4, 5, 6, false] }],[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme[{ 'font': [] }],[{ 'align': [] }],['clean']                                         // remove formatting button
];const quill = new Quill('#editor', {modules: {toolbar: toolbarOptions},theme: 'snow'
});

效果：

同一组会置于同一中。

也可以使用css选择器，最全的toolbar:

<template>
<div><div id="toolbar"><span class="ql-formats"><select class="ql-font"></select><select class="ql-size"></select></span><span class="ql-formats"><button class="ql-bold"></button><button class="ql-italic"></button><button class="ql-underline"></button><button class="ql-strike"></button></span><span class="ql-formats"><select class="ql-color"></select><select class="ql-background"></select></span><span class="ql-formats"><button class="ql-script" value="sub"></button><button class="ql-script" value="super"></button></span><span class="ql-formats"><button class="ql-header" value="1"></button><button class="ql-header" value="2"></button><button class="ql-blockquote"></button><button class="ql-code-block"></button></span><span class="ql-formats"><button class="ql-list" value="ordered"></button><button class="ql-list" value="bullet"></button><button class="ql-indent" value="-1"></button><button class="ql-indent" value="+1"></button></span><span class="ql-formats"><button class="ql-direction" value="rtl"></button><select class="ql-align"></select></span><span class="ql-formats"><button class="ql-link"></button><button class="ql-image"></button><button class="ql-video"></button><button class="ql-formula"></button></span><span class="ql-formats"><button class="ql-clean"></button></span></div><div id="editor"></div>
</div>
</template>

<script>
import Quill from 'quill'
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {name: "QuillEditor",mounted () {this.initQuill()},beforeDestroy () {this.quill = nulldelete this.quill},methods: {initQuill () {const quill = new Quill('#editor', {modules: {toolbar: '#toolbar'},theme: 'snow'});this.quill = quill},}
}
</script>

效果：这里的图片上传是以base64格式上传的

toolbar里的control与Quill的format是对应的，可以用来添加或者移除format
formats
我们可以添加定制的handler来改变默认行为：

const toolbarOptions = {handlers: {// handlers object will be merged with default handlers object'link': function(value) {if (value) {var href = prompt('Enter the URL');this.quill.format('link', href);} else {this.quill.format('link', false);}}}
}const quill = new Quill('#editor', {modules: {toolbar: toolbarOptions}
});// Handlers can also be added post initialization
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', showImageUI);

还可以定制handler来进行图片视频上传。

vue--富文本插件Quill(一)基础使用相关推荐

富文本插件 quill
插件文档 Quill官方中文文档 · 看云引入quill 之后 main.js // 富文本组件 import Editor from "@/components/Editor" ...
vue 富文本编辑器 quill （含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等）
基本使用安装依赖 npm i quill .vue文件 <div ref="editor" :style="finalStyle"></di ...
Vue富文本插件(quill-editor)
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
Vue3 + vue-quill-editor 安装步骤: vue3 安装vue-quill-editor npm install @vueup/vue-quill vue2 安装vue-quill- ...
quill-editor 富文本插件（含全部全部工具栏）
quill-editor 富文本插件使用一.npm 安装 vue-quill-editor 二.在main.js中引入 import VueQuillEditor from 'vue-quill- ...
Flask博客实战 - 集成富文本编辑器Quill
富文本编辑器Quill 为什么需要集成富文本编辑器? 一个博客最主要的功能是什么,那就是写作,如果不能对我们发布的内容进行排版美化,那么我们所发布的内容又有什么意义? 对于阅读者来说也是非常的不友好和 ...
VUE3 引入富文本插件 CKEditor5
目录 1.插件选型: 2.引入流程: 1.下载 2.全局引入 3.页面使用 3.问题报错解决: 4.关于TinyMce: 1.插件选型: vue3的可选择的富文本插件很多,这次的业务需求只是简单的文字 ...
超易上手的富文本插件wangEditor for vue2
前言我们在项目中经常接触的富文本插件有很多应用方案,我常用的有quill-editor.tiptap.wangEditor.先简单介绍下区别: quill-editor:用的最多的插件,但是已经不在 ...

vue--富文本插件Quill(一)基础使用

简介

简单demo

vue组件使用

vue--富文本插件Quill(一)基础使用相关推荐

最新文章

热门文章