一、項(xiàng)目介紹

它是目前 GitHub 上 Star 數(shù)最多的所見即所得 Web 編輯器，具有強(qiáng)大的可擴(kuò)展性和兼容性，支持臺(tái)式機(jī)、平板電腦和手機(jī)上幾乎所有的瀏覽器。

憑借其可擴(kuò)展架構(gòu)和富有表現(xiàn)力的 API，可以完全自定義它以滿足個(gè)性化的需求。由于其模塊化架構(gòu)和富有表現(xiàn)力的 API，可以從 Quill 核心開始，然后根據(jù)需要自定義其模塊或?qū)⒆约旱臄U(kuò)展添加到這個(gè)富文本編輯器中。

它提供了兩個(gè)用于更改編輯器外觀的主題，可以使用插件或覆蓋其 CSS 樣式表中的規(guī)則進(jìn)一步自定義。Quill 還支持任何自定義內(nèi)容和格式，因此可以添加嵌入式幻燈片、3D 模型等。

二、功能介紹

• 由于其 API 驅(qū)動(dòng)的設(shè)計(jì)，無需像在其他文本編輯器中那樣解析 HTML 或不同的 DOM 樹；
• 跨平臺(tái)和瀏覽器支持，快速輕便；
• 通過其模塊和富有表現(xiàn)力的 API 完全可定制；
• 可以將內(nèi)容表示為 JSON，更易于處理和轉(zhuǎn)換為其他格式；
• 提供兩個(gè)主題以快速輕松地更改編輯器的外觀。

三、快速引入

直接在需要引入富文本編輯器的頁面引入以下代碼：

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


<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>


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

五、項(xiàng)目截圖

功能上支持圖片上傳、視頻、代碼高亮（內(nèi)置了highlight）等功能。