Ace Editor介紹

Ace Editor（全名：Ajax.org Cloud9 Editor）是一個(gè)開(kāi)源的代碼編輯器，旨在提供強(qiáng)大的代碼編輯功能，通常用于構(gòu)建基于Web的代碼編輯應(yīng)用程序。它最初由Cloud9 IDE開(kāi)發(fā)，現(xiàn)在由開(kāi)源社區(qū)維護(hù)。

主要有以下特點(diǎn)：

1. 超過(guò)110種語(yǔ)言的語(yǔ)法高亮（可以導(dǎo)入TextMate/Sublime Text的.tmlanguage文件）
2. 20多種主題（可以導(dǎo)入TextMate/Sublime Text的.tmtheme文件）
3. 自動(dòng)縮進(jìn)和取消縮進(jìn)
4. 可選的命令行界面
5. 處理大型文檔（似乎上限為四百萬(wàn)行！）
6. 完全可定制的按鍵綁定，包括vim和Emacs模式
7. 支持正則表達(dá)式的搜索和替換
8. 突出顯示匹配的括號(hào)
9. 可在軟制表符和實(shí)際制表符之間切換
10. 顯示隱藏字符
11. 使用鼠標(biāo)拖放文本
12. 自動(dòng)換行
13. 代碼折疊
14. 多光標(biāo)和多選
15. 實(shí)時(shí)語(yǔ)法檢查器（當(dāng)前支持JavaScript、CoffeeScript、CSS和XQuery）
16. 剪切、復(fù)制和粘貼功能

Vue3 集成 Ace Editor

安裝

npm install vue3-ace-editor --save

使用

import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
import modeJson from 'ace-builds/src-noconflict/mode-json';
import modeYaml from 'ace-builds/src-noconflict/mode-yaml';
import modeGroovy from 'ace-builds/src-noconflict/mode-groovy';
import themeChrome from 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/ext-language_tools';
import { config } from "ace-builds";// 配置 ace  editor
config.setModuleUrl("ace/mode/chrome", themeChrome);
config.setModuleUrl("ace/mode/yaml", modeYaml);
config.setModuleUrl("ace/mode/json", modeJson);
config.setModuleUrl("ace/theme/github", modeGroovy);
ace.require("ace/ext/language_tools");const ApplicationYamlEdit = defineComponent({name: 'ApplicationYamlEdit',props,emits: ['update:show', 'updateList'],setup(props,ctx) {const user = useInfoStore()const router = useRouter()const { message, modal, notification } = useGloablStore()const formRef = ref()const variables = reactive({app: new AoneApplicationModel(),currentUserGroupList: user.getUser.group.split(CookieSplit.SEPARATOR),items: [],showSpinning: false,spinTips: "請(qǐng)求處理中，請(qǐng)稍候......",editorMinLines: 50,editorMaxLines: 200})const closeModal = () => {ctx.emit('update:show')ctx.emit('updateList')}onMounted(() => {})function editorInit(editor) {let setReadOnly = true// 默認(rèn)非管理員只讀if( user.getUser.admin.toString() === 'true'){//管理員讀寫(xiě)setReadOnly=false}editor.setOptions({  // 設(shè)置代碼編輯器的樣式enableBasicAutocompletion: true,enableSnippets: true,enableLiveAutocompletion: true,tabSize: 2,fontSize: 15,readOnly: setReadOnly,showPrintMargin: false   //去除編輯器里的豎線})}return {...toRefs(variables),closeModal, formRef, onSubmit, editorInit}},render() {return (<div class={"overscroll-contain"}><AoneSpin v-model:spinning={this.showSpinning}/><Modal zIndex={10}class={styles.antModal}bodyStyle={{ height:"calc(100vh - 65px - 53px) ", overflowY: "auto" }}maskClosable={false}open={this.show}centeredonCancel={this.closeModal}v-slots={{title: () => <span class={""} >Ace Editor 使用</span>,footer: () => <><Button onClick={this.closeModal}>取消</Button><Button type={"primary"} onClick={this.onSubmit}>提交</Button></>}}><Tabs><TabPane key={"1"} tab={"Deployment"} ><VAceEditor v-model:value={this.item.k8sDeployYaml} onInit={this.editorInit} lang="yaml" theme="chrome" minLines={this.editorMinLines} maxLines={this.editorMaxLines}/></TabPane></Tabs></Modal></div>)}
})export default ApplicationYamlEdit

效果如下：

最后注意默認(rèn)情況下，ace editor 的高度是0，所以必須設(shè)置它的高度后，才能顯示出放入 v-model:value 的內(nèi)容，否則是不顯示的，設(shè)置高度的兩種方式，一種是通過(guò) style 設(shè)置 height，另外一種是設(shè)置 min 和 max lines

style="height: 300px"
//或者設(shè)置屬性
minLines="100"
maxLines="100"

總結(jié)

整體使用下來(lái)的體驗(yàn)還是非常不錯(cuò)的，用來(lái)顯示json，html，groovy，yaml或者一些代碼的語(yǔ)法高亮非常絲滑，有需要用到編輯器功能的小伙伴可以嘗試一把