搬砖么，能怎么搬， 为什么不花时间去研究
let BlockEmbed = Quill.import('blots/block/embed');
class CustomImgBlot extends BlockEmbed {
static get ATTRIBUTES() {
// 声明元素属性值
return ['class','data-alt','data-title'];
static create(opt) {
let node = super.create();
node.setAttribute('class', 'customImg');
node.setAttribute('contentEditable', 'false');
if ("object" == typeof opt) {
// 这里可以针对node元素的innerHTML添加自己的HTML
return node;
static value(domNode) {
// 输出Delta内部内容
return domNode.innerHTML;
// 这里针对Delta attributes的输出
static formats(domNode) {
return this.ATTRIBUTES.reduce(function (formats, attribute) {
if (domNode.hasAttribute(attribute)) {
formats[attribute] = domNode.getAttribute(attribute);
return formats;
}, {});
format(name, value) {
if (this.constructor.ATTRIBUTES.indexOf(name) > -1) {
if (value) {
this.domNode.setAttribute(name, value);
} else {
this.domNode.removeAttribute(name);
} else {
super.format(name, value);
CustomImgBlot.blotName = 'customImg';
CustomImgBlot.tagName = 'cimg';
Quill.register(CustomImgBlot);
使用示例 →↓
* 自定义图片控件
function customImgControl() {
let BlockEmbed = Quill.import('blots/block/embed');
class CustomImgBlot extends BlockEmbed {
static create(opt) {
let node = super.create();
node.setAttribute('class', 'customImg');
node.setAttribute('contentEditable', 'false');
if ("object" == typeof opt) {
var name = opt.src.substr(opt.src.lastIndexOf('/') + 1);
if (opt.address && opt.address.length > 0) {
node.innerHTML = "<div class=\"element_to_delete\" onclick=\"removeImage(this);\"></div><div onclick=\"imgClick(this);\" class=\"img-content\"><img id=\"" + name + "\" class=\"img-background\" src=\"" + opt.src + "\"></div><div class=\"imgLoaction\"><font></font><span>" + opt.address + "</span></div>";
} else {
node.innerHTML = "<div class=\"element_to_delete\" onclick=\"removeImage(this);\"></div><div onclick=\"imgClick(this);\" class=\"img-content\"><img id=\"" + name + "\" class=\"img-background\" src=\"" + opt.src + "\"></div>";
} else if ("string" == typeof opt) { // 如果进来的是字符串就有可能是HTML内容
node.innerHTML = opt;
return node;
static value(domNode) {
return domNode.innerHTML;
CustomImgBlot.blotName = 'customImg';
CustomImgBlot.tagName = 'cimg';
Quill.register(CustomImgBlot);
* 插入图片
* @param {Object} opt 属性键值对，这些属性都将被复制到当前插入图片
* @example
* ```javascript
* insertImage({src:'a/b/c.jpg', address:'地址可传不可传'});
* ```
insertImage = function(opt) {
if (opt == null) return;
quill.insertEmbed(quill.getSelection().index, 'customImg', opt);
搬砖么，能怎么搬， 为什么不花时间去研究let BlockEmbed = Quill.import('blots/block/embed');class CustomImgBlot extends BlockEmbed { // 声明内部对象 static obj = {}; static get ATTRIBUTES() { // 声明元素属性值...
羽毛笔
Delta
到HTML转换器
使用正确嵌套的列表将格式转换为HTML（仅插入ops）。
克隆存储库后，可以通过打开demo-browser.html文件来尝试进行转换的实时演示。
v0.10.0更改：从v0.10.0 import/require已更改。 请参阅下面的用法
npm install
quill
-
delta
-to-html
var
Quill
Delta
ToHtmlConverter = require ( '
quill
-
delta
-to-html' ) .
Quill
Delta
ToHtmlConverter ;
// TypeScript / ES6:
Delta
被用做描述
Quill
编辑器的内容和变化，简单但表达力强的数据格式。这种格式本质上是一种
JS
ON格式，人类可读同时及其也能容易识别。
Delta
能描述任意
Quill
内容，包括所有的文本、格式信息，并且没有HTML多义性及复杂性的缺点。
不要被他的名称
delta
迷惑，
Delta
s(Δ增量)代表文档和文档的改变。如果将
Delta
s看做是一个文档到另一个文档的操作指令，那么
Delta
表示一个文档就是从空文档开始到现有文档的操作指令的表达。
Delta
被独立成一个单独的库,以便其能在
Quill
以外的地方使用。
最近被
quill
.
js
这个富文本编辑器折磨了好几天，最终也算是完成需求。现描述一下这次遇到的需求时什么： 产品说需要在富文本编辑器加入一个图文混排的功能（图片需要支持缩放、并且图片与文字需要居中对齐）。之前只是文字并没有上传图片的功能。在拿到需求之后觉得很简单，就是在富文本编辑器新增一个图片上传功能。之后在开发的过程中还是遇到了好多问题。下面详细的给大家讲解一下。希望可以帮助到大家。
1、首先需要解决的事图片上传以及缩放功能。实现步骤。
editorOption: {
theme
今天分享下”
Quill
编辑器操作实例详解“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。
一转眼早已2020年，难耐的人们不会再能够满足于简易的文本，因此拥有花哨的带上各种各样款式的文本，殊不知有文本还不够，大家还必须让使用者在小编的情况下，可以插进各种各样
自定义
信息种类，使我们传出去的推广软文更为漂亮，因而拥有本文。
因为
Quill
在线编辑器内置的富文本过虑（绝大多数流行在线编辑器都是会对富文本开展过虑解决）
在 Web 开发领域，富文本编辑器（ Rich Text Editor ）是一个使用场景非常广，又非常复杂的组件。
要从0开始做一款好用、功能强大的富文本编辑器并不容易，基于现有的开源库进行开发能节省不少成本。
Quill
是一个很不错的选择。
本文主要介绍
Quill
内容渲染相关的基本原理，主要包括：
Quill
描述编辑器内容的方式
Quill
将
Delta
渲染到DOM的基本原理
Scroll类管理所有子Blot的基本原理
Quill
如何描述编辑器内容？
Quill
简介
const BlockEmbed =
Quill
.import('blots/block/embed');
//
定义
新的blot类型
class StockEmbed extends BlockEmbed {
static create(value) {
const node = s......
container: '#toolbar', // Selector for toolbar container
handlers: {
'bold': customBoldHandler
因为containe
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
import '
quill
/dist/
quill
.core.css'
import '
quill
/dist/
quill
.snow.css'
import '
quill
/dist/
quill
.bubble.css'
导入富文本组件
import {
quill
Editor
} from 'vue-
quill
-editor'
components: {
quill
Editor
<
quill
-ed
将代码：that.$refs.editRef.content = data.content
改成：document.querySelector("div.ql-editor").innerHTML = data.content
2.刷新audio标签消失问题：
将新建的代码在渲染时候再重新手动建一遍audio标签，保证修改页面刷新时au...
github地址 官网地址
安装
quill
（这里是在vue项目中使用的）
npm install -S
quill
-image-paste-module
quill
-image-resize-module vue-
quill
-editor
如何在项目中使用请看官网，这里主要记录一下如何使用
自定义
标签，很多时候，我们需要在标签中增加
自定义
属性
，或者新增
quill
原生不带有的标签，比如video，audio
新增blot文件
import Vue
Quill
Editor from 'vue-
quill
-editor'
import '
quill
/dist/
quill
.core.css'
import '
quill
/dist/
quill
.snow.css'
import '
quill
/dist/
quill
.bubble.css'
Vue.use(Vue
Quill
Editor)
3. 在组件中使用vue-
quill
-editor：
<template>
<
quill
-editor ref="my
Quill
Editor" :options="editorOption"></
quill
-editor>
</template>
<script>
export default {
data () {
return {
editorOption: {
modules: {
toolbar: [
['image', 'code-block']
placeholder: '请输入内容',
theme: 'snow'
methods: {
insertImage () {
let input = document.createElement('input')
input.setAttribute('type', 'file')
input.click()
// Listen upload local image and save to server
input.onchange = () => {
let file = input.files[0]
// file type is only image.
if (/^image\//.test(file.type)) {
this.uploadImageToServer(file, (imageUrl) => {
let range = this.$refs.my
Quill
Editor.
quill
.getSelection()
this.$refs.my
Quill
Editor.
quill
.insertEmbed(range.index, 'image', imageUrl)
} else {
console.warn('You could only upload images.')
uploadImageToServer (file, callback) {
let formData = new FormData()
formData.append('image', file)
// Your upload image to server api.
axios.post('api/upload/img', formData).then(response => {
if (response.data.success) {
callback(response.data.data.url)
</script>
请注意，这仅是一个示例，需要根据您的具体情况进行调整。如果需要上传图片到服务器，请自行实现上传
