Loading...

​​富文本编辑器

​​

​​一、需求分析

• ​​调用简单

• ​​支持 Markdown

• ​​易用

• ​​功能满足需求即可

• ​​预留出提交代码接口

​​

1. ​​输入需求

​​1. # + 空格： 生成H1，并将光标移动至标签之间

​​2. ## + 空格： 生成 h2

​​3. ### + 空格：生成　h3

​​4. 光标选中元素，弹出样式设置按钮。h1,h2,h3,img,link,附件

​​5. @rtx + 空格，生成 rtx (是否预留一个自定义渲染配置)

​​

2. ​​弹窗编辑

​​1. h1, h2, h3, img, file, link

​​

3. ​​命令操作

​​1. 复制

​​2. 粘贴（不带格式）

​​3. 拖拽图片上传

​​

4. ​​人性化操作

​​1. 点击图片放大

​​二、实现方式

• ​​第一种：文本域。

• ​​文本域是网页中最常见的输入框，不过它只是文本框，只能输入文字，不可输入图片或者链接等多媒体元素。

• ​​
  

• ​​第二种：添加 contenteditable属性为true的div。

• ​​contenteditable这个属性连低版本的ie都支持，QQ空间的心情发布框就是带有此属性的div。劣势：文本属性会被

• ​​
  

• ​​第三种：设置了designMode为”on”的iframe。

• ​​在网页中插入iframe，那么iframe就可以看做是一个单独的文档，我们再把iframe的designMode属性设置为on，结合js提供的execCommand方法。即可在这个文档中实现编辑、插入等设置功能，这也是本篇所要说的。

​​

​​

​​遇到的问题

​​粘贴时，去html 且

​​

​​

​​参考资料

​​

• ​​[富文本编辑器的实现](http://www.yi-jy.com/2015/01/21/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8%E7%9A%84%E5%AE%9E%E7%8E%B0/)

• ​​
  

​​Attendees 

​​​@Matilda R​, ​@Kenneth S​, ​@Geoffrey R​, ​@Alyssia K​

​​

​​Agenda:

• ​​Assign tasks for the week