今天在 陌陌 脉脉 看到一个帖子,讲到前端 三大浪漫 .
富文本编辑器市面上已经有很多优秀的开源版本了,但是问题在于每个产品的富文本编辑器需求不一样,所以可能导致有一些时候需要手撸编辑器
例如:
Draft.js
Slate.js
wangEditor
这些富文本编辑器还有衍生出他们的针对不同框架的版本,例如react,还有一些插件。感兴趣的可以去github搜索给个star,方便以后用得上
作者当时手写过桌面软件的富文本编辑器(Electron,类似微信的聊天编辑器),痛苦得很,要控制光标、焦点,复制粘贴,适配多个操作系统环境的QQ、微信、wps等软件的复制粘贴等。感觉都能写好多篇论文了
推荐一个github star数量11.6K的开源库, luckysheet
demo体验地址: https://mengshukeji.github.io/LuckysheetDemo/
支持:
1.格式设置。包括字体、字号、颜色、文本对齐、自动换行以及excel支持的各种数据类型
2.单元格。拖拽选取、下拉填充、自动填充、查找替换、合并单元格等。
3.行列。隐藏、插入、删除、冻结。
4.操作。撤销、复制、粘贴、剪切、快捷键、格式刷、筛选排序、批注、共享编辑。
5.函数。内置常见公式,并支持自定义公式。
6.图表。目前支持折线图、柱状图、面积图、条形图、饼图,支持插入图片。
科普:
在分布式计算中,无冲突复制数据类型(英语:CRDT)是一种可以在网络中的多台计算机上复制的数据结构,副本可以独立和并发地更新,而不需要在副本之间进行协调,并且在数学上总是可以解决可能出现的不一致问题。[1][2][3][4][5][6][7][8]
CRDT的概念是由Marc Shapiro、Nuno Preguiça、Carlos Baquero和Marek Zawirski于2011年正式定义。[9] 开发的最初动机是协作式文本编辑(英语:Collaborative real-time editor)和移动计算。CRDTs也被用于在线聊天系统、在线赌博和SoundCloud音频分发平台中。NoSQL分布式数据库Redis、Riak和Cosmos DB有CRDT数据类型。
推荐一个8K star的前端 CRDT 实时协作库 Yjs: https://github.com/yjs/yjs
Yjs 主要的内部特点:
基于双向链表和 StructStore 的基础数据结构
基于 YATA 算法的并发冲突解决机制
基于 DeleteSet 和 Transaction 机制的撤销重做
基于两阶段划分的同步机制
它支持:
建模数据结构
解决并发冲突
回溯历史记录
同步网络状态等
使用示例
import * as Y from 'yjs'
// 应用中的全部协作状态均可在单个 YDoc 容器中承载
// 将该实例传入 WebSocket 等协议的 provider 后即可支持网络同步
const doc = new Y.Doc()
// 在 YDoc 上可以创建不同类型的顶层 YModel 实例
// 这里创建了一个顶层名为 root 的 YMap
const yRoot = doc.getMap('root')
// 也可以用 class 构造器来实例化独立的 YMap 等 YModel
// 可直接用 get set delete 等常见 API 对 YModel 增删改查
const yPoint = new Y.Map()
yPoint.set('x', 0)
yPoint.set('y', 0)
// YMap 的值也可以是 YMap,从而构造出嵌套的数据类型
yRoot.set('point', yPoint)
// YMap 中还可以存入 YText 等其他 YModel,形成复合的数据类型
const yName = new Y.Text()
yName.insert(0, 'Wilson Edwards')
yRoot.set('name', yName)
以上借鉴一些这篇文章的内容,推荐深度阅读: https://zhuanlan.zhihu.com/p/452980520 本人水平有限,如果要深入这个CRDT,建议还是得多看一些论文。
我是 Peter ,如果感觉文章对大家有帮助,可以帮忙点个在看、赞,关注下我的公众号:前端巅峰。这里会给大家带来最实用的web2、web3知识点!
来源:前端巅峰
我个人吧,一直认为学习前端技术是比较简单的事情,只要你真的是一步一个脚印的在前进,那你自然会有相应的结果可以收获。这里面包含二个关键点,一,脚踏实地;二,不断努力。
前端开发如何写出优秀js代码,什么样的javascript代码才是最优秀的的呢?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明。
热更新:浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面。
作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我们的做法是提供JsDoc,大部分编辑器可以提供快捷生成JsDoc的方式,另一种做法是使用Flow或者TypeScript
Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。
这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步:拆分组件,逻辑处理,抽象、聚合数据
前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境
web前端HTML篇冷知识点——这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。
CSS篇整理:关于CSS的恶作剧、简单的文字模糊效果、垂直居中、多重边框、实时编辑CSS、创建长宽比固定的元素、CSS中也可以做简单运算
Js篇整理:生成随机字符串、整数的操作、重写原生浏览器方法以实现新功能、关于console的恶作剧、万物皆对象、If语句的变形、禁止别人以iframe加载你的页面、console.table
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!