【技术实现步骤摘要】
本专利技术代码开发领域，尤其涉及一种提高自定义代码编辑器开发效率的方法。
技术介绍
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所述的
8.根据权利要求4所述的一种提高自定义代码编辑器开发效率的方法，其特征在于，所述S27还包括以下子步骤：
...【技术特征摘要】
1.一种提高自定义代码编辑器开发效率的方法，其特征在于，步骤为：
2.根据权利要求1所述的一种提高自定义代码编辑器开发效率的方法，其特征在于，所述步骤s1还包括以下子步骤：
3.根据权利要求2所述的一种提高自定义代码编辑器开发效率的方法，其特征在于，所述相关文件路径结构包括codemirror目录、components目录、hinttooltip目录、utils目录、index.tsx文件、interface.ts文件；
4.根据权利要求1所述的一种提高自定义代码编辑器开发效率的方法，其特征在于，所述步骤s2还包括以下子步骤：
5.根据权利要求4所述的一种提高自定义代码编...
【专利技术属性】
技术研发人员：朱思禹，田吉，李佳，刘彪，娄江南，李成，杨爽，牛建平，孙大臣，管春元，谢斌，焦质晔，滕训超，孙增强，
申请(专利权)人：启明信息技术股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。