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

前言：在产品研发中需要一款可嵌入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内网穿透工具实现…
阅读更多...
全面解析：分布式光伏系统的概念、优缺点和应用

全面解析：分布式光伏系统的概念、优缺点和应用

光伏发电领域中&#xff0c;分布式和集中式光伏是两种主要应用模式。集中式电站占地面积大&#xff0c;受国家土地政策制约严重&#xff0c;且我国土地资源又相当紧缺&#xff0c;而分布式光伏电站因接网便利、场地灵活等特点&#xff0c;近年来发展迅速&#xff0c;越来越多的…
阅读更多...
P3853 [TJOI2007] 路标设置

P3853 [TJOI2007] 路标设置

题目描述: 题目背景 B 市和 T 市之间有一条长长的高速公路&#xff0c;这条公路的某些地方设有路标&#xff0c;但是大家都感觉路标设得太少了&#xff0c;相邻两个路标之间往往隔着相当长的一段距离。为了便于研究这个问题&#xff0c;我们把公路上相邻路标的最大距离定义为…
阅读更多...
Linux sigfillset

Linux sigfillset

#include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <signal.h> /* * 是标准C库中用于操作自定义信号集的一个函数 */ #if 0 # 用于初始化一个自定义信号集&#xff0c;将其所有信号都填充满&#xff0c;也就是将信号集中的所…
阅读更多...
Windows安装多版本MySQL

Windows安装多版本MySQL

5.7 - 配置 my.ini [client] port 3307[mysql] default-character-set utf8mb4[mysqld] port 3307 server_id 1 character-set-server utf8mb4basedir "E://MySQL/mysql5.7" datadir "E://MySQL/mysql5.7/data"# 将所有表名转换为小写字母 lower_c…
阅读更多...
食品安全群众满意度的概念

食品安全群众满意度的概念

本文由群狼调研&#xff08;湖南酒店神秘顾客&#xff09;出品&#xff0c;欢迎转载&#xff0c;请注明出处。食品安全群众满意度是指一国或地区居民对其所消费的食品安全状况的整体满意程度。食品安全群众满意度调查通常是通过对一定数量的居民进行问卷调查或采访&#xff0c;…
阅读更多...
USE INDEX/FORCE INDEX/IGNORE INDEX使用的好，sql查询速度提升一倍

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

前言 在实际工作中有些时候数据库的执行就很奇怪&#xff0c;要么不用索引&#xff0c;要么用了错误的索引&#xff0c;那么在这种情况下你就可以考虑使用这些索引提示来纠正数据库的行为。 早期我们有一个表结构定义&#xff0c;上面有 A、B 两个索引。原本按照预期&#x…
阅读更多...
美易官方：GPT-4o重磅演示后奥特曼发声

美易官方：GPT-4o重磅演示后奥特曼发声

GPT-4的震撼演示犹如一道璀璨的星光&#xff0c;划破天际&#xff0c;照亮了科技领域的每一个角落。在这光芒四射的时刻&#xff0c;奥特曼&#xff0c;这位科技领域的先驱者&#xff0c;也忍不住发声&#xff0c;为我们描绘了一个激动人心的未来画卷。 虽然并未在OpenAI周一的…
阅读更多...
RabbitMQ 面试题（三）

RabbitMQ 面试题（三）

1. 简述RabbitMQ的Simple模式 &#xff1f; RabbitMQ的Simple模式是消息队列的基础模式&#xff0c;由一个生产者、一个队列和一个消费者组成。在这个模式下&#xff0c;生产者通过默认交换器将消息发送到队列中&#xff0c;而消费者则从该队列中取出消息进行处理。 Simple模…
阅读更多...
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…
阅读更多...
Kotlin标准函数和静态方法

Kotlin标准函数和静态方法

标准函数 with 第一个参数是一个类型或者对象&#xff0c;第二个参数是lambda表达式。其中第一个参数为第二个参数提供上下文&#xff0c;返回值是最后一行。案例代码&#xff1a; fun main() {val list mutableListOf<String>()var ret with(list) {add("1&q…
阅读更多...
「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 在数据…
阅读更多...
手机号码的正则表达式

手机号码的正则表达式

手机号码的正则表达式会根据不同的国家/地区有所不同&#xff0c;因为每个国家/地区都有自己特定的手机号码格式。但是&#xff0c;我可以为你提供一个通用的正则表达式模板&#xff0c;并给出一些具体国家/地区的例子。 通用模板 一个基本的手机号码正则表达式模板可能如下所…
阅读更多...
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…
阅读更多...
autoxjs的介绍

autoxjs的介绍

AutoX.js 是一个基于 JavaScript 的自动化工具&#xff0c;用于在 Android 平台上创建自动化脚本。以下是关于 AutoX.js 的一些关键介绍&#xff1a; 1. **无需Root权限**&#xff1a;AutoX.js 可以在没有 Root 权限的设备上运行&#xff0c;利用 Android 的无障碍服务来实现自…
阅读更多...
EasyImage2.0 图床源码

EasyImage2.0 图床源码

EasyImage2.0 是一个简单图床的源码&#xff0c;它支持以下功能&#xff1a; 1. API接口 2. 登录后才能上传图片 3. 设置图片质量 4. 压缩图片大小 5. 添加文字或图片水印 6. 设定图片的宽度和高度 7. 将上传的图片转换为指定的格式 8. 限制上传图片的最小宽度和高度 …
阅读更多...
最新文章

Copyright @ 2022~2023