函数编辑器调研及设计开发

前言：在产品研发中需要一款可嵌入web开发的代码及函数编辑器，本文从功能，扩展，外观/交互，维护/社区，兼容性，开源与否等方面考虑，进行对比筛选

1、编辑器统计数据

市面上编辑器有很多，如下：

根据最后的发版时间，判断编辑器的维护及更新状态，同时判断是否开源

功能列表’：

产品诉求

诉求重要程度详细描述
编辑区域为文本区域重要可以手工输入任意文字
支持@特殊字符触发联想重要联想内容为已有的数据源（计算项）
支持函数高亮（待定）重要
支持括号匹配并有动效重要
支持函数联想重要
选中函数后（添加函数后），可自动补齐函数完整格式次要
支持公式合法性校验重要函数格式及参数校验、运算规则校验（数学运算规则）
换行不影响公式逻辑重要编辑区域可随意换行，但不影响公式逻辑及校验
tab键可快速缩进次要与上一行缩进对齐
支持 -- 注释次要可用 -- 添加注释，并且不影响计算及校验
支持常用运算符重要算术运算符：加(+)、减(-)、乘(*)、除(/)、求余(%)
关系运算符：大于(>)、小于(<)、等于(==)、大于等于(>=)、小于等于(<=)、不等于(!=)
逻辑运算符：与(&&)、或(||)、非(!)
赋值运算符：=
支持标点符号重要() ,
支持运算符号、标点符号、函数输入等自动校正重要如中文的，自动校正为英文的,等等

作为现代编辑器，语法高亮，自动补全缩进，快捷键操作，搜索和替换等功能必不可少，综合考虑，结合以上需求，筛选主要对比以下3个编辑器，codemirror、ace、monaco editor

2、codemirror

     CodeMirror是一个用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并附带一些实现更高级编辑功能的语言模式和插件。其核心仅提供编辑器功能，其他功能通过丰富的API和插件实现。CodeMirror的使用基于特定的程序语言模式(mode)，它对特定的语言进行语法解析(parse)，使编辑器能够在解析结果基础上进行语法高亮，实现具有上下文感知(context-aware)的代码补全、缩进等功能。

codemirror通过插件实现了一些特别的功能，例如：

添加widget

CodeMirror: Inline Widget Demo

视图与代码的分离 Multiple Buffer & Split View

CodeMirror: Multiple Buffer & Split View Demo

代码的多路复用 Multiplexing Parser

CodeMirror: Multiplexing Parser Demo

基于Tern(高级javascript解析引擎))的高级智能功能

CodeMirror: Tern Demo

附录：

  • 官网：CodeMirror
  • github(star:13k issue:200): https://github.com/codemirror/CodeMirror/
  • 外部插件: GitHub - codemirror/codemirror5: In-browser code editor (version 5, legacy)
  • 编写mode: CodeMirror 5 User Manual
  • demo: Index of /5/demo/
  • 论坛：discuss.CodeMirror
  • 用户(Adobe Brackets,Chrome DevTools,Firefox Developer Tools): CodeMirror: Real-world Uses

评价：

优点

1.功能总体完备
2.扩展性高
3.官网文档介绍详细，demo覆盖较全，插件也很多
4.有专门的社区，管理维护较为活跃

缺点

1.功能需要配置和引入文件才能实现，功能多的时候需要引入的文件过多，不好管理。
2.部分外观和交互基础显示不好，要通过自定义比较麻烦
3.进行扩展需要一定的学习

3、ace

Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。作为与codemirror同类的现代编辑器，ACE同样拥有mode进行语法解析，实现编辑器的智能感知型功能。

附录：

官网： Ace - The High Performance Code Editor for the Web
github: https://github.com/ajaxorg/ace star:16k issue:580
编写mode: Ace Mode Creator
demo: Ace Kitchen Sink
社区：https://groups.google.com/forum/#!forum/ace-discuss
用户: Ace - The High Performance Code Editor for the Web

评价：

优点

1.功能完备且集成度高
2.支持的语言丰富
3.支持在线编写mode和配置demo

缺点

1.扩展支持能力较为一般
2.官方demo不支持源码预览

3、monoco editor

monaco是VS Code的代码编辑器，同时也是一个开源代码编辑器，可以嵌入到Web应用程序中。

附录：

学习文档：枚举值(Enumerations) | Monaco-editor 学习文档

评价：

优点

1.集成vscode的编辑功能，使用较为简单
2.使用vscode的外观和交互较为友好
4.原生支持代码diff，typescript

缺点

1.支持语言种类和主题较少
2.扩展性较差
3.独立的引入方式不适合打包
3.不支持移动浏览器或移动Web框架

4、总结

功能点

ACE

CodeMirror

Monaco

代码着色/高亮

√

√

√

主题

√ (内置20+/可扩展)

√ (内置40+)

2种，即vs/vs dark

语言支持

√ (110+/可扩展)

√ (130+)

√ (30+)

代码提示/自动补全

√ (引入tool文件+配置)

√ 引入hint相关文件+配置快捷键命令

√ 默认开启

代码完成/循环结构

√

√

√

代码段

√

√

√

搜索和替换

√

√

√

多光标操作

√

√

√

自动缩进

√

√

√

代码折行

√

√

√

undo/redo

√

√

√

快捷键

√

√

√

代码检查lint

√

√

字符集支持

√

√

行数显示

√

√

√

代码对比diff

√

√

mixed mode混合模式

√

keymap键盘映射

√  vim and Emacs

√ ( Vim ,  Emacs , and  Sublime Text )

多视图

√

resize自适应

√

√

扩展小部件

√

文本标记扩展

√

命令行扩展

√

鼠标拖放扩展

√

功能的整体对比来看，CodeMirror的功能比较多，但三者相差不大，基本功能都具备，只是某些特殊功能codemirror可以通过其丰富的扩展实现。

特性

CodeMirror

Ace

monaco

功能

完备

完备

完备

扩展性

插件、主题、mode扩展

插件、主题、mode扩展

mode扩展

外观/交互

支持多款主题和部件
基础UI较为简单

支持多款主题

vscode风格
风格统一交互友好

文档/demo

官网详细的api文档
demo单页展示

官网包含特性支持
mode创建教程
api文档
demo操作区

API文档
可配置demo
功能样例+代码

支持/社区

独立社区
star:13k+ issue:200+

star:16k+ issue:500+
support: Cloud9 IDE

star:7k+ issue:200+ support:Microsoft

兼容性

Firefox 3+, Chrome, Safari 3+, Internet Explorer 8+, Opera 9+

Firefox 3.5+, Safari 4+, Chrome, IE 8+, Opera 11.5+

IE8+, Firefox 4+, Chrome

根据以上调研，结合产品需求，最后选择使用了codemirror，三款编辑器的vue组件封装和扩展

codemirror：
Vue-Codemirror: Codemirror component for Vue.
https://github.com/surmon-china/vue-codemirror
Vue-Codemirror-Lite: Lightweight Codemirror Component for Vue.js
https://github.com/cnu4/vue-codemirror-lite
monaco：
vue-monaco-editor: Monaco Editor Vue Component
https://github.com/matt-oconnell/vue-monaco-editor
monaco-vue: Vue language plugin for the Monaco Editor.
https://github.com/rebornix/monaco-vue/blob/master/test/index.html
Ace：
vue2-ace-editor:A packaging of  ace
https://github.com/chairuosen/vue2-ace-editor

最后使用vue-codemirror-lite，封装成神州云合的插件szyh-codemirror，运行效果如下图所示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/11919.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Windows电脑使用Docker安装AList网盘神器并配置公网地址打造私人云存储空间

Windows电脑使用Docker安装AList网盘神器并配置公网地址打造私人云存储空间

文章目录 前言1. 使用Docker本地部署Alist1.1 本地部署 Alist1.2 访问并设置Alist1.3 在管理界面添加存储 2. 安装cpolar内网穿透3. 固定Alist公网地址 前言 本文和大家分享如何在Windows系统使用Docker本地部署Alist全平台网盘神器&#xff0c;然后结合cpolar内网穿透工具实现…
阅读更多...
USE INDEX/FORCE INDEX/IGNORE INDEX使用的好，sql查询速度提升一倍

USE INDEX/FORCE INDEX/IGNORE INDEX使用的好，sql查询速度提升一倍

前言 在实际工作中有些时候数据库的执行就很奇怪&#xff0c;要么不用索引&#xff0c;要么用了错误的索引&#xff0c;那么在这种情况下你就可以考虑使用这些索引提示来纠正数据库的行为。 早期我们有一个表结构定义&#xff0c;上面有 A、B 两个索引。原本按照预期&#x…
阅读更多...
SCQA表达模型：让你的表达更具吸引力(2)

SCQA表达模型：让你的表达更具吸引力(2)

一、引言 站在巨人的肩膀上&#xff0c;思维模型是前人智慧结晶&#xff0c;当我们面对相似挑战时&#xff0c;借鉴与模仿这些模型&#xff0c;往往能为我们带来意想不到的结果。 在信息爆炸的时代&#xff0c;如何高效、准确地传达信息成为了人们关注的焦点。SCQA表达模型作为…
阅读更多...
网络网络层之(5)IPv6协议

网络网络层之(5)IPv6协议

网络网络层之(5)IPv6协议 Author: Once Day Date: 2024年5月12日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day…
阅读更多...
「JavaEE」多线程案例分析2：实现定时器

「JavaEE」多线程案例分析2：实现定时器

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;JavaEE &#x1f387;欢迎点赞收藏加关注哦&#xff01; 实现定时器 &#x1f349;简介&#x1f349;模拟实现定时器 &#x1f349;简介 定时器类似一个闹钟&#xff0c;时间到了之后就会执行…
阅读更多...
重生我是嵌入式大能之串口调试UART

重生我是嵌入式大能之串口调试UART

什么是串口 串口是一种在数据通讯中广泛使用的通讯接口&#xff0c;通常我们叫做UART (通用异步收发传输器Universal Asynchronous Receiver/Transmitter)&#xff0c;其具有数据传输速度稳定、可靠性高、适用范围广等优点。在嵌入式系统中&#xff0c;串口常用于与外部设备进…
阅读更多...
MTATLAB--一元线性回归分析

MTATLAB--一元线性回归分析

一文让你彻底搞懂最小二乘法&#xff08;超详细推导&#xff09; 在进行一元线性回归分析时&#xff0c;使用最小二乘法进行解题&#xff0c;关于最小二乘法具体看上述文章。 数据文件在文章顶部可见&#xff0c;将第一列数据作为自变量x&#xff0c;第二列数据作为应变量y。建…
阅读更多...
3款常用的可视化工具Matplotlib、Seaborn和Pandas

3款常用的可视化工具Matplotlib、Seaborn和Pandas

大家好&#xff0c;Seaborn 是基于 Matplotlib 的扩展库&#xff0c;Pandas 的可视化功能同样也依赖于 Matplotlib。尽管二者都使用相同的底层图形库&#xff0c;但绘制图表的方法却各有千秋。本文将介绍各种柱状图的绘制&#xff0c;比较 Matplotlib、Pandas 和 Seaborn 在数据…
阅读更多...
vulhub靶机struts2环境下的s2-032（CVE-2016-3081）（远程命令执行漏洞）

vulhub靶机struts2环境下的s2-032（CVE-2016-3081）（远程命令执行漏洞）

影响范围 Struts 2.3.19至2.3.20.2、2.3.21至2.3.24.1和2.3.25至2.3.28 当用户提交表单数据并验证失败时&#xff0c;后端会将用户之前提交的参数值使用OGNL表达式%{value}进行解析&#xff0c;然后重新填充到对应的表单数据中。 漏洞搭建 没有特殊要求&#xff0c;请看 (3…
阅读更多...
EasyImage2.0 图床源码

EasyImage2.0 图床源码

EasyImage2.0 是一个简单图床的源码&#xff0c;它支持以下功能&#xff1a; 1. API接口 2. 登录后才能上传图片 3. 设置图片质量 4. 压缩图片大小 5. 添加文字或图片水印 6. 设定图片的宽度和高度 7. 将上传的图片转换为指定的格式 8. 限制上传图片的最小宽度和高度 …
阅读更多...
【LangChain学习之旅】—（21）聊天客服机器人的开发（上）

【LangChain学习之旅】—（21）聊天客服机器人的开发（上）

【LangChain学习之旅】—（21）聊天客服机器人的开发（上） “聊天机器人”说明项目的技术实现细节技术实现步骤简述第二步：增加记忆机制第三步：增加检索机制总结“聊天机器人”说明 聊天机器人（Chatbot）是 LLM 和 LangChain 的核心用例之一，很多人学习大语言模型，学习 …
阅读更多...
Java入门基础学习笔记19——关系运算符、逻辑运算符

Java入门基础学习笔记19——关系运算符、逻辑运算符

关系运算符&#xff1a; 判断数据是否满足条件&#xff0c;最终会返回一个判断的结果&#xff0c;这个结果是布尔类型的值&#xff1a;true或false。 注意&#xff1a;在java中判断是否相等一定是“”&#xff0c;不要把“”写成“”&#xff0c;“”是赋值表达式。 package c…
阅读更多...
社区新零售：家门口的便利与温暖

社区新零售：家门口的便利与温暖

社区新零售&#xff1a;家门口的便利与温暖 随着都市生活节奏的加快&#xff0c;人们对于便捷、高效的生活方式有了更高的追求。社区新零售&#xff0c;作为零售业的一股新兴力量&#xff0c;正以其独特的魅力&#xff0c;悄然改变着我们的日常生活。 家门口的便利 社区新零…
阅读更多...
嵌入式学习第三十三天！（二叉树）

嵌入式学习第三十三天！（二叉树）

1. 树的概念&#xff1a; 1. 树&#xff1a;由n个结点组成的有限集&#xff0c;有且只有一个根结点&#xff08;由根结点可以访问后继结点&#xff09;&#xff0c;其他结点只有一个前驱结点&#xff0c;但可以有多个后继结点&#xff08;一对多&#xff09;。当n 0时&#xf…
阅读更多...
OpenAI 刚刚宣布了 “GPT-4o“ 免费用户开放、通过 API 可用

OpenAI 刚刚宣布了 “GPT-4o“ 免费用户开放、通过 API 可用

OpenAI 刚刚宣布了 “GPT-4o”。它可以通过语音、视觉和文本进行推理。 该模型速度提高了 2 倍&#xff0c;价格降低了 50%&#xff0c;比 GPT-4 Turbo 的速率限制高出了 5 倍。 它将对免费用户开放、通过 API 可用。 与 GPT-4 相比&#xff0c;GPT-4o 的速度和额外的编码能力…
阅读更多...
揭秘APP广告：变现逻辑全解析！

揭秘APP广告：变现逻辑全解析！

在当今的移动互联网时代&#xff0c;APP广告变现已经成为了各大应用开发者的主要营收来源之一。然而&#xff0c;随着科技的发展、用户行为的变化以及广告市场趋势的演进&#xff0c;APP广告变现逻辑也正在不断地进行优化和调整。本文将基于当前市场和技术趋势&#xff0c;为大…
阅读更多...
Proteus新手入门之初学体验

Proteus新手入门之初学体验

Proteus是嵌入式工程师比较喜欢用的&#xff0c;可以实现从原理图布图、代码调试到单片机与外围电路协同仿真。作为一款功能强大的电子电路仿真软件&#xff0c;Proteus为电子爱好者和工程师们提供了一个理想的平台&#xff0c;用于设计、测试和验证各种电子电路。对于初学者来…
阅读更多...
CSS 块状元素

CSS 块状元素

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…
阅读更多...
Saas详解

Saas详解

1. 什么是Saas SaaS&#xff08;Software-as-a-Service&#xff09;&#xff0c;简单点理解就是软件即服务&#xff0c;即通过网络提供软件服务。 在SaaS模型中&#xff0c;用户不需要在本地安装软件&#xff0c;而是通过网络&#xff08;通常是浏览器&#xff09;访问应用程…
阅读更多...
LeetCode算法题：49. 字母异位词分组（Java）

LeetCode算法题：49. 字母异位词分组（Java）

给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate", "nat", …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023