圖文詳解如何在Vue專案中整合Ace程式碼編輯器
前言
在整合Ace過程中發現網路搜到資料比較零碎,且中文資料比較少,本文主要做一些記錄和整理,方便後續查閱
- 在Vue專案中整合Ace程式碼編輯器
- Ace配置項目的中文對照
- 踩坑:解決Ace editor 遊標錯位問題
- #最佳化:按需使用ace-builds
簡介
Ace 是一個用JavaScript 編寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器 ,並且是 Mozilla Skywriter (Bespin) 專案的繼承者。
- Ace官網
- #線上demo: ace.c9.io/build/kitch…
- # #特性
- 超過110 種語言的
- 語法高亮顯示 (可匯入TextMate/Sublime Text
- .tmlanguage檔案)
- #超過20 個主題(可以匯入TextMate/Sublime Text
- .tmtheme檔案)
- 自動縮排和升級
- 一個可選的命令列
- #處理巨大的文檔(四百萬行似乎是極限!)
完全可自訂的鍵綁定,包括vim 和Emacs 模式
使用正則表達式搜尋和替換使用滑鼠拖放文字
#換行
程式碼折疊
多個遊標和選擇
快速開始
vue2-ace-editor ,依照步驟整合即可
這裡主要記錄使用ace-builds,在專案中自己封裝Ace元件#安裝
npm install ace-builds --save-dev复制代码
安裝完的效果如下:
#整合
#在AceEditor文件,新建index.vue,程式碼如下:關於webpack-resolver.js的最佳化<template> <div ref="editorform" style="height: 250px" > </div> </template> <script> import ace from 'ace-builds' import './webpack-resolver' // 自定义webpack-resolver,按需引入 import 'ace-builds/src-noconflict/mode-json' import 'ace-builds/src-noconflict/mode-mysql' import 'ace-builds/src-noconflict/mode-text' import 'ace-builds/src-noconflict/theme-tomorrow' import 'ace-builds/src-min-noconflict/ext-language_tools' import { onMounted, onBeforeUnmount, ref, watch } from '@vue/composition-api' export default { name: 'AceEditor', emits: ['onChange'], props: { value: { type: String, default: '', }, // 这里可以接收更多组件传递的参数,做一些自定义效果 }, setup(props, vm) { let editor = null const editorform = ref(null) let options = { theme: 'ace/theme/tomorrow', // 主题 mode: 'ace/mode/mysql', // 代码匹配模式 tabSize: 2, //标签大小 fontSize: 14, //设置字号 wrap: true, // 用户输入的sql语句,自动换行 enableSnippets: true, // 启用代码段 showLineNumbers: true, // 显示行号 enableLiveAutocompletion: true, // 启用实时自动完成功能 (比如:智能代码提示) enableBasicAutocompletion: true, // 启用基本自动完成功能 scrollPastEnd: true, // 滚动位置 highlightActiveLine: true, // 高亮当前行 } const init = () => { if (editor) { //实例销毁 editor.destroy() } //初始化 editor = ace.edit(editorform.value, options) editor.setValue(props.value ? props.value : '') // 设置内容 editor.on('change', () => { vm.emit('onChange', editor.getValue()) }) } onMounted(() => { init() }) onBeforeUnmount(() => { editor.destroy() editor.container.remove() }) return { editorform } }, } </script> <style> @import '~ace-builds/css/ace.css'; </style>登入後複製
在webpack 環境中需要導入webpack-resolver.js,我們先看下node_modules/ace-builds/webpack-resolver .js文件,裡面大部分模組是我們用不到的,直接引入的話,會大大增加項目包的體積,所以這裡我們需要做下優化:按需引入
在AceEditor文件,新建webpack-resolver.js, 程式碼如下:
ace.config.setModuleUrl('ace/mode/mysql', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-mysql.js')) ace.config.setModuleUrl('ace/mode/text', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-text.js')) ace.config.setModuleUrl('ace/mode/json', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-json.js')) ace.config.setModuleUrl('ace/theme/tomorrow', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-tomorrow.js')) ace.config.setModuleUrl('ace/ext/language_tools', require('file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js'))
在專案的src目錄下,新建registAce.js
import ACE from '@/components/AceEditor' // 这里是你创建的AceEditor文件夹的路径 export default { install(Vue) { Vue.component('ace', ACE) }, }
在Vue 專案的入口檔案main.js 中引入Ace 模組, Vue.use()全域註冊ace元件
import ace from 'ace-builds' import RegistAce from './registAce' Vue.use(ace) Vue.use(RegistAce)
<ace v-model="content" @onChange="onChange"> </ace>
Ace官網設定項目
setOption(optionName, optionValue) setOptions({ optionName : optionValue ... }) getOption(optionName) getOptions()
editor options
選項名稱 | #值類型 | 預設值 | #可選值 | 功能 |
---|---|---|---|---|
selectionStyle | #String | text | line | text | 選取樣式 |
highlightActiveLine | Boolean | true | - | 高亮目前行 |
highlightSelectedWord | Boolean | #true | - | 高亮選取文字 |
#readOnly | Boolean | false | - | 是否只讀 |
cursorStyle | String | ace | ace | slim | smooth | wide | 遊標樣式 |
String | Boolean | false | always | 合併撤銷 | |
Boolean | true | - | 啟用行為 | |
Boolean | true | - | 啟用換行 | |
Boolean | false | #- | 啟用捲動 | |
Boolean | true | ##- | 複製空格 | |
#useSoftTabs | Boolean | false | ||
使用軟標籤 | navigateWithinSoftTabs | Boolean | false | |
軟體標籤跳轉 | ##enableMultiselect | #Boolean | false | - |
#選項名稱 | 值類型 | 預設值 | 可選值 | |
---|---|---|---|---|
hScrollBarAlwaysVisible | Boolean | |||
- | 縱向捲總是可見 | |||
##vScrollBarAlwaysVisible | Boolean | false | - | 橫向捲軸始終可見 |
highlightGutterLine | Boolean | true | - | 高亮邊線 |
animatedScroll | Boolean | false | - | 捲動動畫 |
showInvisibles | Boolean | #false | - | 顯示不可見字元 |
showPrintMargin | Boolean | true | ##-顯示列印邊距 | |
#Number | 80 | - | ||
##設定頁邊距 | printMargin | |||
false | - | 顯示並設定頁邊距 | fadeFoldWidgets | |
false | - | 淡入摺疊元件 | showFoldWidgets | |
true | - | 顯示折疊元件 | ||
showLineNumbers | Boolean | true | ||
顯示行號 | ##showGutter | |||
#布林 | true |
顯示行號區域
Boolean | ||||
---|---|---|---|---|
# #true | - | 顯示參考線 | fontSize | |
inherit | - | 設定字號 | fontFamily | |
inherit | ||||
session options
選項名稱 | #值型別 | 預設值 | 可選值 | 備註 |
---|---|---|---|---|
firstLineNumber | Number | ##1- | #起始行號 | |
Boolean | - | - | 重做 | |
String | auto | #auto | unix |windows | #新開行模式 | |
Boolean | - | - | 使用輔助物件 | |
Boolean | - | - | 使用軟標籤 | |
##Number | - | - | 標籤大小 | |
Boolean | - | - | 換行 | |
String | - | markbegin | markbeginend | manual | 折疊樣式 | |
#String | - | ##-程式碼匹配模式,例如「ace/mode/text" |
預設值 | 可選值 | 備註 | ||
---|---|---|---|---|
- | - | 啟用基本自動完成 | enableLiveAutocompletion | |
- | - | 啟用即時自動完成 | #enableSnippets | |
# - | - | 啟用程式碼段 | enableEmmet | |
- | - | 啟用Emmet | useElasticTabstops | |
- | - | #使用彈性製表位 |
一通排查,發現是因為使用了
非等寬字體,導致計算不準確,將編輯框裡面的字體設定為等寬字體即可解決問題⚠️注意:這裡還有個小坑,在設定等寬字體時需要區分Mac、Windows
Mac 下可以使用
monospace- 字體
-
Windows 下可以使用
Consolas 字體 -
參考網站/ 原始碼
以上是圖文詳解如何在Vue專案中整合Ace程式碼編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數
