整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

好学编程:10款代码编辑器大比拼,哪个更适合你?

好学编程:10款代码编辑器大比拼,哪个更适合你?

经社交APP-金融级私密聊天IM-加密聊天IM,聊天无迹可寻!<<<点击左侧,更多免费硬核资源下载

在编程的领域,选择一个合适的代码编辑器至关重要。本文将介绍几款流行的代码编辑器,并比较它们的特点,帮助你找到最适合自己的工具。

Visual Studio Code(VS Code)是微软推出的免费、开源、跨平台代码编辑器。它以其丰富的插件生态和智能代码补全功能而受到开发者的喜爱。虽然内存占用较大且启动速度稍慢,但它的免费特性使其成为许多开发者的首选。


Sublime Text是一款轻量级编辑器,以其简洁的界面和强大的插件生态系统而闻名。虽然它是一款商业软件,但它的多光标编辑和多重选择功能提高了编码效率,使许多开发者愿意为之付费。

Atom是GitHub开发的免费、跨平台代码编辑器,用户可以根据喜好定制插件和主题。它支持实时预览,适合网页开发者。尽管内存占用较多,启动速度较慢,但它的可定制性使其成为不错的选择。

PyCharm是JetBrains开发的针对Python的集成开发环境(IDE)。它提供了强大的Python语法检查、智能代码补全和调试功能,使Python开发更加便捷。尽管一些高级功能需要付费,内存占用较多,但专业性使其成为Python开发者的首选。


Eclipse是一个开放源代码的集成开发环境(IDE),主要用于Java开发。它的插件生态系统丰富,支持多种编程语言。尽管内存占用较多,性能较慢,但强大的调试功能使其在Java开发者中广受欢迎。

IntelliJ IDEA是另一款面向Java的集成开发环境,提供强大的代码补全、代码导航和重构功能。虽然内存占用较多,但良好的Java开发支持使其成为许多Java开发者的选择。

Notepad++是适用于Windows的免费开源文本编辑器,支持多种编程语言,具有语法高亮、代码折叠和宏录制等功能。它的启动速度快,内存占用少,但跨平台支持较差。

Vim是一款经典的文本编辑器,适用于多种操作系统。它具有强大的命令行操作能力和可扩展性,支持多种编程语言的开发。虽然学习曲线陡峭,但一旦掌握,它是编程的强大工具。


Xcode是苹果公司开发的集成开发环境,主要用于macOS和iOS应用程序的开发。它提供了丰富的调试工具和界面设计工具,支持多种编程语言。尽管只适用于苹果操作系统,但它对于macOS和iOS开发者来说是不可或缺的工具。

Brackets是面向Web前端开发的免费开源代码编辑器,特别适用于HTML、CSS和JavaScript的开发。它具有实时预览、内联编辑和代码提示等功能。尽管插件生态相对较少,但它是Web前端开发者的好选择。

以上就是本次分享的内容,如果你想要学习更多的编程技巧,欢迎持续关注我们!

《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

<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中引入并初始化了一个基本的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获取实时表结构信息,实现更精准的智能提示。希望本文能为您的前端开发之旅注入新的灵感与动力,让我们一起在前端世界里创造更多可能!

家好,我是Echa.

富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器,所见即所得(WYSIWYG)的文本编辑器。今天就来介绍 10 款式前端开发常用的富文本编辑器插件!

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