js手工实现富文本编辑器原理

引言

  最近做了个手工给讨论打分的小工具，想标注出关键词句，想到了富文本编辑器，奈何这货没有小型的，只好手写了个最简单的。了解了一种富文本编辑器的实现手法，分享出来吧。

  笔者非前端人员，欢迎各种喷各种板砖~。~——唯一要求，有实际内容。

正文

  详情请参考引用（对cheng5128的资料表示感谢）部分。

  简单地说，就4个要点：

  1）iframe显示效果,textarea保存真值
  2）iframe document有一系列方法支持
    ：execCommand                            #比如带参“underline”即为下划线
    ：.selection.rang.surroundContents       #带ele参数，用ele包围（已处理标签交错）
    ：……
  3）封装、兼容处理
  4）其他美化、优化、同步数据等处理

引用

  一步步教你实现富文本编辑器

评论

3 楼 duanll 2013-06-14  

[list]
[*]

[/list]

2 楼 zhaoningbo 2012-10-15  

wingsrao 写道

支持一下，最好写得可以开原大家一起改。

用的话可以参考一下文尾的“引用”部分的链接。因为原文作者已经提供几乎全部的源代码了，所以只写了个要点。以后有时间了，手写个简单的，会补链接。
谢谢支持！

1 楼 wingsrao 2012-10-12  

支持一下，最好写得可以开原大家一起改。