《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獲取實時表結構信息，實現更精準的智能提示。希望本文能為您的前端開發之旅注入新的靈感與動力，讓我們一起在前端世界里創造更多可能！

AVA中將WORD轉換為HTML導入到CKEDITOR編輯器中（解決圖片問題，樣式，非常完美），ckeditor粘貼word,ckeditor3粘貼word,ckeditor4粘貼word,ckeditor5粘貼word內容，ckeditor復制word圖片，ckeditor復制粘貼word圖片，ckeditor復制word內容，ckeditor粘貼word圖片，復制word圖片粘貼到ckeditor，

前端用了VUE2,VUE3，React，HTML5，也是一個新項目，為了方便用的這些框架，實際上這個是無所謂，功能的實現和前端這些框架沒什么關系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot，功能實現和后端用的什么開發語言無關，后端只提供一個文件上傳的接口，HTTP form協議，圖片上傳時會調這個接口。

編輯器是ckeditor5，為ckeditor編輯器增加粘貼Word圖片的功能，支持快捷鍵操作（Ctrl+V），支持多種系統：Windows,macOS,Linux,信創國產化環境，中標麒麟，銀河麒麟，統信，龍芯。

支持word粘貼，word內容粘貼,word圖文粘貼,word圖片粘貼，粘貼后圖片能夠自動上傳到服務器中，然后將圖片和內容HTML添加到編輯器中，上傳接口地址能夠自定義

用戶使用操作起來更方便一些，一般發新聞，或者發文章用的比較多，基本上每天發新聞，發文章都會用到，

這個功能確實為用戶帶來了方便。

1.1. 集成到CKEditor3.x

主要步驟如下：

1.上傳WordPaster文件夾

一般將WordPaster.cab放在WordPaster目錄下。

2.上傳CKEditor插件目錄

3.引入JS，初始化控件

注意：不要重復引入jquery，如果您的項目已經引入了jq，則不用再引入jq-1.4

如果希望添加到默認工具欄中，請修改ckeditor.js，在toolbar_Full中增加imagepaster,netpaster

為ckeditor增加插件(imagepaster,netpaster,pptpaster,pdfimport)：

注意：

1.如果接口字段名稱不是file，請配置FileFieldName。ueditor接口中使用的upfile字段

參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，請配置ImageMatch

參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的圖片地址沒有域名，請配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權限驗證（登陸驗證，SESSION驗證），請配置COOKIE。或取消權限驗證。
參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

常見問題：

1.為什么整合到項目中圖片無法上傳？
請先測試接口：http://www.ncmem.com/doc/view.aspx?id=61f361025c9247098f6a15c3dfc53db5

TML編輯器 復制WORD里面帶圖文的文章，圖片可以直接顯示，JSP – 支持WORD上傳的富文本編輯器，EWEBEDITOR 從WORD中復制內容帶多張圖片，如何從WORD文檔復制公式到富文本編輯器，復制word圖片，從word中復制圖片,

從word中粘貼圖片，粘貼word內容，粘貼word圖片，粘貼word圖文，復制粘貼word文檔，復制粘貼word圖片，復制粘貼word圖文，復制粘貼word內容，

之前在網上找過相關的資料，論壇里面也有網友交流過，還加過不少QQ群和微信群，但是結果都不太令人滿意。相關的文章提問的人多，能夠給出方案的人少，能夠給出成熟產品的就更少了，說的直接一點根本就沒有，純屬浪費時間。要示例沒示例，要代碼沒代碼，根本就用不了，

有幾個方面的原因吧，一個是網上的資料提的一些都是開源的方案，也不是說開源的方案不行，關鍵是提到的這些方案，公司項目組去評估發現聯系不到開發人員，而且方案本身也停止更新了，處于沒有人維護的狀態，所以項目組這邊不太敢用。主要是之前在這塊也踩過坑。

客戶那邊也不差這點錢，之前公司項目組就是在這塊踩過坑，用了開源的方案，客戶那邊提了一個新需求，但是由于項目組對產品本身并不熟悉，導致沒辦法進行二次開發。

從word中復制圖片和文字內容，然后粘貼到web富文本編輯器中，粘貼后word圖片自動上傳到web服務器中，自動將圖片和文字HTML添加到編輯器中，保留word中的文字格式，文字顏色，字體，樣式，

用戶發布新聞的時候是從word里面復制圖片和文字，然后將word圖文內容粘貼到web富文本編輯器中，希望能夠將word的圖片自動上傳到服務器中，服務器地址能夠自定義，

后端的話需要支持任意開發語言，比如ASP,ASP.NET,JSP,PHP,PYTHON等。只要是基于標準HTTP協議的都要支持。如果能夠不裝控件最好，視頻教程：https://www.ixigua.com/7233953214108795407

1.下載示例：

http://www.ncmem.com/webapp/wordpaster/versions.aspx

2.復制WordPaster插件目錄

3.引入插件文件

注意：不要重復引入jquery，如果您的項目已經引入了jq，則不用再引入jq-1.4

4.在工具欄中增加插件按鈕

6.初始化控件

注意：

1.如果接口字段名稱不是file，請配置FileFieldName。ueditor接口中使用的upfile字段

參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，請配置ImageMatch

參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的圖片地址沒有域名，請配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936

4.如果接口有權限驗證（登陸驗證，SESSION驗證），請配置COOKIE。或取消權限驗證。

參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

效果

訂閱版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/

年費版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/

OEM版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY

產品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr
授權碼生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwzYuEEY1