Vue3 + Tsx 集成 ace-editor编辑器

Ace Editor介绍

Ace Editor(全名:Ajax.org Cloud9 Editor)是一个开源的代码编辑器,旨在提供强大的代码编辑功能,通常用于构建基于Web的代码编辑应用程序。它最初由Cloud9 IDE开发,现在由开源社区维护。

主要有以下特点:

  1. 超过110种语言的语法高亮(可以导入TextMate/Sublime Text的.tmlanguage文件)
  2. 20多种主题(可以导入TextMate/Sublime Text的.tmtheme文件)
  3. 自动缩进和取消缩进
  4. 可选的命令行界面
  5. 处理大型文档(似乎上限为四百万行!)
  6. 完全可定制的按键绑定,包括vim和Emacs模式
  7. 支持正则表达式的搜索和替换
  8. 突出显示匹配的括号
  9. 可在软制表符和实际制表符之间切换
  10. 显示隐藏字符
  11. 使用鼠标拖放文本
  12. 自动换行
  13. 代码折叠
  14. 多光标和多选
  15. 实时语法检查器(当前支持JavaScript、CoffeeScript、CSS和XQuery)
  16. 剪切、复制和粘贴功能

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或者一些代码的语法高亮非常丝滑,有需要用到编辑器功能的小伙伴可以尝试一把

相关推荐
hero_heart6 小时前
vscode中c_cpp_properities.cpp文件生成和作用
ide·vscode·编辑器
FrostedLotus·霜莲8 小时前
C++主流编辑器特点比较
开发语言·c++·编辑器
DO ITNOW12 小时前
Cursor/VScode ,点击运行按钮,就打开新的终端,如何设置为在当前终端运行文件而不是重新打开终端----一招搞定篇
ide·vscode·编辑器
小妖66612 小时前
若 VSCode 添加到文件夹内右键菜单中显示
ide·vscode·编辑器
freshman_y12 小时前
VSCode遇到的一些小毛病(自动保存、运行后光标不再处于编辑区)
ide·vscode·编辑器
死也不注释1 天前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
许白掰2 天前
Linux入门篇学习——Linux 帮助手册
linux·运维·服务器·嵌入式硬件·学习·编辑器·vim
NeRF_er2 天前
使用 VScode Debug加不上断点的原因
ide·vscode·编辑器
MediaTea2 天前
Python 编辑器:Thonny
编辑器
山顶望月川3 天前
并行科技MaaS平台支持文心4.5系列开源模型调用
人工智能·机器学习·编辑器