Bootstrap-Quill

簡介:

bootstrap-quill 是一個基於quill客製化的 plugin
主要功能與Quill相同但是具備Excel的表格貼上時能夠轉換成圖片。

插件URL

DEMO

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

DEMO URL

套用方法

<!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

<!-- 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

方法一


var editor = new Quill('.editor');  // First matching element will be used

方法二


var container = document.getElementById('editor');
var editor = new Quill(container);

方法三


var container = $('.editor').get(0);
var editor = new Quill(container);

Options










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選擇器
但用途目前不明白







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

顯示設定的tool







var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];//自己設定

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions//對應模塊設定
  }
});

群組化


var toolbarOptions = [['bold', 'italic'], ['link', 'image']];

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

下拉式按鈕

可以將設定屬性下拉按鈕







// 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' ]}
];

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

按鈕構造


var toolbarOptions = [{ 'header': '3' }];

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

其他tool 選項



















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
];

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Formats

Inline

背景色 Background Color - `background`


var toolbarOptions = [[{ background: [] }],]

文字粗體 Bold - `bold`


var toolbarOptions = [['bold'],]

文字顏色 Color - `color`


var toolbarOptions = [[{ color: [] }],]

文字字型 Font - `font`


var toolbarOptions = [[{ font: [] }],]

客製化font style

代碼 Inline Code - `code`


var toolbarOptions = [['code']]

斜體 Italic - `italic`


var toolbarOptions = [['italic']]

連結 Link - `link`


var toolbarOptions = [['link']]

文字大小 Size - `size`

default :

small 0.75em
normal 1rem
large 1.5rem
huge 2.5em


var toolbarOptions = [[{ size: [] }]]


var toolbarOptions = [[{ size: ['small', false, 'large', 'huge'], }]]

客製化

<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>












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`


var toolbarOptions = [['strike']]

上標下標 Superscript/Subscript - `script`









var toolbarOptions = [
        [
          {
            script: 'sub',
          },
          {
            script: 'super',
          },
        ]]

下底線 Underline - `underline`


var toolbarOptions = [['underline']]

Block

引用 Blockquote - `blockquote`


var toolbarOptions = [['underline']]

Header - `header`






var toolbarOptions = [
         [
          {
            header: [],
          },
        ]]






var toolbarOptions = [
         [
          {
            header: [1, 2, 3, 4, 5, 6, false],
          },
        ]]

縮排 Indent - `indent`









var toolbarOptions = [
         [
          {
            indent: '-1',
          },
          {
            indent: '+1',
          },
        ]]

List - `list`









var toolbarOptions = [
         [
          {
            list: 'ordered',
          },
          {
            list: 'bullet',
          },
        ]]

對齊 Text Alignment - `align`






var toolbarOptions = [
         [
          {
            align: [],
          },
        ]]

反向 Text Direction - `direction`






var toolbarOptions = [
         [
          {
            direction: 'rtl',
          },
        ]]

代碼塊 Code Block - `code-block`


var toolbarOptions = [['code-block']]

Embeds

函式 Formula - `formula (requires KaTex)`


var toolbarOptions = [['formula']]

圖片 Image - `image`


var toolbarOptions = [['image']]

影片 Video - `video`


var toolbarOptions = [['video']]

その他

書式クリア remove formatting


var toolbarOptions = [['clean']];

主題 Themes

使用方式



var quill = new Quill('#editor', {
  theme: 'bubble'   // Specify theme in configuration
});

bubble

內聯形式

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Snow

顯示toolbar

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

客製化ICON

透過外部的HTML設定為TOOLBAR改變ICON式樣

<!-- 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>

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

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.
























// 方法一:
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


deleteText(index: Number, length: Number, source: String = 'api'): Delta

deleteText(從第幾位,刪除幾個字)

Examples


quill.deleteText(6, 4);

getContents

检索编辑器的内容，格式化返回一个Delta对象。

Methods


getContents(index: Number = 0, length: Number = remaining): Delta

Examples


var delta = quill.getContents();

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

getLength

检索返回编辑器的内容长度。注意：即使Quill是空的，编辑器仍然有一个‘\n’表示的空行，所以getLength将返回1。

Methods


getLength(): Number

Examples


var length = quill.getLength();

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

getText

检索并已字符串的方式返回编辑器的内容。非空字符串会被忽略，因此返回的字符串长度可能比getLength返回的编辑器长度短。注意：即使Quill为空，依然存在一个空行，所以在这种情况下getText会返回一个‘\n’。

Methods


getText(index: Number = 0, length: Number = remaining): String

Examples


var text = quill.getText(0, 10);

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

insertEmbed

向编辑器中插入嵌入式内容，返回一个改变后的Delta对象。操作来源可能为：‘user’、‘api’或者‘silent’。当编辑器被禁用时，来源‘user’将被忽略。

Methods


insertEmbed(index: Number, type: String, value: any, source: String = 'api'): Delta

Examples


quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png');

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

開啟功能

有些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

Bootstrap-Quill

簡介:

插件URL

DEMO

套用方法

簡易配置Quill

Quill配置

Container

Options

bounds

debug

formats

modules

placeholder

readOnly

scrollingContainer

Modules

toolbar

顯示設定的tool

群組化

下拉式按鈕

按鈕構造

其他tool 選項

Formats

Inline

背景色 Background Color - background

文字粗體 Bold - bold

文字顏色 Color - color

文字字型 Font - font

代碼 Inline Code - code

斜體 Italic - italic

連結 Link - link

文字大小 Size - size

刪除線 Strikethrough - strike

上標下標 Superscript/Subscript - script

下底線 Underline - underline

Block

引用 Blockquote - blockquote

Header - header

縮排 Indent - indent

List - list

對齊 Text Alignment - align

反向 Text Direction - direction

代碼塊 Code Block - code-block

Embeds

函式 Formula - formula (requires KaTex)

圖片 Image - image

影片 Video - video

その他

書式クリア remove formatting

主題 Themes

bubble

Snow

客製化ICON

Handlers

API

Content

deleteText

Methods

Examples

getContents

Methods

Examples

getLength

Methods

Examples

getText

Methods

Examples

insertEmbed

Methods

Examples

開啟功能

delta測試頁面

參考連結

Read more

翰寧股份有限公司-網頁文案

VS Code SQL Formatter Mod

背景色 Background Color - `background`

文字粗體 Bold - `bold`

文字顏色 Color - `color`

文字字型 Font - `font`

代碼 Inline Code - `code`

斜體 Italic - `italic`

連結 Link - `link`

文字大小 Size - `size`

刪除線 Strikethrough - `strike`

上標下標 Superscript/Subscript - `script`

下底線 Underline - `underline`

引用 Blockquote - `blockquote`

Header - `header`

縮排 Indent - `indent`

List - `list`

對齊 Text Alignment - `align`

反向 Text Direction - `direction`

代碼塊 Code Block - `code-block`

函式 Formula - `formula (requires KaTex)`

圖片 Image - `image`

影片 Video - `video`