随州什么公司做网站,西安网站开发建设,免费职业技能培训网,建设厅三类人员网站Ace Editor介绍
Ace Editor#xff08;全名#xff1a;Ajax.org Cloud9 Editor#xff09;是一个开源的代码编辑器#xff0c;旨在提供强大的代码编辑功能#xff0c;通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发#xff0c;现在由开源社区维护。
主…Ace Editor介绍
Ace Editor全名Ajax.org Cloud9 Editor是一个开源的代码编辑器旨在提供强大的代码编辑功能通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发现在由开源社区维护。
主要有以下特点
超过110种语言的语法高亮可以导入TextMate/Sublime Text的.tmlanguage文件20多种主题可以导入TextMate/Sublime Text的.tmtheme文件自动缩进和取消缩进可选的命令行界面处理大型文档似乎上限为四百万行完全可定制的按键绑定包括vim和Emacs模式支持正则表达式的搜索和替换突出显示匹配的括号可在软制表符和实际制表符之间切换显示隐藏字符使用鼠标拖放文本自动换行代码折叠多光标和多选实时语法检查器当前支持JavaScript、CoffeeScript、CSS和XQuery剪切、复制和粘贴功能
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: 请求处理中请稍候......,editorMinLines: 50,editorMaxLines: 200})const closeModal () {ctx.emit(update:show)ctx.emit(updateList)}onMounted(() {})function editorInit(editor) {let setReadOnly true// 默认非管理员只读if( user.getUser.admin.toString() true){//管理员读写setReadOnlyfalse}editor.setOptions({ // 设置代码编辑器的样式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}取消/ButtonButton type{primary} onClick{this.onSubmit}提交/Button/}}TabsTabPane key{1} tab{Deployment} VAceEditor v-model:value{this.item.k8sDeployYaml} onInit{this.editorInit} langyaml themechrome minLines{this.editorMinLines} maxLines{this.editorMaxLines}//TabPane/Tabs/Modal/div)}
})export default ApplicationYamlEdit 效果如下 最后注意默认情况下ace editor 的高度是0所以必须设置它的高度后才能显示出放入 v-model:value 的内容否则是不显示的设置高度的两种方式一种是通过 style 设置 height另外一种是设置 min 和 max lines styleheight: 300px
//或者设置属性
minLines100
maxLines100总结
整体使用下来的体验还是非常不错的用来显示jsonhtmlgroovyyaml或者一些代码的语法高亮非常丝滑有需要用到编辑器功能的小伙伴可以尝试一把
