1. Draft.js

Draft.js 是 Facebook 的一個開源項目，是 React 項目首選的是文本編輯器框架。這是一個健壯、可擴展和可定制的框架。Draft.js 遵循與 React 中的受控組件相同的范例，并提供了一個 Editor 呈現富文本輸入的組件。它還公開了一個EditorStateAPI 來處理/存儲Editor組件中的狀態更新。

該富文本編輯器的特點：

具有高度可擴展性和可定制性；
由 Facebook 支持的龐大且不斷增長的開源開發者社區提供了許多教程和支持；
無縫融入 React 應用程序，使用熟悉的聲明式 API 抽象出渲染、選擇和輸入行為的細節；
Draft.js 模型使用 immutable-js 構建的，提供了一個具有功能狀態更新的 API，并積極利用數據持久性來實現可擴展的內存使用。

GitHub：https://github.com/facebook/draft-js

2. Slate.js

Slate.js 是受 Draft.js 啟發的富文本編輯器。它是一個可深度定制的富編輯器框架，專用于 React。與 Draft.js 類似，它具有良好的 API、強大的插件基礎設施以及與 React 的深度連接。此外，插件生態系統比 Draft.js 小一些，但它的插件質量會更好。

該富文本編輯器的特點：

生成 JSON 輸出，使其更容易與其他模塊集成；
它的嵌套文檔模型支持更復雜的內容結構，如表格、分頁符和其他自定義功能；
可使用插件進行擴展；
提供良好的描述性文檔和交互式演示。

GitHub：https://github.com/ianstormtaylor/slate

3. Quill.js

Quill.js 是一個具有跨平臺和跨瀏覽器支持的富文本編輯器。憑借其可擴展架構和富有表現力的 API，可以完全自定義它以滿足個性化的需求。由于其模塊化架構和富有表現力的 API，可以從 Quill 核心開始，然后根據需要自定義其模塊或將自己的擴展添加到這個富文本編輯器中。它提供了兩個用于更改編輯器外觀的主題，可以使用插件或覆蓋其 CSS 樣式表中的規則進一步自定義。Quill 還支持任何自定義內容和格式，因此可以添加嵌入式幻燈片、3D 模型等。

該富文本編輯器的特點：

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

GitHub：https://github.com/quilljs/quill/

4. TinyMCE

TinyMCE 是一個熱門的富文本編輯器。它的目標是幫助其他開發人員構建精美的 Web 內容解決方案。它易于集成，可以部署在基于云的、自托管或混合環境中。該設置使得合并諸如 Angular、React 和 Vue 等框架成為可能。它還可以使用 50 多個插件進行擴展，每個插件都有 100 多個自定義選項。

TinyMCE 通過創建和編輯表格、建立字體系列、搜索和替換字體以及更改字體大小等功能，讓你可以完全控制你的設計。它還提供了多種云安全功能，包括 JSON Web 令牌和私有 RSA 密鑰，以更好地保護你的內容。

該富文本編輯器的特點：

實時協作支持；
高級表格和復雜內容支持；
增強的媒體嵌入支持；
自動連接檢查器；
編輯器可以在三種模式下使用：經典、內聯、無干擾；
提供云安全功能。

GitHub：https://github.com/tinymce/tinymce

5. wangEditor

wangEditor 是一個使用Typescript 開發的 Web 富文本編輯器，輕量、簡潔、易用、開源免費。它兼容常見的 PC 瀏覽器：Chrome，Firefox，Safar，Edge，QQ 瀏覽器，IE11。

GitHub：https://github.com/wangeditor-team/wangEditor/

6. ProseMirror

ProseMirror 是一個基于 ContentEditable 的所見即所得 HTML 編輯器，功能強大，支持協作編輯和自定義文檔模式 ProseMirror 庫由多個單獨的模塊組成。一個理想的富文本編輯器產生結構化的、語義化的、有意義的文檔的同時還要能夠讓用戶能夠容易地理解與使用。ProseMirror 試著在 Markdown 編輯體驗和傳統的 WYSIWYG 編輯體驗中尋找一種融合的方法。它通過實現一個比普通的 HTML 具有更多的限制和結構化的 WYSIWYG 風格的接口來做到這點。你可以自定義編輯器創建的文檔的結構和內容，使它們符合你應用的需要。

該富文本編輯器的特點：

實時協同編輯：ProseMirror 內置了對實時協同編輯的堅定支持，它允許多個人同時對一個文檔進行編輯。
可擴展的文檔結構：文檔結構（Document schemas）允許使用自定義的文檔結構而無需從頭開始編寫自己的編輯器。
模塊化：模塊機制確保你只載入自己需要的模塊，同時能夠按需替換已有的模塊。
插件化：插件系統允許你容易地增加額外的功能，同時以一種簡單的方式打包你的插件。
函數式：一個函數式和不可變數據結構讓 ProseMirror 很容易的與現代 web app 集成，以實現復雜的編輯行為。
定制化：核心庫小巧且通用，為構建不同類型的編輯器提供基礎支持。

GitHub：https://github.com/prosemirror/

7. Tiptap

Tiptap 是一個基于 Vue 的無渲染的富文本編輯器，它基于 Prosemirror，完全可擴展且無渲染。可以輕松地將自定義節點添加為Vue組件。使用無渲染組件（函數式組件），幾乎完全控制標記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。

該富文本編輯器的特點：

支持 Vue，React，Svelte 等框架；
使用 TypeScript 重構，支持類型系統；
代碼多包發布，每個模塊的功能更加獨立，開發者能更好的按需使用；
提供了更多開箱即用的擴展；
完善了文檔細節，有了文檔站點；
更高程度的支持了協同編輯。

GitHub：https://github.com/ueberdosis/tiptap

8. CKEditor 5

CKEditor 是一個強大的富文本編輯器框架，具有模塊化架構、現代集成和協作編輯等功能。它可以通過基于插件的架構進行擴展，從而可以將必要的內容處理功能引入。CKEditor 在市場上已有近 15 年的歷史，因其具有廣泛的功能和舊版軟件兼容性而成為最負盛名的編輯器之一。

CKEditor 5 是一個超現代的 JavaScript 富文本編輯器，具有 MVC 架構、自定義數據模型和虛擬 DOM。它是在 ES6 中從頭開始編寫的，并且具有出色的 webpack支持。可以使用與Angular、React和Vue.js的原生集成。

該富文本編輯器的特點：

與Electron和移動設備（Android、iOS）兼容；
可以自定義編輯器的顏色、語言、尺寸、工具欄等；
可以通過插件擴展；
支持從 Word、Excel 和 Google Docs 粘貼；
可以通過 Media Embed 插件插入視頻、推文、代碼片段、數學公式等。

GitHub：https://github.com/ckeditor/ckeditor5

9. ContentTools

ContentTools 是一個開源的富文本編輯器，只需幾個步驟即可將其添加到任何 HTML 頁面。添加后，將在 HTML 頁面上看到一個鉛筆圖標。單擊時，會出現一個工具箱和檢查器欄。使用這兩個元素，可以在頁面內編輯、調整大小或拖放文本圖像、嵌入的視頻、表格和其他內容。

ContentTools 旨在提供可開箱即用的全功能內容編輯器和可用于構建您自己的編輯器的類和函數工具包。該工具包包括一組輕量級的用戶界面類、一組用于執行常見編輯任務的工具，以及一個用于管理撤消/重做的歷史堆棧。雖然工具包提供的組件可以很好地協同工作，但它們也可以根據需要使用或更換。

該富文本編輯器的特點：

只需幾個簡單的步驟，即可在任何 HTML 頁面上安裝編輯器；
可以控制頁面的哪些區域是可編輯的；
可以通過添加工具進行擴展。

GitHub：https://github.com/GetmeUK/ContentTools

10. Jodit

Jodit 是一款使用純 TypeScript 編寫的（無需使用其他庫），美觀實用的所見即所得開源富文本編輯器，支持中文，超強自定義。

GitHub：https://github.com/xdan/jodit

些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。

花了一點時間研究了一下各家的編輯器，規則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進，或者丟失顏色樣式。

所以，這就難了。先得找個支持代碼高亮的編輯器，仔細地選擇并復制代碼塊，復制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉換工具了。

因為瀏覽器操作系統剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。

先看軟件成品演示：

軟件用法：

1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉換的編程代碼。
3、點擊「復制高亮代碼塊」按鈕。

然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

下面是這個軟件的 aardio 源代碼：

import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網頁編輯器直接粘貼";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="請選擇語言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定義控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/

import web.view;
var wb = web.view(winform.webCtrl);

import win.clip.html;
wb.export({ 
    onHighlight = function(html,background,foreground){
        html = `<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
            + html + `</code></pre>`;

        html,count = string.replace(html,'\n',"<br>");
        if(!count){
            html = string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
        }
        var cb = win.clip.html();
        cb.write(html); 

        winform.setTimeout( 
            function(){
                winform.editCode.show(true);
                winform.webCtrl.show(false);
                winform.text = "HTML 代碼塊生成工具 - 已復制高亮代碼塊到剪貼板，可在網頁直接粘貼";
            },1000); 
    };
    setLanguages = function(langs){
        winform.languages = langs;
    }  
})


winform.cmbLangs.onEditChange = function(){ 

    var text = string.lower(winform.cmbLangs.text);
    var items = table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) ); 
    winform.cmbLangs.autoComplete(items);  
}
winform.cmbLangs.editBox.disableInputMethod();

import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer = wsock.tcp.asynHttpServer(); 
httpServer.run(web.prism,{
    ["/index.html"] = /*****
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" /> 
    <link href="prism.css" rel="stylesheet" />
  </head>
  <body>
    <pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
    <script src="prism.js"></script>
    <script>
   function computedColorStyle(element, options = {}) {

        Array.prototype.forEach.call(element.children,child => {
            computedColorStyle(child, options);
        });

        const computedStyle = getComputedStyle(element);
        element.style["color"] = computedStyle.getPropertyValue("color");  
    }

    highlight = function(code,language){
        var html = Prism.highlight(code, Prism.languages[language], language);

        var codeEle = document.getElementById("code");
        codeEle.innerHTML = html;
        computedColorStyle(codeEle);

        const computedStyle = getComputedStyle(codeEle);  
        onHighlight(codeEle.innerHTML
            ,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
            ,computedStyle.getPropertyValue("color"));
    }

    setLanguages( Object.keys(Prism.languages) );
    </script>
  </body> 
</html> 
    *****/
});

wb.go( httpServer.getUrl("/index.html"));

winform.button.oncommand = function(id,event){
    winform.text = "HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫"
    winform.editCode.show(false);
    winform.webCtrl.show(true);

    wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}


winform.show();
win.loopMessage();

打開 aardio 創建工程，然后復制粘貼上面的代碼到 main.aardio 里面就可以直接運行，或生成獨立 EXE 文件：

這個軟件的原理：

1、首先通過 WebView2 調用 Prism.js 高亮代碼。為了可以內存加載 Prism.js （支持生成獨立 EXE ），我寫了一個 aardio 擴展庫 web.prism 。關于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發獨立 EXE 程序

2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調用 getComputedStyle 獲取最終渲染的字體顏色屬性。

3、最后在 JavaScript 里調用 aardio 函數處理生成的 HTML 代碼塊，aardio 的任務是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調用 win.clip.html 將處理好的 HTML 復制到系統剪貼板：

import win.clip.html;

var cb = win.clip.html();
cb.write(html);

然后只要愉快地粘貼代碼塊就可以。

如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點『復制全部到 HTML 代碼塊』就可以了：

《vite+vue3實現網頁版編輯器，帶高亮以及代碼提示（以SQL語言為例）》

## 引言：探索Vite與Vue3結合構建高效Web應用

隨著前端技術的飛速發展，Vite和Vue3已成為現代Web開發領域的熱門工具。Vite以其快速冷啟動、熱更新等特性讓開發者享受前所未有的開發體驗；而Vue3則憑借其優秀的組件化設計與Composition API，極大地提高了開發效率和代碼可維護性。本文將引導您如何利用這兩者搭建一款功能齊全、性能卓越的網頁版SQL編輯器，包括代碼高亮顯示及智能提示等功能。

## 一、項目初始化與環境配置

### 1. 創建項目

首先，確保已安裝Node.js和npm。然后通過Vite創建一個基于Vue3的新項目：

```bash

npm create vite@latest my-sql-editor --template vue

cd my-sql-editor

npm install

```

### 2. 安裝相關依賴

為了實現實時語法高亮和代碼提示，我們需要借助`codemirror`庫及其SQL相關的插件：

```bash

npm install codemirror @codemirror/lang-sql

```

## 二、編寫基礎HTML結構與Vue組件

### 1. 在App.vue中引入CodeMirror

```html

</div>

</template>

import { onMounted, ref } from 'vue';

import CodeMirror from 'codemirror';

onMounted(() => {

const editor = CodeMirror.fromTextArea(

document.querySelector('textarea'),

{

mode: 'text/x-sql',

lineNumbers: true,

theme: 'dracula', // 更多主題可以自定義選擇

}

);

});

</script>

```

此處我們已在App.vue中引入并初始化了一個基本的CodeMirror編輯器，并設置SQL模式以支持初步的語義高亮。

## 三、實現SQL代碼高亮

上述代碼已經實現了基礎的SQL高亮，CodeMirror內置了對SQL的支持。但為了讓效果更佳，我們可以進一步優化配置項，如添加SQL關鍵字高亮等。

### 高級配置示例：

```javascript

import '@codemirror/theme-dracula'; // 引入主題樣式

import { Extension } from '@codemirror/state';

const sqlExtensions: Extension[] = [

// SQL語言插件

langSql(),

// 添加代碼行號

lineNumbers(),

// 設置主題

EditorView.theme({

'&': { background: '#282a36' },

'.cm-comment': { color: '#6272a4' }, // 注釋顏色

'.cm-keyword': { color: '#ff79c6' }, // 關鍵字顏色

// ...其他樣式自定義

}),

];

onMounted(() => {

const editor = CodeMirror.fromTextArea(

document.querySelector('textarea'),

{

extensions: sqlExtensions,

}

);

});

```

## 四、實現SQL代碼提示

CodeMirror并沒有直接提供SQL的自動補全功能，但我們可以通過自定義擴展來實現。這里我們使用`hint`和`autocomplete`插件配合自定義數據源實現SQL代碼提示。

### 實現代碼提示功能：

```javascript

// 假設我們有一個包含所有SQL關鍵字和函數的數組

const sqlKeywords = ['SELECT', 'FROM', 'WHERE', 'LIKE', /*...*/ ];

function sqlHint(cm: EditorView) {

let cur = cm.state.field(EditorState.cursor).head;

let token = cm.getTokenAt(cur);

if (token.string.startsWith('@')) { // 示例：針對特定字符開頭觸發提示

let list: string[] = [];

for (let keyword of sqlKeywords) {

if (keyword.startsWith(token.string.slice(1))) {

list.push(keyword);

}

return {

from: cm.posFromIndex(cur - token.start),

to: cm.posFromIndex(cur),

list: list,

};

}

const hintExtension = [

Completion.of([

{ provide: ['completion'], get: () => sqlHint },

]),

];

sqlExtensions.push(...hintExtension);

```

## 結語：進階優化與未來展望

至此，我們已成功利用Vite+Vue3構建了一個具備SQL高亮和代碼提示功能的網頁版編輯器。然而，為了提升用戶體驗，還可以在此基礎上進行諸如錯誤檢測、實時預覽查詢結果等更多高級功能的開發。同時，對于SQL提示的完善，可以考慮接入數據庫API獲取實時表結構信息，實現更精準的智能提示。希望本文能為您的前端開發之旅注入新的靈感與動力，讓我們一起在前端世界里創造更多可能！

在線咨詢

上一篇：H5 視頻兼容性處理總結
下一篇：HTML 鏈接

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

推薦 10 款常用的富文本編輯器

1. Draft.js

2. Slate.js

3. Quill.js

4. TinyMCE

5. wangEditor

6. ProseMirror

7. Tiptap

8. CKEditor 5

9. ContentTools

10. Jodit

您的項目需求