Vue3 + Tsx 集成 ace-editor编辑器

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'){//管理员读写
                setReadOnly=false
            }
            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}
                   centered
                   onCancel={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

效果如下：

最后注意默认情况下，ace editor 的高度是0，所以必须设置它的高度后，才能显示出放入 v-model:value 的内容，否则是不显示的，设置高度的两种方式，一种是通过 style 设置 height，另外一种是设置 min 和 max lines

复制代码

style="height: 300px"
//或者设置属性
minLines="100"
maxLines="100"

总结

整体使用下来的体验还是非常不错的，用来显示json，html，groovy，yaml或者一些代码的语法高亮非常丝滑，有需要用到编辑器功能的小伙伴可以尝试一把