HTML 编辑器

TML编辑器是一种用于创建、编辑和预览HTML（超文本标记语言）代码的工具或应用程序。它提供了一个直观的界面，使用户能够轻松地编写和设计网页内容。本文主要介绍HTML 常用编辑器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。

参考文档：https://www.cjavapy.com/article/3299/

1、Visual Studio Code（VS Code ）

Visual Studio Code（简称VS Code）是一款由微软开发的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。VS Code是一款轻量级的代码编辑器，启动迅速，占用资源少。VS Code提供了丰富的扩展和插件，可以根据需求安装插件来增强编辑器功能。

1）安装和配置

官网地址：Visual Studio Code - Code Editing. Redefined

根据操作系统下载并安装相应版本的VS Code。打开VS Code后，可以根据自己的喜好配置编辑器设置，如主题、字体等。

2）新建HTML文件

在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3）编辑HTML文件

在VS Code中，点击左上角的"文件"菜单，选择"打开文件"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。

在编辑器中可以直接修改HTML文件的内容。VS Code会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。

4）插件推荐

HTML CSS Support：提供对HTML和CSS的支持，包括代码片段、自动补全等功能。

Live Server：启动一个本地开发服务器，实时预览HTML页面的效果。

Prettier：格式化HTML代码，使代码结构更整洁。

Auto Close Tag：自动闭合HTML标签，提高编码效率。

Bracket Pair Colorizer：对成对的括号进行着色，方便识别代码块。

2、Sublime Text

Sublime Text是一款流行的跨平台源代码编辑器，支持Windows、macOS和Linux等多种操作系统。它被广泛用于Web开发，包括编辑HTML、CSS、JavaScript等前端技术。

Sublime Text的界面非常简洁，没有多余的菜单和工具栏，更便于专注于代码编辑。Sublime Text支持多种编程语言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text拥有强大的插件系统，用户可以根据需要安装插件来扩展编辑器功能。用户可以自定义快捷键、主题、颜色方案等，以满足个性化需求。Sublime Text启动迅速，响应快速，适合于快速编辑代码。

1）安装和配置

官网地址：Sublime Text - Text Editing, Done Right

根据操作系统下载并安装相应版本的Sublime Text。打开Sublime Text后，可以根据自己的喜好进行编辑器设置，如字体、主题等。

2）新建HTML文件

在Sublime Text 安装完成后，选择" File->New File "，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3）编辑HTML文件

在Sublime Text中，点击左上角的"File"菜单，选择"Open File"，或者使用快捷键Ctrl+O（Windows）或Cmd+O（macOS）来打开HTML文件。在编辑器中可以直接修改HTML文件的内容。Sublime Text会自动识别HTML标记，并提供代码高亮和智能提示功能。编辑完成后，使用快捷键Ctrl+S（Windows）或Cmd+S（macOS）来保存HTML文件。

4）插件推荐

Emmet：提供HTML/CSS快速编写和自动完成功能，可以大大提高编码效率。

Sublime Linter：对代码进行实时语法检查，帮助发现潜在的错误和警告。

Color Highlighter：对CSS中的颜色进行高亮显示，方便调试和修改样式。

SideBarEnhancements：增强侧边栏功能，提供更多文件操作选项。

3、Dreamweaver

Dreamweaver是由Adobe公司开发的一款全球知名的网页设计和开发工具。它为开发人员和设计师提供了一个可视化的界面，可以直观地创建和编辑网页内容，同时也支持手动编辑代码。Dreamweaver提供可视化界面，可以直观地拖拽和编辑网页元素，无需手动编写代码。除了可视化界面，Dreamweaver也支持手动编辑代码，适合于开发人员和设计师。Dreamweaver可在Windows和macOS等多个平台上运行。Dreamweaver集成了代码编辑器、预览窗口、文件管理器等功能，提供全面的开发环境。

1）安装和配置

官网地址：Website design software | Adobe Dreamweaver

根据操作系统下载并安装相应版本的Dreamweaver。打开Dreamweaver后，，根据需要进行编辑器设置，如界面语言、字体、代码颜色等。

2）编辑HTML文件

在Dreamweaver中，点击左上角的"File"菜单，选择"New"，然后选择"HTML"，即可新建一个空白的HTML文件。内容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

使用可视化界面，可以直接拖拽页面元素、调整布局、插入图片等。若需要手动编辑HTML代码，可以在下方的代码编辑器中进行修改。Dreamweaver会自动提供代码补全和语法高亮功能。在Dreamweaver中，可以实时预览网页效果，点击右上角的"Live View"按钮即可。

3）CSS和JavaScript支持

Dreamweaver也支持CSS和JavaScript的编辑和预览，可以帮助创建更丰富的网页效果。在编辑器中可以直接编辑CSS样式和JavaScript代码，并实时查看效果。

4）网页上传和发布

Dreamweaver集成了FTP功能，可以直接将编辑好的网页上传到服务器。点击"Site"菜单，选择"Manage Sites"，配置好站点设置，即可进行上传和发布。

5）Dreamweaver模板和库

Dreamweaver提供模板和库功能，可以保存和复用常用的网页元素和样式，提高开发效率。

参考文档：https://www.cjavapy.com/article/3299/

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

页编辑器是书写HTML、CSS等代码的工具软件。一般常用的网页编辑器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如图1.8所示为常用的网页编辑器的图标。本教材采用Dreamweaver网页编辑器版本为CS6。Dreamweaver简称“DW”，具备完美的代码提示功能和强大的辅助操作，因此它非常容易上手，是一款适合初学者学习和使用的网页编辑器。下面和千锋广州HTML5小编一起来看看吧！

图1.1 常用网页编辑器

接下来讲解如何使用Dreamweaver网页编辑器进行网页编程，软件的安装不再介绍，直接讲解软件安装后如何使用。

运行DW软件，进入软件界面，选择菜单栏中【文件】→【新建】，打开新建文档窗口，在【文档类型】下拉列表中选择HTML5，单击【创建】按钮，如图所示，即可创建一个空白的HTML文档。

新建文档窗口

空白HTML文档

为了让初学者更好的使用DW工具，需要对DW进行一些初始化的设置，具体如下：

a) 工作区布局设置

运行DW软件，进入软件界面，将布局设置成统一的模式，选择菜单栏中选择【窗口】→【工作区布局(w)】→【经典】，如图。

初始化工作区布局

2. 必备面板

设置经典模式后，需要调出三个常用的面板，分别选择菜单栏【窗口】菜单下的【插入】、【属性】、【文件】3个命令，如图所示。

初始化必备面板

3. 新建默认文档设置

选择菜单栏中【编辑】→【首选参数】(Ctrl+U)，选中左侧【分类】中的【新建文档】，右边就会出现相应的设置，选择最常用的HTML文档类型和编码类型，本书设置为HTML5，如图所示。

默认文档设置

新建文档的首选参数设置后，新建HTML文档时，DW就会按照默认文档设置直接生成所需的代码。

4. 浏览器设置

初学者计算机必备IE浏览器和Chrome浏览器，建议讲DW的默认预览浏览器设置为“Chrome浏览器”，快捷键F12是使用主浏览器预览网页，一般把IE浏览器设为次浏览器，快捷键Ctrl+F12，如图所示。

默认浏览器设置

5. 代码提示

为了加快写代码的速度，会用到代码提示，DW中就有强大的代码提示的功能，只需在【首选参数】对话框中设置代码提示，选择【代码提示】选项，然后选中【结束标签】选项中的第二项，单击【确定】按钮即可，如图所示。

在线咨询

上一篇：CSS自动换行、强制不换行、强制断行、超出显示省略号
下一篇：「原创」用Htmlhelp Workshop制作Windows 帮助文件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 编辑器

1、Visual Studio Code（VS Code ）

2、Sublime Text

3、Dreamweaver

您的项目需求