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

您的项目需求