整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，我是Echa.
富文本編輯器，Multi-function Text Editor, 簡(jiǎn)稱 MTE, 是一種可內(nèi)嵌于瀏覽器，所見(jiàn)即所得（WYSIWYG）的文本編輯器。今天就來(lái)介紹 10 款式前端開(kāi)發(fā)常用的富文本編輯器插件！
Draft.js 是 Facebook 的一個(gè)開(kāi)源項(xiàng)目，是 React 項(xiàng)目首選的是文本編輯器框架。這是一個(gè)健壯、可擴(kuò)展和可定制的框架。Draft.js 遵循與 React 中的受控組件相同的范例，并提供了一個(gè) Editor 呈現(xiàn)富文本輸入的組件。它還公開(kāi)了一個(gè)EditorStateAPI 來(lái)處理/存儲(chǔ)Editor組件中的狀態(tài)更新。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/facebook/draft-js
Slate.js 是受 Draft.js 啟發(fā)的富文本編輯器。它是一個(gè)可深度定制的富編輯器框架，專用于 React。與 Draft.js 類似，它具有良好的 API、強(qiáng)大的插件基礎(chǔ)設(shè)施以及與 React 的深度連接。此外，插件生態(tài)系統(tǒng)比 Draft.js 小一些，但它的插件質(zhì)量會(huì)更好。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/ianstormtaylor/slate
Quill.js 是一個(gè)具有跨平臺(tái)和跨瀏覽器支持的富文本編輯器。憑借其可擴(kuò)展架構(gòu)和富有表現(xiàn)力的 API，可以完全自定義它以滿足個(gè)性化的需求。由于其模塊化架構(gòu)和富有表現(xiàn)力的 API，可以從 Quill 核心開(kāi)始，然后根據(jù)需要自定義其模塊或?qū)⒆约旱臄U(kuò)展添加到這個(gè)富文本編輯器中。它提供了兩個(gè)用于更改編輯器外觀的主題，可以使用插件或覆蓋其 CSS 樣式表中的規(guī)則進(jìn)一步自定義。Quill 還支持任何自定義內(nèi)容和格式，因此可以添加嵌入式幻燈片、3D 模型等。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/quilljs/quill/
TinyMCE 是一個(gè)熱門(mén)的富文本編輯器。它的目標(biāo)是幫助其他開(kāi)發(fā)人員構(gòu)建精美的 Web 內(nèi)容解決方案。它易于集成，可以部署在基于云的、自托管或混合環(huán)境中。該設(shè)置使得合并諸如 Angular、React 和 Vue 等框架成為可能。它還可以使用 50 多個(gè)插件進(jìn)行擴(kuò)展，每個(gè)插件都有 100 多個(gè)自定義選項(xiàng)。
TinyMCE 通過(guò)創(chuàng)建和編輯表格、建立字體系列、搜索和替換字體以及更改字體大小等功能，讓你可以完全控制你的設(shè)計(jì)。它還提供了多種云安全功能，包括 JSON Web 令牌和私有 RSA 密鑰，以更好地保護(hù)你的內(nèi)容。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/tinymce/tinymce
wangEditor 是一個(gè)使用Typescript 開(kāi)發(fā)的 Web 富文本編輯器， 輕量、簡(jiǎn)潔、易用、開(kāi)源免費(fèi)。它兼容常見(jiàn)的 PC 瀏覽器：Chrome，F(xiàn)irefox，Safar，Edge，QQ 瀏覽器，IE11。
GitHub：https://github.com/wangeditor-team/wangEditor/
ProseMirror 是一個(gè)基于 ContentEditable 的所見(jiàn)即所得 HTML 編輯器，功能強(qiáng)大，支持協(xié)作編輯和自定義文檔模式 ProseMirror 庫(kù)由多個(gè)單獨(dú)的模塊組成。一個(gè)理想的富文本編輯器產(chǎn)生結(jié)構(gòu)化的、語(yǔ)義化的、有意義的文檔的同時(shí)還要能夠讓用戶能夠容易地理解與使用。ProseMirror 試著在 Markdown 編輯體驗(yàn)和傳統(tǒng)的 WYSIWYG 編輯體驗(yàn)中尋找一種融合的方法。它通過(guò)實(shí)現(xiàn)一個(gè)比普通的 HTML 具有更多的限制和結(jié)構(gòu)化的 WYSIWYG 風(fēng)格的接口來(lái)做到這點(diǎn)。你可以自定義編輯器創(chuàng)建的文檔的結(jié)構(gòu)和內(nèi)容，使它們符合你應(yīng)用的需要。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/prosemirror/
Tiptap 是一個(gè)基于 Vue 的無(wú)渲染的富文本編輯器，它基于 Prosemirror，完全可擴(kuò)展且無(wú)渲染。可以輕松地將自定義節(jié)點(diǎn)添加為Vue組件。使用無(wú)渲染組件（函數(shù)式組件），幾乎完全控制標(biāo)記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/ueberdosis/tiptap
CKEditor 是一個(gè)強(qiáng)大的富文本編輯器框架，具有模塊化架構(gòu)、現(xiàn)代集成和協(xié)作編輯等功能。它可以通過(guò)基于插件的架構(gòu)進(jìn)行擴(kuò)展，從而可以將必要的內(nèi)容處理功能引入。CKEditor 在市場(chǎng)上已有近 15 年的歷史，因其具有廣泛的功能和舊版軟件兼容性而成為最負(fù)盛名的編輯器之一。
CKEditor 5 是一個(gè)超現(xiàn)代的 JavaScript 富文本編輯器，具有 MVC 架構(gòu)、自定義數(shù)據(jù)模型和虛擬 DOM。它是在 ES6 中從頭開(kāi)始編寫(xiě)的，并且具有出色的 webpack支持。可以使用與Angular、React和Vue.js的原生集成。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/ckeditor/ckeditor5
ContentTools 是一個(gè)開(kāi)源的富文本編輯器，只需幾個(gè)步驟即可將其添加到任何 HTML 頁(yè)面。添加后，將在 HTML 頁(yè)面上看到一個(gè)鉛筆圖標(biāo)。單擊時(shí)，會(huì)出現(xiàn)一個(gè)工具箱和檢查器欄。使用這兩個(gè)元素，可以在頁(yè)面內(nèi)編輯、調(diào)整大小或拖放文本圖像、嵌入的視頻、表格和其他內(nèi)容。
ContentTools 旨在提供可開(kāi)箱即用的全功能內(nèi)容編輯器和可用于構(gòu)建您自己的編輯器的類和函數(shù)工具包。該工具包包括一組輕量級(jí)的用戶界面類、一組用于執(zhí)行常見(jiàn)編輯任務(wù)的工具，以及一個(gè)用于管理撤消/重做的歷史堆棧。雖然工具包提供的組件可以很好地協(xié)同工作，但它們也可以根據(jù)需要使用或更換。
該富文本編輯器的特點(diǎn)：
GitHub：https://github.com/GetmeUK/ContentTools
Jodit 是一款使用純 TypeScript 編寫(xiě)的（無(wú)需使用其他庫(kù)），美觀實(shí)用的所見(jiàn)即所得開(kāi)源富文本編輯器，支持中文，超強(qiáng)自定義。
GitHub：https://github.com/xdan/jodit
些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。
花了一點(diǎn)時(shí)間研究了一下各家的編輯器，規(guī)則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關(guān)鍵詞，或者要求代碼塊里必須包含至少一個(gè) <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進(jìn)，或者丟失顏色樣式。
所以，這就難了。先得找個(gè)支持代碼高亮的編輯器，仔細(xì)地選擇并復(fù)制代碼塊，復(fù)制完還得編輯剪貼板里的 HTML 。這就不如干脆寫(xiě)個(gè)轉(zhuǎn)換工具了。
因?yàn)闉g覽器操作系統(tǒng)剪貼板可能不太方便，下面用 aardio 寫(xiě)一個(gè)工具軟件。
先看軟件成品演示：
軟件用法：
1、輸入編程語(yǔ)言名稱（支持自動(dòng)完成）。
2、然后在輸入框中粘貼要轉(zhuǎn)換的編程代碼。
3、點(diǎn)擊「復(fù)制高亮代碼塊」按鈕。
然后我們就可以打開(kāi)在線圖文編輯器直接粘貼生成的高亮代碼塊了。
下面是這個(gè)軟件的 aardio 源代碼：
import win.ui;
/*DSG{{*/
var winform = win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語(yǔ)言編寫(xiě)";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復(fù)制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網(wǎng)頁(yè)編輯器直接粘貼";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="請(qǐng)選擇語(yǔ)言：";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 代碼塊生成工具 - 已復(fù)制高亮代碼塊到剪貼板，可在網(wǎng)頁(yè)直接粘貼";
},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 語(yǔ)言編寫(xiě)"
winform.editCode.show(false);
winform.webCtrl.show(true);
wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}
winform.show();
win.loopMessage();打開(kāi) aardio 創(chuàng)建工程，然后復(fù)制粘貼上面的代碼到 main.aardio 里面就可以直接運(yùn)行，或生成獨(dú)立 EXE 文件：
這個(gè)軟件的原理：
1、首先通過(guò) WebView2 調(diào)用 Prism.js 高亮代碼。為了可以內(nèi)存加載 Prism.js （ 支持生成獨(dú)立 EXE ），我寫(xiě)了一個(gè) aardio 擴(kuò)展庫(kù) web.prism 。關(guān)于 WebView2 請(qǐng)參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開(kāi)發(fā)獨(dú)立 EXE 程序
2、因?yàn)?Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調(diào)用 getComputedStyle 獲取最終渲染的字體顏色屬性。
3、最后在 JavaScript 里調(diào)用 aardio 函數(shù)處理生成的 HTML 代碼塊，aardio 的任務(wù)是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問(wèn)題。然后調(diào)用 win.clip.html 將處理好的 HTML 復(fù)制到系統(tǒng)剪貼板：
import win.clip.html;
var cb = win.clip.html();
cb.write(html); 然后只要愉快地粘貼代碼塊就可以。
如果是 aardio 代碼不需要用這個(gè)工具，在 aardio 編輯器里右鍵直接點(diǎn)『 復(fù)制全部到 HTML 代碼塊 』就可以了：
《vite+vue3實(shí)現(xiàn)網(wǎng)頁(yè)版編輯器，帶高亮以及代碼提示（以SQL語(yǔ)言為例）》
## 引言：探索Vite與Vue3結(jié)合構(gòu)建高效Web應(yīng)用
隨著前端技術(shù)的飛速發(fā)展，Vite和Vue3已成為現(xiàn)代Web開(kāi)發(fā)領(lǐng)域的熱門(mén)工具。Vite以其快速冷啟動(dòng)、熱更新等特性讓開(kāi)發(fā)者享受前所未有的開(kāi)發(fā)體驗(yàn)；而Vue3則憑借其優(yōu)秀的組件化設(shè)計(jì)與Composition API，極大地提高了開(kāi)發(fā)效率和代碼可維護(hù)性。本文將引導(dǎo)您如何利用這兩者搭建一款功能齊全、性能卓越的網(wǎng)頁(yè)版SQL編輯器，包括代碼高亮顯示及智能提示等功能。
## 一、項(xiàng)目初始化與環(huán)境配置
### 1. 創(chuàng)建項(xiàng)目
首先，確保已安裝Node.js和npm。然后通過(guò)Vite創(chuàng)建一個(gè)基于Vue3的新項(xiàng)目：
```bash
npm create vite@latest my-sql-editor --template vue
cd my-sql-editor
npm install
```
### 2. 安裝相關(guān)依賴
為了實(shí)現(xiàn)實(shí)時(shí)語(yǔ)法高亮和代碼提示，我們需要借助`codemirror`庫(kù)及其SQL相關(guān)的插件：
```bash
npm install codemirror @codemirror/lang-sql
```
## 二、編寫(xiě)基礎(chǔ)HTML結(jié)構(gòu)與Vue組件
### 1. 在App.vue中引入CodeMirror
```html
<template>
<div id="app">
<textarea ref="editor"></textarea>
</div>
</template>
<script setup lang="ts">
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中引入并初始化了一個(gè)基本的CodeMirror編輯器，并設(shè)置SQL模式以支持初步的語(yǔ)義高亮。
## 三、實(shí)現(xiàn)SQL代碼高亮
上述代碼已經(jīng)實(shí)現(xiàn)了基礎(chǔ)的SQL高亮，CodeMirror內(nèi)置了對(duì)SQL的支持。但為了讓效果更佳，我們可以進(jìn)一步優(yōu)化配置項(xiàng)，如添加SQL關(guān)鍵字高亮等。
### 高級(jí)配置示例：
```javascript
import '@codemirror/theme-dracula'; // 引入主題樣式
import { Extension } from '@codemirror/state';
const sqlExtensions: Extension[] = [
// SQL語(yǔ)言插件
langSql(),
// 添加代碼行號(hào)
lineNumbers(),
// 設(shè)置主題
EditorView.theme({
'&': { background: '#282a36' },
'.cm-comment': { color: '#6272a4' }, // 注釋顏色
'.cm-keyword': { color: '#ff79c6' }, // 關(guān)鍵字顏色
// ...其他樣式自定義
}),
];
onMounted(() => {
const editor = CodeMirror.fromTextArea(
document.querySelector('textarea'),
{
extensions: sqlExtensions,
}
);
});
```
## 四、實(shí)現(xiàn)SQL代碼提示
CodeMirror并沒(méi)有直接提供SQL的自動(dòng)補(bǔ)全功能，但我們可以通過(guò)自定義擴(kuò)展來(lái)實(shí)現(xiàn)。這里我們使用`hint`和`autocomplete`插件配合自定義數(shù)據(jù)源實(shí)現(xiàn)SQL代碼提示。
### 實(shí)現(xiàn)代碼提示功能：
```javascript
// 假設(shè)我們有一個(gè)包含所有SQL關(guān)鍵字和函數(shù)的數(shù)組
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('@')) { // 示例：針對(duì)特定字符開(kāi)頭觸發(fā)提示
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);
```
## 結(jié)語(yǔ)：進(jìn)階優(yōu)化與未來(lái)展望
至此，我們已成功利用Vite+Vue3構(gòu)建了一個(gè)具備SQL高亮和代碼提示功能的網(wǎng)頁(yè)版編輯器。然而，為了提升用戶體驗(yàn)，還可以在此基礎(chǔ)上進(jìn)行諸如錯(cuò)誤檢測(cè)、實(shí)時(shí)預(yù)覽查詢結(jié)果等更多高級(jí)功能的開(kāi)發(fā)。同時(shí)，對(duì)于SQL提示的完善，可以考慮接入數(shù)據(jù)庫(kù)API獲取實(shí)時(shí)表結(jié)構(gòu)信息，實(shí)現(xiàn)更精準(zhǔn)的智能提示。希望本文能為您的前端開(kāi)發(fā)之旅注入新的靈感與動(dòng)力，讓我們一起在前端世界里創(chuàng)造更多可能！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
