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

相关推荐
小妖6668 小时前
vscode 源码编译
ide·vscode·编辑器
focksorCr11 小时前
在VsCode上使用开发容器devcontainer
ide·vscode·编辑器
gaog2zh18 小时前
100201组件拆分_编辑器-react-仿低代码平台项目
前端·react.js·编辑器
死也不注释2 天前
【第一章编辑器开发基础第二节编辑器布局_1水平与垂直布局(1/4)】
编辑器
死也不注释2 天前
【第一章编辑器开发基础第一节绘制编辑器元素_7折叠面板控件(7/7)】
编辑器
死也不注释2 天前
【第一章编辑器开发基础第一节绘制编辑器元素_6滑动条控件(6/7)】
android·编辑器
zpjing~.~3 天前
VSCODE 选中多行 需要同时按住alt键才可以
ide·vscode·编辑器
HealthScience3 天前
vscode/cursor怎么自定义文字、行高、颜色(settings.json)
ide·vscode·编辑器
Despacito0o3 天前
ESP32S3+VSCode+PlatformIO+Arduino+Freertos开发入门指南:基于Arduino框架的应用开发全流程
ide·vscode·编辑器
lemoncat83 天前
简单2步配置CadenceSkill开发编辑器,支持关键字高亮
编辑器·sublime text