vite+vue3实现网页版编辑器，带高亮以及代码提

vite+vue3实现网页版编辑器，带高亮以及代码提示（SQL语言为例）

**引言**

在现代Web开发领域，Vite作为由Vue.js之父尤雨溪创建的新型前端构建工具，以其快速冷启动和高效热更新的优势深受开发者喜爱。而Vue3则是Vue生态中最新的主要版本，拥有更好的性能和更灵活的API。本文将详细介绍如何利用Vite与Vue3搭建一个具有代码高亮和自动提示功能的网页版SQL编辑器，让你的在线应用具备强大的数据处理能力。

## **一、项目初始化与依赖安装**

### 1. 创建Vite + Vue3项目

首先，使用Vite CLI创建一个新的Vue3项目：

```bash

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

cd my-sql-editor

```

### 2. 安装编辑器组件与语法高亮库

为了支持SQL编辑器的核心功能，我们需要安装Monaco Editor（由VS Code团队提供的开源Web代码编辑器）和用于SQL语法高亮的插件：

```bash

npm install monaco-editor @monaco-editor/plugin-sql

```

## **二、配置Vite并引入Monaco Editor**

### 1. 配置Vite

在`vite.config.js`中添加Monaco Editor的全局变量和CSS资源：

```javascript

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

export default defineConfig({

plugins: [vue()],

optimizeDeps: {

include: ['monaco-editor'],

build: {

rollupOptions: {

external: ['vscode-languageserver-types', 'vscode-uri'],

css: {

preprocessorOptions: {

scss: {

additionalData: `

@import './styles/variables.scss';

@import '@monaco-editor/min/vs/editor/editor.main.css';

});

```

### 2. 在主入口文件引入Monaco Editor

在`src/main.js`或`src/main.ts`中导入并初始化Monaco Editor：

```javascript

import { createApp } from 'vue';

import App from './App.vue';

import MonacoEditor from 'monaco-editor';

// 初始化Monaco Editor

MonacoEnvironment = {

getWorkerUrl: (moduleId, label) => {

return `./monaco-editor.worker.js`;

};

// 确保Monaco加载完成后再挂载应用

MonacoEditor.init().then(() => {

const app = createApp(App);

// ...其他配置如路由等

app.mount('#app');

});

```

## **三、在Vue组件中集成Monaco Editor**

### 1. 创建SQL编辑器组件

在`src/components`目录下创建`SqlEditor.vue`文件：

```html

</template>

import { ref, onMounted } from 'vue';

import * as monaco from 'monaco-editor';

const editorContainer = ref<HTMLDivElement | null>(null);

async function initEditor() {

if (!editorContainer.value) return;

const editor = monaco.editor.create(editorContainer.value, {

value: 'SELECT * FROM table_name;',

language: 'sql',

theme: 'vs-dark',

automaticLayout: true,

});

// 加载SQL语言服务以提供代码提示

await monaco.languages.sql.loadModule();

monaco.languages.registerCompletionItemProvider('sql', {

provideCompletionItems(model, position) {

// 实现SQL语句补全逻辑...

// ...

});

}

onMounted(initEditor);

</script>

```

### 2. 使用SQL编辑器组件

在`App.vue`或其他需要使用编辑器的地方引用该组件：

```html

<h1>SQL在线编辑器</h1>

</div>

</template>

import SqlEditor from '@/components/SqlEditor.vue';

export default {

components: {

SqlEditor,

};

</script>

```

## **四、实现SQL代码提示**

为了实现SQL代码提示，你需要根据Monaco Editor API编写具体的补全逻辑。这里仅展示基本框架，实际内容需要根据SQL语法解析及数据库元数据进行扩展：

```javascript

// 在initEditor函数内补充以下代码

async function initEditor() {

// ...

monaco.languages.registerCompletionItemProvider('sql', {

triggerCharacters: ['.', ',', '(', '"', "'", '`'], // 触发补全的关键字符

provideCompletionItems(model, position) {

const wordUntilPosition = model.getWordUntilPosition(position);

const range = {

startLineNumber: position.lineNumber,

endLineNumber: position.lineNumber,

startColumn: wordUntilPosition.startColumn,

endColumn: position.column,

};

// 示例：提供预定义的关键词补全

const suggestions = [

{ label: 'SELECT', kind: monaco.languages.CompletionItemKind.Keyword },

{ label: 'FROM', kind: monaco.languages.CompletionItemKind.Keyword },

// 其他关键字和表名、列名建议

// ...

];

return { suggestions, incomplete: false, range };

});

}

```

## **五、总结与展望**

通过以上步骤，我们成功地在Vite+Vue3环境中构建了一个具备基础功能的网页版SQL编辑器。虽然本教程中的代码提示部分较为简化，但你可以进一步探索基于SQL解析库和实时数据库元数据获取来完善提示功能。此外，还可以加入错误检查、格式化等功能，为用户提供更为丰富的交互体验。随着对Monaco Editor更深入的定制，这个编辑器将成为Web应用程序中强大且实用的数据管理工具。

些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 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 代码块』就可以了：

得以前刚开始接触网页制作时都是使用Microsoft FrontPage编辑器，也正因为有所见即得编辑器，才能让原本复杂难懂的HTML原始码变得更简单易懂，它将原始码转换成可视化内容，只要直接输入文字、图片、超连接后修改样式即可将网页制作出来，当然这些页面背后仍是有所谓的HTML代码存在，只在需要时才会切换原始码模式。

我后来还是很习惯通过所见即所得（What You See Is What You Get，缩写WYSIWYG）编辑器写文章，WordPress内置文章编辑功能就是此形式，有时候遇到要编辑网页也会使用这个工具来产生HTML代码，毕竟以看得到的方式编辑比较容易得到自己需要的东西，大概就是这么一回事。

现在网页编辑器已没有像十几年前那么盛行了，可能很多人的电脑里早已没有类似的应用程序，如果你还是需要这功能，HTML Editor或许可以应急，这是一款在线免费HTML可视化编辑器，直接打开浏览器就能使用，它就像一般的网页编辑器，使用者可以直接在编辑器里建立图文内容，HTML Editor会在另一画面显示HTML原始码，编辑时就能直接取得对应的原始码以便使用于博客文章或网页制作。

这功能看起来虽然好像微不足道，事实上当你需要时就会非常方便，HTML Editor不限于Windows或Mac使用，而且更重要的是不用额外下载安装软件；对于不熟悉HTML编写的使用者来说，它也能快速制作出带有样式的原始码，尤其是拿来撰写网页表格，直接使用可视化编辑器会更简单。

印象中旧版Microsoft Office也有类似功能，不过很可惜现在新版好像已经没有了。

站点名称：HTML Editor

网站连接：https://htmleditor.io/

使用教学

STEP 1

开启HTML Editor网站后，画面被切割成左右两个部分，左边为所见即所得编辑器，右边是显示原始码的字段，一开始已经有示例内容，可以看到编辑器里样式文字已经被转为我们熟悉的HTML程序码并显示于网站右侧。

STEP 2

使用方法很简单，我就不通盘介绍所有编辑器的功能，大致上比较会用到的例如格式，可以调整H1、H2、H3等不同层级的标题，亦能加入粗体、斜体、项目符号、缩排或设定对齐方向等等，其它例如插入超连接、图片或视频也都能从编辑器上方的功能按钮来做到。

我认为HTML Editor最方便的是可以拿来做网页表格，从「Table」以鼠标光标快速设定要多少字段，即可在编辑器里插入表格，同时设定每个字段要显示那些内容。如果要直接以代码来撰写表格可能稍嫌复杂，以所见即所得编辑器会简单许多。

STEP 3

当你一边在使用编辑器时，右侧就会同步显示对应的HTML代码，跟早期网页编辑器功能差不多，最后直接复制代码，就能将它复制、使用到其它地方，可以说非常好用！也不用再因为需要产生原始码而去找网页编辑器，从浏览器开启HTML Editor即可。

在线咨询

上一篇：CSS border-bottom-color 属性
下一篇：软件测试-如何使用selenium操作窗口滚动条

您的项目需求

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

整合营销服务商

vite+vue3实现网页版编辑器，带高亮以及代码提

您的项目需求