xinglie / mteditor Goto Github PK

personal support

测试页面：https://xinglie.github.io/mteditor/print.html

对编辑好的内容打印，支持自定义页头、页脚。

现阶段浏览器对打印规范支持度相当低，因此想要排版更丰富的打印支持，则需要自己做好相应的打印页面，然后再交与浏览器打印。

这里面的技术难点就是对用户编辑好的内容做切割，因为用户编辑时无须考虑纸张、页边距等，到打印时则需要考虑它们，根据它们不同的值，如果内容放不下则自动切分到下一页内容上。

分割包括不限于文本、图片、表格、组件等以及它们之间的嵌套。

而针对表格的分割，目前浏览器打印也只是把它们进行了简单切割，并不像ms word那样对切割后的表格进行边框的补齐。

比如浏览器处理的效果如下：

横向灰色区域就是打印时的分割地方，我们可以看到表格边框是被截断且不补的。

目前前端技术已完成对内容的切割，其中表格的处理同浏览器的处理

该功能仍处于技术调研阶段

通过编辑器，我们可以编辑生成多个经常使用的模板，在需要的时候，直接把模板填充进编辑器，只需要修改一些坑位即可。

生产模板测试地址：https://xinglie.github.io/mteditor/template-admin.html

首先在页头、内容、页脚输入固定的内容，在输入内容的时候，可以通过工具栏中的”插入占位符“功能来插入一个占位坑位

如下图我们来编辑一个示例模板

模板编辑完成后我们可以把内容保存进数据库

使用模板测试地址：https://xinglie.github.io/mteditor/template-user.html

在使用模板的编辑器里，我们把内容加载进来，测试环境下，可以把前面生产模板编辑器里的内容复制到使用模板的编辑器里。

如下

占位符可以使用鼠标点击聚焦，聚焦后直接输入你需要的内容即可，通过这种方式，可以固化经常使用的内容，把变化的使用占位符来提示，整体来提升输入效率。

official support

测试页面：https://xinglie.github.io/mteditor/template-admin.html

如果你是特定领域的文字输入工作者，当你需要频繁输入特定的单位符号时你会怎么做？
如果你是软件开发者，需要给用户提供便捷特殊符号输入你会怎么做？

一些输入法或软键盘提供特殊符号输入，但需要使用者去切换，只有熟手才能切换自如。

常见的编辑器一般都会提供特殊符号插入的对话框，以供文字输入者使用，比如ckeditor提供的特殊符号输入框

显然，这对于偶尔输入特殊符号是有一定帮助的，但对于频繁输入则显得不够效率。

那如果我们把这些特殊符号使用常用的输入字符进行映射转换呢？
比如：

以½为例，当你需要这个符号时，你只需要输入1/2这个约定的规则，后续编辑器智能转换，这个过程如下图：

在这个里面，使用者只需要专注输入即可，无须按特殊的按键，编辑器即可完成转换。
再比如输入→，使用直观的->键盘输入，则编辑器智能转换成相应的符号。

在我最早学习五笔时，对一个例子记忆非常深刻，那就是当你要输入中华人民共和国时，你只需要按kwwl这四个按键，中华人民共和国直接上屏，当时感叹这输入效率好高效啊。如今我把这个功能也移植到了ckeditor编辑器里，只需要输入kwwl则自动转换成中华人民共和国，如下图

是的，所以魔法转换不但支持特殊符号，也支持对长句，甚至是一段文字做简短映射(比如常用模板，模板功能在后续篇章中介绍)，当你需要时，你只需要输入约定好的几个字符，则完成相应的大段文字输入。

不但对文字可以支持转换，也支持输入转换成组件(组件功能将在后续篇章中介绍)，极大的提升输入效率。

该功能支持自定义，以及选择自己需要的快捷转换，以免快捷转换过多，造成在不必要的时候也转换的尴尬。

快速加粗、斜体、删除线以及设置标题

熟悉markdown的可能知道**bold**, *italic* ~~strikethrough~~以及##title等语法，使用特定的标记，让文字输入者专注输入，同时也可以快速设置格式。

ckeditor5目前同样具备这样的功能，且支持实时转换，效果可参考下面的示例图片

熟记能提升文字输入效率，当然不熟悉也可以使用工具栏进行设置，只是尽可能的帮助文字输入者提升效率。

把复杂的功能或字符映射成简单的文字输入，降低输入成本，一切以效率为前提

该功能仍在技术调研中，遇到瓶颈时不排除推倒整个方案重新来过

该项目致力于提升文字工作者的效率，尤其是高频使用者，包括不限于：教师、医生、律师等所有频繁且使用相对固定模板的文字工作者。

需要解决的三大难题

编辑组件化

效率支持

编辑器提供包括不限于自动完成、弹层组件、气泡组件、特殊字符映射、输入建议框等各种功能来辅助提升输入效率。

版本对比

留痕支持

编辑器提供对任意2个html内容做比较，包括哪些是新增的，哪些是删除的，哪些是未变化的，方便使用者快速查找内容变动了哪些

分页打印

页头页脚支持

对编辑后的内容，提供纸张大小、页边距后，自动化计算内容分多少页。在分页处，自动拆分多行文本、表格等，避免一半文字或一半单元格出现在上一页的末尾或下一页的开头。

对于表格，或许使用横切的方式更好些，但文字肯定不能横切

路长且艰，勇敢向前！

personal support

测试地址：https://xinglie.github.io/mteditor/compare.html

编辑器支持对输出的html提供比较功能，即任意版本之间的内容比较。
内容比较只需要提供ckeditor输出的干净的html即可完成比较，不需要加入任何其它特殊的标签进行标记。

文本比较示意截图如下

表格比较示意截图如下

其中第一行红行表示删除，最后一行表示新增，中间表示未修改

表格也支持显示某一个单元格被合并，即删除，如下

这背后一共有2个核心算法，内容diff和文本相似算法。

内容diff采用本人所写的算法，可最大限度的检测2个版本不变化的地方，减少界面显示较多的差异化内容。
目前已完成包括不限于文本、图片、表格、组件等之间的差异化比较，识别出新增、删除等操作。

其中针对文本采用相似算法，即使一行文本移到其它行并进行了相应修改，依然可以识别出来。文本相似算法比较多，目前采用的是编辑距离算法。

只针对相同层级的内容做比较，不支持跨级。

性能方面使用和magix框架同源的异步更新技术，可最大限度的发挥客户端电脑的性能且不卡顿界面

该功能仍在技术调研中，遇到瓶颈时不排除推倒整个方案重新来过

犹记得三周前看ckeditor架构文章、源码那个吃力，看了很久也没明白marker是干什么用的，现如今可以用它做出自己的需求，所以警醒自己持续学习真的挺重要，否则连别人写的什么都看不懂了。

暂定使用ckeditor5做为二次开发的基础编辑器，后续不排除切换到slate上

使用ckeditor5的好处如下

团队经验丰富

ckeditor是一个老牌的编辑器，一代代技术积累下来，不管是处理多语言，还是各种排版，cksource团队有丰富的经验来应对各种问题，许多技术方案从一开始就能避开许多坑，依靠大树好乘凉

官方插件多

ckeditor5官方提供了近20组的官方插件，且这些官方插件完成的功能各不相同，不存在功能交叉的地方。这给学习组件化开发或改造提供了便利的源代码学习条件，可快速完成需要的功能交互。

易于控制

ckeditor5完全重做，所有功能均插件化，可任意启用和禁用某些功能。便于控制用户以何种方式来输入和使用。

社区活跃

ckeditor5的社区活跃，有问题基本上当天就有人回复，不用担心遇到问题找不到相关人员，尽管大多时间还是得靠自己。

安全

所有html标签及属性均由白名单控制，减少xss的可能。

个人感觉ckeditor5为了达到各种需要的功能，架构上设计的比较庞大，需要花时间先去理解它的整体架构。
白名单的方式控制html，安全上去了，带来的成本是需要写各种upcast downcast转换，开发时间长
api非常之多，上手成本高，还有各种钩子和事件派发，学懂不易。

通过编辑器，插入日历占位符，设置相关的格式、校验等，在使用的时候，用户点击弹出日历，直接选择日期即可完成。

生产模板测试地址：https://xinglie.github.io/mteditor/template-admin.html

在页头、内容、页脚输入内容的时候，可以通过工具栏中的”插入不可修改日期“功能来插入一个日期占位坑位

如下图我们来编辑一个示例模板

可以对添加的日期占位符做一定的配置，比如格式、不能删除等配置，示例中仅做了格式的配置

模板编辑完成后我们可以把内容保存进数据库

使用模板测试地址：https://xinglie.github.io/mteditor/template-user.html

在使用模板的编辑器里，我们把内容加载进来，测试环境下，可以把前面生产模板编辑器里的内容复制到使用模板的编辑器里。

如下

日历占位符使用鼠标点击后，弹出日历选择浮层，用户选择相应的日期即可，这里因为示例，省略了日历组件的实现