- 微信ID:qq84685009
xinglie / mteditor Goto Github PK
View Code? Open in Web Editor NEWmagical text editor. 致力于文字工作者的效率提升
Home Page: https://xinglie.github.io/mteditor/compare.html
License: GNU Affero General Public License v3.0
magical text editor. 致力于文字工作者的效率提升
Home Page: https://xinglie.github.io/mteditor/compare.html
License: GNU Affero General Public License v3.0
personal support
测试地址:https://xinglie.github.io/mteditor/compare.html
编辑器支持对输出的html提供比较功能,即任意版本之间的内容比较。
内容比较只需要提供ckeditor输出的干净的html即可完成比较,不需要加入任何其它特殊的标签进行标记。
其中第一行红行表示删除,最后一行表示新增,中间表示未修改
表格也支持显示某一个单元格被合并,即删除,如下
这背后一共有2个核心算法,内容diff和文本相似算法。
内容diff采用本人所写的算法,可最大限度的检测2个版本不变化的地方,减少界面显示较多的差异化内容。
目前已完成包括不限于文本、图片、表格、组件等之间的差异化比较,识别出新增、删除等操作。
其中针对文本采用相似算法,即使一行文本移到其它行并进行了相应修改,依然可以识别出来。文本相似算法比较多,目前采用的是编辑距离算法。
只针对相同层级的内容做比较,不支持跨级。
性能方面使用和magix框架同源的异步更新技术,可最大限度的发挥客户端电脑的性能且不卡顿界面
该功能仍在技术调研中,遇到瓶颈时不排除推倒整个方案重新来过
犹记得三周前看ckeditor架构文章、源码那个吃力,看了很久也没明白marker是干什么用的,现如今可以用它做出自己的需求,所以警醒自己持续学习真的挺重要,否则连别人写的什么都看不懂了。
通过编辑器,插入日历占位符,设置相关的格式、校验等,在使用的时候,用户点击弹出日历,直接选择日期即可完成。
生产模板测试地址:https://xinglie.github.io/mteditor/template-admin.html
在页头、内容、页脚输入内容的时候,可以通过工具栏中的”插入不可修改日期“功能来插入一个日期占位坑位
如下图我们来编辑一个示例模板
可以对添加的日期占位符做一定的配置,比如格式、不能删除等配置,示例中仅做了格式的配置
模板编辑完成后我们可以把内容保存进数据库
使用模板测试地址:https://xinglie.github.io/mteditor/template-user.html
在使用模板的编辑器里,我们把内容加载进来,测试环境下,可以把前面生产模板编辑器里的内容复制到使用模板的编辑器里。
如下
日历占位符使用鼠标点击后,弹出日历选择浮层,用户选择相应的日期即可,这里因为示例,省略了日历组件的实现
通过编辑器,我们可以编辑生成多个经常使用的模板,在需要的时候,直接把模板填充进编辑器,只需要修改一些坑位即可。
生产模板测试地址:https://xinglie.github.io/mteditor/template-admin.html
首先在页头、内容、页脚输入固定的内容,在输入内容的时候,可以通过工具栏中的”插入占位符“功能来插入一个占位坑位
如下图我们来编辑一个示例模板
模板编辑完成后我们可以把内容保存进数据库
使用模板测试地址:https://xinglie.github.io/mteditor/template-user.html
在使用模板的编辑器里,我们把内容加载进来,测试环境下,可以把前面生产模板编辑器里的内容复制到使用模板的编辑器里。
如下
占位符可以使用鼠标点击聚焦,聚焦后直接输入你需要的内容即可,通过这种方式,可以固化经常使用的内容,把变化的使用占位符来提示,整体来提升输入效率。
该项目致力于提升文字工作者的效率,尤其是高频使用者,包括不限于:教师、医生、律师等所有频繁且使用相对固定模板的文字工作者。
需要解决的三大难题
效率支持
编辑器提供包括不限于自动完成、弹层组件、气泡组件、特殊字符映射、输入建议框等各种功能来辅助提升输入效率。
留痕支持
编辑器提供对任意2
个html
内容做比较,包括哪些是新增的,哪些是删除的,哪些是未变化的,方便使用者快速查找内容变动了哪些
页头页脚支持
对编辑后的内容,提供纸张大小、页边距后,自动化计算内容分多少页。在分页处,自动拆分多行文本、表格等,避免一半文字或一半单元格出现在上一页的末尾或下一页的开头。
对于表格,或许使用横切的方式更好些,但文字肯定不能横切
路长且艰,勇敢向前!
personal support
测试页面:https://xinglie.github.io/mteditor/print.html
对编辑好的内容打印,支持自定义页头、页脚。
现阶段浏览器对打印规范支持度相当低,因此想要排版更丰富的打印支持,则需要自己做好相应的打印页面,然后再交与浏览器打印。
这里面的技术难点就是对用户编辑好的内容做切割,因为用户编辑时无须考虑纸张、页边距等,到打印时则需要考虑它们,根据它们不同的值,如果内容放不下则自动切分到下一页内容上。
分割包括不限于文本、图片、表格、组件等以及它们之间的嵌套。
而针对表格的分割,目前浏览器打印也只是把它们进行了简单切割,并不像ms word
那样对切割后的表格进行边框的补齐。
比如浏览器处理的效果如下:
横向灰色区域就是打印时的分割地方,我们可以看到表格边框是被截断且不补的。
目前前端技术已完成对内容的切割,其中表格的处理同浏览器的处理
该功能仍处于技术调研阶段
暂定使用ckeditor5做为二次开发的基础编辑器,后续不排除切换到slate上
使用ckeditor5的好处如下
ckeditor是一个老牌的编辑器,一代代技术积累下来,不管是处理多语言,还是各种排版,cksource团队有丰富的经验来应对各种问题,许多技术方案从一开始就能避开许多坑,依靠大树好乘凉
ckeditor5官方提供了近20组的官方插件,且这些官方插件完成的功能各不相同,不存在功能交叉的地方。这给学习组件化开发或改造提供了便利的源代码学习条件,可快速完成需要的功能交互。
ckeditor5完全重做,所有功能均插件化,可任意启用和禁用某些功能。便于控制用户以何种方式来输入和使用。
ckeditor5的社区活跃,有问题基本上当天就有人回复,不用担心遇到问题找不到相关人员,尽管大多时间还是得靠自己。
所有html标签及属性均由白名单控制,减少xss的可能。
个人感觉ckeditor5为了达到各种需要的功能,架构上设计的比较庞大,需要花时间先去理解它的整体架构。
白名单的方式控制html,安全上去了,带来的成本是需要写各种upcast downcast转换,开发时间长
api非常之多,上手成本高,还有各种钩子和事件派发,学懂不易。
official support
测试页面:https://xinglie.github.io/mteditor/template-admin.html
如果你是特定领域的文字输入工作者,当你需要频繁输入特定的单位符号时你会怎么做?
如果你是软件开发者,需要给用户提供便捷特殊符号输入你会怎么做?
一些输入法或软键盘提供特殊符号输入,但需要使用者去切换,只有熟手才能切换自如。
常见的编辑器一般都会提供特殊符号插入的对话框,以供文字输入者使用,比如ckeditor提供的特殊符号输入框
显然,这对于偶尔输入特殊符号是有一定帮助的,但对于频繁输入则显得不够效率。
那如果我们把这些特殊符号使用常用的输入字符进行映射转换呢?
比如:
简易输入 | 转换成 |
---|---|
(tm) | ™ |
1/2 | ½ |
-> | → |
-- | – |
以½
为例,当你需要这个符号时,你只需要输入1/2
这个约定的规则,后续编辑器智能转换,这个过程如下图:
在这个里面,使用者只需要专注输入即可,无须按特殊的按键,编辑器即可完成转换。
再比如输入→
,使用直观的->
键盘输入,则编辑器智能转换成相应的符号。
在我最早学习五笔时,对一个例子记忆非常深刻,那就是当你要输入中华人民共和国
时,你只需要按kwwl
这四个按键,中华人民共和国
直接上屏,当时感叹这输入效率好高效啊。如今我把这个功能也移植到了ckeditor编辑器里,只需要输入kwwl
则自动转换成中华人民共和国
,如下图
是的,所以魔法转换不但支持特殊符号,也支持对长句,甚至是一段文字做简短映射(比如常用模板,模板功能在后续篇章中介绍),当你需要时,你只需要输入约定好的几个字符,则完成相应的大段文字输入。
不但对文字可以支持转换,也支持输入转换成组件(组件功能将在后续篇章中介绍),极大的提升输入效率。
该功能支持自定义,以及选择自己需要的快捷转换,以免快捷转换过多,造成在不必要的时候也转换的尴尬。
熟悉markdown的可能知道**bold**
, *italic*
~~strikethrough~~
以及##title
等语法,使用特定的标记,让文字输入者专注输入,同时也可以快速设置格式。
ckeditor5目前同样具备这样的功能,且支持实时转换,效果可参考下面的示例图片
熟记能提升文字输入效率,当然不熟悉也可以使用工具栏进行设置,只是尽可能的帮助文字输入者提升效率。
把复杂的功能或字符映射成简单的文字输入,降低输入成本,一切以效率为前提
该功能仍在技术调研中,遇到瓶颈时不排除推倒整个方案重新来过
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.