一种提高自定义代码编辑器开发效率的方法与流程

文档序号:37178259发布日期:2024-03-01 12:33阅读:18来源:国知局
本发明代码开发领域,尤其涉及一种提高自定义代码编辑器开发效率的方法。
背景技术
::1、前端主流的编辑器插件主要有codemirror,monaco editor等,无论使用那种插件都需要配置外观,支持语言及一系列辅助参数。前端开发过程中遇到需要用户写代码的需求时,目前大多数的解决方案都是利用开源的编辑器进行二次开发,在开发过程首先需要阅读官方api文档,再根据文档在代码中进行一系列复杂的配置及业务开发,如果想实现更复杂的功能,那么学习和开发成本则更高一些。2、现有技术仅解决了用户使用编辑器的基本需求,更多场景下需要更友好的代码联想提示、语法校验,错误提示等并未能很好地进行支持,而且开发人员需要花费一定的学习成本来进行代码开发。技术实现思路1、本发明的目的在于,针对解决编辑器自定义开发学习成本高和开发难度较大,及无法智能提示错误信息的技术问题,提出一种提高自定义代码编辑器开发效率的方法。2、一种提高自定义代码编辑器开发效率的方法,步骤为:3、s1:前期工作:安装依赖包、创建文件结构;4、s2:实现过程:引入编辑器并配置组件功能;5、s3:使用过程:开发人员导入组件,根据业务传入属性。6、进一步的,一种提高自定义代码编辑器开发效率的方法,所述步骤s1还包括以下子步骤:7、s11:在开发项目工程下安装codemirror6插件的依赖包;8、s12:在项目路径下创建相关文件路径结构。9、进一步的,一种提高自定义代码编辑器开发效率的方法,所述相关文件路径结构包括codemirror目录、components目录、hinttooltip目录、utils目录、index.tsx文件、interface.ts文件;10、所述codemirror目录下实现编辑器的核心功能,包括各种配置及自定义扩展;11、所述components目录下解决方案需要的其他组件;12、所述hinttooltip目录下提示框弹窗组件;13、所述utils目录下解决方案用到的所有通用方法;14、所述index.tsx文件为组件的入口文件,是向外导出共开发人员使用的组件;15、所述nterface.ts文件定义解决方案组件的参数。16、进一步的,一种提高自定义代码编辑器开发效率的方法,所述步骤s2还包括以下子步骤:17、s21:在index.tsx文件中引入两个codemirror目录下的组件,一个作为正常编辑器,一个作为内置的放大编辑器;18、s22:在codemirror目录下根据方法文档配置编辑器的各种扩展方法;19、s23:在编辑器中通过nterface.ts文件读取参数设置编辑器代码类型;20、所述代码类型包括表达式、方法;21、s24:设置用户语言类型,支持的语言包括javascript、java、sql、html;22、s25:在hinttooltip目录下提示用户输入的内容是否正确;23、s26:引入nterface.ts文件,自定义提示补全代码,hinttooltip目录下显示提示备注;24、s27:对外提供可操作编辑器的方法;25、s28:设置无需学习成本的属性改变编辑器的外观;26、所述属性包括height、maxheight、minheight、width、maxwidth、minwidth、editable、readonly、placeholder。27、进一步的,一种提高自定义代码编辑器开发效率的方法,所述正常编辑器和放大编辑器内容同步,当用户编辑小篇幅的页面时使用正常编辑器,当用户编辑大篇幅的页面时弹出放大编辑器进行编辑。28、进一步的,一种提高自定义代码编辑器开发效率的方法,所述提示时机为用户输入表达式时,根据传入参数的期望值类型和表达式的执行结果进行提示。29、进一步的,一种提高自定义代码编辑器开发效率的方法,所述语言使用javascript时,进行实时的语法校验,明确标识出报错位置及报错信息。30、进一步的,一种提高自定义代码编辑器开发效率的方法,所述s27还包括以下子步骤:31、s271:提供可操作编辑器的设置焦点、设置焦点位置、获取焦点位置的方法;32、s272:编辑器获取焦点和失去焦点时,调用执行外部传入的方法。33、本发明的有益效果:通过一种提高自定义代码编辑器开发效率的方法,解决了编辑器自定义开发学习成本高和开发难度较大,及无法智能提示错误信息的问题,能够即引入即使用,配置参数简单易懂,并且在基础用法的基础上,提供了更加丰富的功能且用户体验更友好化,让开发人员使用更自如。技术特征:1.一种提高自定义代码编辑器开发效率的方法,其特征在于,步骤为:2.根据权利要求1所述的一种提高自定义代码编辑器开发效率的方法,其特征在于,所述步骤s1还包括以下子步骤:3.根据权利要求2所述的一种提高自定义代码编辑器开发效率的方法,其特征在于,所述相关文件路径结构包括codemirror目录、components目录、hinttooltip目录、utils目录、index.tsx文件、interface.ts文件;4.根据权利要求1所述的一种提高自定义代码编辑器开发效率的方法,其特征在于,所述步骤s2还包括以下子步骤:5.根据权利要求4所述的一种提高自定义代码编辑器开发效率的方法,其特征在于,所述正常编辑器和放大编辑器内容同步,当用户编辑小篇幅的页面时使用正常编辑器,当用户编辑大篇幅的页面时弹出放大编辑器进行编辑。6.根据权利要求4所述的一种提高自定义代码编辑器开发效率的方法,其特征在于,所述提示时机为用户输入表达式时,根据传入参数的期望值类型和表达式的执行结果进行提示。7.根据权利要求4所述的一种提高自定义代码编辑器开发效率的方法,其特征在于,所述语言使用javascript时,进行实时的语法校验,明确标识出报错位置及报错信息。8.根据权利要求4所述的一种提高自定义代码编辑器开发效率的方法,其特征在于,所述s27还包括以下子步骤:技术总结本发明公开了一种提高自定义代码编辑器开发效率的方法,步骤为:S1:前期工作:安装依赖包、创建文件结构;S2:实现过程:引入编辑器并配置组件功能;S3:使用过程:开发人员导入组件,根据业务传入属性。通过一种提高自定义代码编辑器开发效率的方法解决了编辑器自定义开发学习成本高和开发难度较大,无法智能提示错误信息的问题,能够即引入即使用,配置参数简单易懂,并且在基础用法的基础上,提供了更加丰富的功能且用户体验更友好化,让开发人员使用更自如。技术研发人员:朱思禹,田吉,李佳,刘彪,娄江南,李成,杨爽,牛建平,孙大臣,管春元,谢斌,焦质晔,滕训超,孙增强受保护的技术使用者:启明信息技术股份有限公司技术研发日:技术公布日:2024/2/29
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1