目前富文本编辑器的实现主要有两种技术方案：一个是利用contenteditable属于直接对html元素进行编辑，如draft.js；另一个是代理textarea + 自定义div + 模拟光标实现。对于类似"word"的经典文本编辑器，一般会采用以上两种技术方案之一，而不会考虑用canvas实现。
事实上，官方最佳实践已经特别声明了不推荐用canvas实现编辑器了,详见 (opens new window),不推荐的原因包括光标位置维护、键盘移动的实现以及没有原生文本输入处理等。
既然如此，为什么还要用canvas制作文本编译器呢？这是因为对一些特殊的创作来说，canvas能更好的实现展示需求。比如艺术字效果的渲染，以及文本、背景动画等。
基于这点想法，便有了“简诗”这个自娱自乐的小项目。
简诗是为短诗文创作而开发的文本编辑器，主要面向中文写作。中文最特别之处便在于其笔画，所以在开发之初，我便想对文字进行处理之时，一定要把汉字进行笔画分割，以便实现更多有趣的效果的。
项目中文字由WebGL进行渲染。基本思路是先根据用户选择的字体，将文字写在离屏canvas上，然后利用getImageData api获取文字像素数据，进行连通域查询、分割、边缘查找及三角化后，由WebGL进行渲染。
（注：这种处理方式的好处是对任意系统支持的字体都可以实现艺术效果，而无需额外的字体开发。目前项目中没有引入字体文件，用到的字体都是Mac内置的字体，Mac用户如发现其中有的字体系统没有默认安装，只需到“字体册”中安装一下即可）
这一系列过程会单开一篇文章来写，本文主要描述canvas编辑器核心的实现。
# 实现效果
# 资料
通过canvas实现一个简单的文本编辑器 (opens new window)