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

相关推荐
陈言必行2 天前
Unity 性能优化 之 编辑器创建资源优化( 工作流 | 场景 | 预制体)
unity·编辑器·游戏引擎
CAE虚拟与现实3 天前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
CAE虚拟与现实3 天前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实3 天前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
患得患失9493 天前
【前端】【高德地图WebJs】【知识体系搭建】面要素知识点——>多边形,圆形, 矩形,图形编辑器
前端·编辑器·高德地图·amap
网硕互联的小客服3 天前
如何解决Ubuntu下vi编辑器方向键变字母的问题?
编辑器
return(b,a%b);4 天前
VSCode 远程开发连接(glibc<2.28)
ide·vscode·编辑器
speop4 天前
vscode使用tmux技巧
ide·vscode·编辑器
人工干智能4 天前
建自己的Python项目仓库,使用工具:GitHub(远程仓库)、GitHub Desktop(版本控制工具)、VSCode(代码编辑器)
python·编辑器·github
程序员三明治4 天前
Python编辑器的安装及配置(Pycharm、Jupyter的安装)从0带你配置,小土堆视频
python·pycharm·编辑器