Quill富文本編輯器—多圖片視頻混合上傳示例

Quill is a modern WYSIWYG editor built for compatibility and extensibility. https://quilljs.com

Quill 的使用

快速開始

開始構建一個quill編輯項目包括引入文件、創建自定義工具欄、創建編輯容器以及初始化這幾部分。

<!-- 引入css文件 -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">

<!-- 自定義編輯器工具欄 -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>

<!-- 創建編輯容器 -->
<div id="editor">
  <p>Hello World!</p>
</div>

<!-- 引入js文件 -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- 初始化編輯器，snow主題 -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
</script>

quill主要資源介紹

<!-- 主要的庫文件，js -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- css文件，有兩個主題，snow和bubble -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">

<!-- 沒有主題的核心構建, 不必要的模塊（使用不需要引入） -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>

以上就是quill的庫文件了，但要實現代碼高亮的話需要自己引入highlight.js庫，只需要引入就可以了，不需要額外的配置，所以完整的引入，以我的項目爲參考：

// 代碼高亮採用dracula主題，可去highlight官網配置
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dracula.min.css" rel="stylesheet">
// 採用snow主題
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">


// highlight.js的主要js文件
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
// quill的主要js文件
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

創建編輯器

quill的使用也很簡單，引入上面的資源之後就可以開始創建編輯器了。

首先需要定義編輯器的工具欄，有兩種方式，一種是直接html創建，一種是通過js創建，相對來說html更加直觀一些，這裏就簡單的放兩個示例介紹一下。

通過一個js數組來配置初始化容器：

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'
});

通過html來創建工具欄冰初始化容器：

<div id="toolbar-container">
    <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>

<script>
  var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar-container'
    }
  });
</script>

ok，這樣配置並初始化之後就可以完美展示編輯器了，來看一下成果圖：