---
tags: bootstrap-quill,quill,jquery,javascript
---
# Bootstrap-Quill
## 簡介:
bootstrap-quill 是一個基於quill客製化的 plugin
主要功能與Quill相同但是具備Excel的表格貼上時能夠轉換成圖片。
### 插件URL
---
* [qill](https://github.com/quilljs/quill/tree/master)
* [bootstrap-quill](https://github.com/weavy/bootstrap-quill)
### DEMO
---
[DEMO URL](https://www.jqueryscript.net/text/Quill-Editor-Bootstrap-4.html)
## 套用方法
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4 Quill Editor Demos</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- 注意這裡必須使用Quill Editor v2.0.0-dev.2版本才能顯示icon -->
<link rel="stylesheet" href="../dist/css/quill.css">
<link rel="stylesheet" href="../dist/css/quill.snow.css">
<link rel="stylesheet" href="../dist/css/quill.bubble.css">
<script src="../dist/bootstrap-quill.js"></script>
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="https://www.jqueryscript.net/text/Quill-Editor-Bootstrap-4.html">Download This Plugin</a></li>
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads">
<script type="text/javascript">
</script>
<div class="jquery-script-clear"></div>
</div>
</div>
<script src="../dist/sprite.svg.js"></script>
<main class="container" style="margin:150px auto">
<h1>Bootstrap 4 Quill Editor Demos</h1>
<h2 class="display-4 mt-5">Classic editor</h2>
<div class="editor-full">
<div id="document-full" class="ql-scroll-y" style="height: 300px;">
<h1>My document</h1>
</div>
</div>
<h2 class="display-4 mt-5">Compact editor</h2>
<form onsubmit="console.log('submitted');">
<div class="editor-compact d-flex">
<div id="document-compact" class="ql-compact flex-fill"></div>
<button type="submit" class="btn btn-link flex-grow-0 flex-shrink-0"><svg style="fill: currentColor;" width="24" height="24">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#send"></use>
</svg></button>
</div>
</form>
</main>
<script>
var toolbarOptions = [
[{
'header': [1, 2, 3, 4, 5, 6, false]
}],
['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
[{
'color': []
}, {
'background': []
}], // dropdown with defaults from theme
[{
'font': []
}],
[{
'align': []
}],
['link', 'image'],
['clean'] // remove formatting button
];
var quillFull = new Quill('#document-full', {
modules: {
toolbar: toolbarOptions,
autoformat: true
},
theme: 'snow',
placeholder: "Write something..."
});
var quillCompact = new Quill('#document-compact', {
modules: {
form: {
submitKey: {
key: 'Enter',
shortKey: true
}
},
autoformat: true
},
theme: 'bubble',
placeholder: "Type a message. " + (/mac/i.test(navigator.platform) ? "⌘" : "Ctrl") + "+Enter to send."
});
</script>
</body>
</html>
```
## 簡易配置Quill
```html
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<!-- Create the editor container -->
<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>
```
## Quill配置
### Container
方法一
```javascript=
var editor = new Quill('.editor'); // First matching element will be used
```
方法二
```javascript=
var container = document.getElementById('editor');
var editor = new Quill(container);
```
方法三
```javascript=
var container = $('.editor').get(0);
var editor = new Quill(container);
```
### Options
```javascript=
var options = {
debug: 'info',
modules: {
toolbar: '#toolbar'
},
placeholder: 'Compose an epic...',
readOnly: true,
theme: 'snow'
};
var editor = new Quill('#editor', options);
```
#### bounds
Default: `document.body`
DOM 元素或 DOM 元素的 CSS 選擇器，應將編輯器的 ui 元素（即工具提示等）限制在其中。 目前，它只考慮左右邊界。
可以設定為editor的外部容器的class名稱等css選擇器
但用途目前不明白
```javascript=
var quill = new Quill('.editor', {
theme: 'snow',
bounds: '.left',
modules: {
toolbar: toolbarOptions
}
});
```
#### debug
Default: `warn`
debug的开关。注意：debug是一个静态方法并且会影响同一个页面的其它编辑器实例。只用警告和错误信息是默认启用的。
#### formats
Default: `All formats`
在编辑器中允许的格式白名单。请参阅格式化以获取完整列表。
#### modules
包含的模块和相应的选项。请参阅模块以获取更多信息。
#### placeholder
Default: `None`
编辑器为空时显示的占位符。
#### readOnly
Default: `false`
是否将编辑器是实例设置为只读模式。
#### scrollingContainer
Default: `null`
DOM元素或者一个DOM元素的css选择器，指定改容器具有滚动条（例如：overflow-y: auto），如果已经被用户自定义了默认的ql-editor。当Quill设置为自动适应高度是，需要修复滚动跳转的错误，并且另一个父容器负责滚动。
> 注意：当使用body时，一些浏览器仍然会跳转。可以使用一个单独的div子节点来避免这种情况。
## Modules
### toolbar
##### 顯示設定的tool
```javascript=
var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];//自己設定
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions//對應模塊設定
}
});
```
##### 群組化
```javascript=
var toolbarOptions = [['bold', 'italic'], ['link', 'image']];
```
<p style="text-align:center;">
<img src="https://i.imgur.com/3CkdayZ.png">
</p>
##### 下拉式按鈕
可以將設定屬性下拉按鈕
```javascript=
// Note false, not 'normal', is the correct value
// quill.format('size', false) removes the format,
// allowing default styling to work
// false 可以清除 format
var toolbarOptions = [
{ size: [ 'small', false, 'large', 'huge' ]}
];
```
<p style="text-align:center;">
<img src="https://i.imgur.com/XvZfFW4.png">
</p>
##### 按鈕構造
```javascript=
var toolbarOptions = [{ 'header': '3' }];
```
<p style="text-align:center;">
<img src="https://i.imgur.com/d6jsDwG.png">
</p>
##### 其他tool 選項
```javascript=
var 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
];
```
<p style="text-align:center;">
<img src="https://i.imgur.com/dShESOl.png">
</p>
## Formats
### Inline
###### 背景色 Background Color - `background`
```javascript=
var toolbarOptions = [[{ background: [] }],]
```
###### 文字粗體 Bold - `bold`
```javascript=
var toolbarOptions = [['bold'],]
```
###### 文字顏色 Color - `color`
```javascript=
var toolbarOptions = [[{ color: [] }],]
```
###### 文字字型 Font - `font`
```javascript=
var toolbarOptions = [[{ font: [] }],]
```
[客製化font style](https://stackoverflow.com/questions/43728080/how-to-add-font-types-on-quill-js-with-toolbar-options
)
###### 代碼 Inline Code - `code`
```javascript=
var toolbarOptions = [['code']]
```
###### 斜體 Italic - `italic`
```javascript=
var toolbarOptions = [['italic']]
```
###### 連結 Link - `link`
```javascript=
var toolbarOptions = [['link']]
```
###### 文字大小 Size - `size`
default :
* small 0.75em
* normal 1rem
* large 1.5rem
* huge 2.5em
```javascript=
var toolbarOptions = [[{ size: [] }]]
```
```javascript=
var toolbarOptions = [[{ size: ['small', false, 'large', 'huge'], }]]
```
客製化
```html
<div id="toolbar-container">
<span class="ql-formats">
<select class="ql-size">
<!-- 排列順序不會跟設定的順序互相影響 -->
<option value="30px">30px</option>
<option selected>Normal</option>
<option value="18px">18px</option>
<option value="32px">32px</option>
</select>
</span>
</div>
<div id="editor-container">
</div>
```
```javascript=
var SizeStyle = Quill.import("attributors/style/size");
SizeStyle.whitelist = ["30px", "18px", "32px"];
Quill.register(SizeStyle, true);
var quill = new Quill("#editor-container", {
modules: {
toolbar: "#toolbar-container"
},
placeholder: "Compose an epic...",
theme: "snow"
});
```
###### 刪除線 Strikethrough - `strike`
```javascript=
var toolbarOptions = [['strike']]
```
###### 上標下標 Superscript/Subscript - `script`
```javascript=
var toolbarOptions = [
[
{
script: 'sub',
},
{
script: 'super',
},
]]
```
###### 下底線 Underline - `underline`
```javascript=
var toolbarOptions = [['underline']]
```
### Block
###### 引用 Blockquote - `blockquote`
```javascript=
var toolbarOptions = [['underline']]
```
###### Header - `header`
```javascript=
var toolbarOptions = [
[
{
header: [],
},
]]
```
```javascript=
var toolbarOptions = [
[
{
header: [1, 2, 3, 4, 5, 6, false],
},
]]
```
###### 縮排 Indent - `indent`
```javascript=
var toolbarOptions = [
[
{
indent: '-1',
},
{
indent: '+1',
},
]]
```
###### List - `list`
```javascript=
var toolbarOptions = [
[
{
list: 'ordered',
},
{
list: 'bullet',
},
]]
```
###### 對齊 Text Alignment - `align`
```javascript=
var toolbarOptions = [
[
{
align: [],
},
]]
```
###### 反向 Text Direction - `direction`
```javascript=
var toolbarOptions = [
[
{
direction: 'rtl',
},
]]
```
###### 代碼塊 Code Block - `code-block`
```javascript=
var toolbarOptions = [['code-block']]
```
### Embeds
###### 函式 Formula - `formula (requires KaTex)`
```javascript=
var toolbarOptions = [['formula']]
```
###### 圖片 Image - `image`
```javascript=
var toolbarOptions = [['image']]
```
###### 影片 Video - `video`
```javascript=
var toolbarOptions = [['video']]
```
### その他
###### 書式クリア remove formatting
```javascript=
var toolbarOptions = [['clean']];
```
## 主題 Themes
使用方式
```javascript=
var quill = new Quill('#editor', {
theme: 'bubble' // Specify theme in configuration
});
```
<h3 style="color:#0089ff">bubble</h3>
內聯形式
<p style="text-align:center;">
<img src="https://i.imgur.com/iN27DD3.png">
</p>
<p style="text-align:center;">
<img src="https://i.imgur.com/rYuBGgv.png">
</p>
<h3 style="color:#0089ff">Snow</h3>
顯示toolbar
<p style="text-align:center;">
<img src="https://i.imgur.com/HucYzPl.png">
</p>
#### 客製化ICON
透過外部的HTML設定為TOOLBAR改變ICON式樣
```html
<!-- Create toolbar container -->
<div id="toolbar">
<!-- Add font size dropdown -->
<select class="ql-size">
<option value="small"></option>
<!-- Note a missing, thus falsy value, is used to reset to default -->
<option selected></option>
<option value="large"></option>
<option value="huge"></option>
</select>
<!-- Add a bold button -->
<button class="ql-bold"></button>
<!-- Add subscript and superscript buttons -->
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</div>
<div id="editor"></div>
<!-- Initialize editor with toolbar -->
<script>
var quill = new Quill('#editor', {
modules: {
toolbar: '#toolbar'
}
});
</script>
```
<p style="text-align:center;">
<img src="https://i.imgur.com/3ZMWPAm.png">
</p>
#### Handlers
更改原先tool事件
工具欄空間默認應用並刪除樣式，但你也可以用自定義事件將其覆蓋，例如：為了展示額外的用戶界面。
事件函數將被綁定到工具欄上（因此使用這將得到工具欄的實例），如果相應的格式是非活動的，則傳遞輸入的值屬性，否則返回假。添加自定義事件將覆蓋默認的工具 欄和主題行為。
> The toolbar controls by default applies and removes formatting, but you can also overwrite this with custom handlers, for example in order to show external UI.
> Handler functions will be bound to the toolbar (so using this will refer to the toolbar instance) and passed the value attribute of the input if the corresponding format is inactive, and false otherwise. Adding a custom handler will overwrite the default toolbar and theme behavior.
```javascript=
// 方法一:
var 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);
}
}
}
}
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
}
});
// 方法二
// Handlers can also be added post initialization
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', showImageUI);
```
## API
### Content
#### deleteText
從編輯器刪除文本，返回一個改變的 Delta 對象。操作來源可能是：“用戶”、“api”或“沉默”。當編輯器被打破時，來源“用戶”將被忽視。
##### Methods
```javascript=
deleteText(index: Number, length: Number, source: String = 'api'): Delta
```
```
deleteText(從第幾位,刪除幾個字)
```
##### Examples
```javascript=
quill.deleteText(6, 4);
```
#### getContents
检索编辑器的内容，格式化返回一个Delta对象。
##### Methods
```javascript=
getContents(index: Number = 0, length: Number = remaining): Delta
```
##### Examples
```javascript=
var delta = quill.getContents();
```
<p style="text-align:center;">
<img src="https://i.imgur.com/SGNpQLE.png">
</p>
#### getLength
检索返回编辑器的内容长度。注意：即使Quill是空的，编辑器仍然有一个‘\n’表示的空行，所以getLength将返回1。
##### Methods
```javascript=
getLength(): Number
```
##### Examples
```javascript=
var length = quill.getLength();
```
<p style="text-align:center;">
<img src="https://i.imgur.com/1TGTnh2.png">
</p>
#### getText
检索并已字符串的方式返回编辑器的内容。非空字符串会被忽略，因此返回的字符串长度可能比getLength返回的编辑器长度短。注意：即使Quill为空，依然存在一个空行，所以在这种情况下getText会返回一个‘\n’。
##### Methods
```javascript=
getText(index: Number = 0, length: Number = remaining): String
```
##### Examples
```javascript=
var text = quill.getText(0, 10);
```
<p style="text-align:center;">
<img src="https://i.imgur.com/7g08g7t.png">
</p>
#### insertEmbed
向编辑器中插入嵌入式内容，返回一个改变后的Delta对象。操作来源可能为：‘user’、‘api’或者‘silent’。当编辑器被禁用时，来源‘user’将被忽略。
##### Methods
```javascript=
insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta
```
##### Examples
```javascript=
quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');
```
<p style="text-align:center;">
<img src="https://i.imgur.com/7g08g7t.png">
</p>
## 開啟功能
---
有些tag必須要自己打開才能使用
```
import Quill from './core';
import { AlignClass, AlignStyle } from './formats/align';
import {
DirectionAttribute,
DirectionClass,
DirectionStyle,
} from './formats/direction';
import Indent from './formats/indent';
import Blockquote from './formats/blockquote';
import Header from './formats/header';
import List from './formats/list';
import { BackgroundClass, BackgroundStyle } from './formats/background';
import { ColorClass, ColorStyle } from './formats/color';
import { FontClass, FontStyle } from './formats/font';
import { SizeClass, SizeStyle } from './formats/size';
import Bold from './formats/bold';
import Italic from './formats/italic';
import Link from './formats/link';
import Script from './formats/script';
import Strike from './formats/strike';
import Underline from './formats/underline';
import Formula from './formats/formula';
import Image from './formats/image';
import Video from './formats/video';
import CodeBlock, { Code as InlineCode } from './formats/code';
import Syntax from './modules/syntax';
import Table from './modules/table';
import Toolbar from './modules/toolbar';
import Icons from './ui/icons';
import Picker from './ui/picker';
import ColorPicker from './ui/color-picker';
import IconPicker from './ui/icon-picker';
import Tooltip from './ui/tooltip';
import BubbleTheme from './themes/bubble';
import SnowTheme from './themes/snow';
Quill.register(
{
'attributors/attribute/direction': DirectionAttribute,
'attributors/class/align': AlignClass,
'attributors/class/background': BackgroundClass,
'attributors/class/color': ColorClass,
'attributors/class/direction': DirectionClass,
'attributors/class/font': FontClass,
'attributors/class/size': SizeClass,
'attributors/style/align': AlignStyle,
'attributors/style/background': BackgroundStyle,
'attributors/style/color': ColorStyle,
'attributors/style/direction': DirectionStyle,
'attributors/style/font': FontStyle,
'attributors/style/size': SizeStyle,
},
true,
);
Quill.register(
{
'formats/align': AlignClass,
'formats/direction': DirectionClass,
'formats/indent': Indent,
'formats/background': BackgroundStyle,
'formats/color': ColorStyle,
'formats/font': FontClass,
'formats/size': SizeClass,
'formats/blockquote': Blockquote,
'formats/code-block': CodeBlock,
'formats/header': Header,
'formats/list': List,
'formats/bold': Bold,
'formats/code': InlineCode,
'formats/italic': Italic,
'formats/link': Link,
'formats/script': Script,
'formats/strike': Strike,
'formats/underline': Underline,
'formats/formula': Formula,
'formats/image': Image,
'formats/video': Video,
'modules/syntax': Syntax,
'modules/table': Table,
'modules/toolbar': Toolbar,
'themes/bubble': BubbleTheme,
'themes/snow': SnowTheme,
'ui/icons': Icons,
'ui/picker': Picker,
'ui/icon-picker': IconPicker,
'ui/color-picker': ColorPicker,
'ui/tooltip': Tooltip,
},
true,
);
export default Quill;
```
```
import Quill from './core/quill';
import Block, { BlockEmbed } from './blots/block';
import Break from './blots/break';
import Container from './blots/container';
import Cursor from './blots/cursor';
import Embed from './blots/embed';
import Inline from './blots/inline';
import Scroll from './blots/scroll';
import TextBlot from './blots/text';
import Clipboard from './modules/clipboard';
import History from './modules/history';
import Keyboard from './modules/keyboard';
import Uploader from './modules/uploader';
Quill.register({
'blots/block': Block,
'blots/block/embed': BlockEmbed,
'blots/break': Break,
'blots/container': Container,
'blots/cursor': Cursor,
'blots/embed': Embed,
'blots/inline': Inline,
'blots/scroll': Scroll,
'blots/text': TextBlot,
'modules/clipboard': Clipboard,
'modules/history': History,
'modules/keyboard': Keyboard,
'modules/uploader': Uploader,
});
export default Quill;
```
## delta測試頁面
---
https://quilljs.com/docs/delta/
## 參考連結
https://kang-bing-kui.gitbook.io/quill/wen-dang-document/configuration
https://blog.csdn.net/WuLex/article/details/108277769
https://blog.csdn.net/WuLex/article/details/108277535
Sign in with Wallet
Connect another wallet