這一款開源免費的富文本編輯器，是值得推薦的-Quil

這一款開源免費的富文本編輯器，是值得推薦的-Quill

紹

Quill是一個所見即所得的富文本編輯器，是一個集兼容性和可擴展性于一體的優秀編輯器，

Github

https://github.com/quilljs/quill

Quill特點

開發友好

通過簡單的API可以細粒度地訪問編輯器的內容，更改和事件。使用JSON作為輸入和輸出一致且確定性的工作

兼容性好

支持臺式機，平板電腦和手機上的所有現代瀏覽器。體驗相同的一致行為，并跨平臺生成HTML。

自定義內容和格式

在過去，評估富文本編輯器就像比較所需格式的清單一樣簡單。一個好的RTF編輯器的標志就是它支持多少種格式。雖然這很重要，但是如果能夠自定義內容和格式，那其擴展性將是無限的。

使用方便

所有這些好處都包含在易于使用的代碼中。 Quill帶有默認值，只需幾行Javascript就可以立即使用它：

var quill=new Quill('#editor', {
  modules: { toolbar: true },
  theme: 'snow'
});

如果不需要自定義，那么你只需享受現成的豐富而一致的體驗即可。

截圖

功能上支持圖片上傳、視頻、代碼高亮（內置了highlight）等功能

快速開始

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="quill.snow.css" rel="stylesheet">
</head>
<body>
    <!-- 編輯器容器 -->
    <div id="editor">
        <p>Hello World!</p>
        <p>Some initial <strong>bold</strong> text</p>
        <p><br></p>
    </div>

    <!-- 引入quill -->
    <script src="quill.js"></script>

    <!--初始化 -->
    <script>
        var quill=new Quill('#editor', {
            theme: 'snow'
        });
    </script>
</body>

</html>

總結

本文對于Quill的介紹有限，但是并不能掩飾它的優秀，具體的用法和API可以參考官方文檔，不過蘿卜青菜，各有所愛，合適的才是最好的！

介

Quill是一個強大的富文本編輯器，可以幫助用戶創建和編輯富文本內容。富文本編輯器可以讓用戶在網頁上自由地輸入和編輯文本，并添加各種樣式和格式。Quill具有快速、靈活、可定制等特點，可以適用于各種場景，包括博客、在線文檔、即時通訊等。

Quill的富文本編輯功能包括基本的文本格式化（如加粗、斜體、下劃線等）、段落對齊和縮進、鏈接和引用、代碼塊和代碼高亮等。此外，Quill還支持插入圖片、視頻、表情等多媒體內容，以及繪制簡單的圖形和圖表。

Quill的另一個優點是它的可定制性。可以通過配置選項和模塊來定制Quill編輯器的外觀和功能。例如，可以添加自定義的工具欄按鈕、修改主題樣式、添加額外的格式化選項等。

在使用Quill時，可以通過引入Quill庫和樣式表來初始化編輯器，并使用JavaScript API來控制編輯器的行為和功能。Quill還提供了豐富的API和文檔，方便開發者進行定制和擴展。

Quickstart

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