toolbar的自定义:
quill取消了getHtml()的API,getContents()返回的是Delta对象,一种JSON数组,getText()返回文本域里对应字符串。
因平台需将用户编辑的格式传回后台生成邮件的正文,而邮件的正文是Html格式,通过查issue找到获取Html的方法: quill.container.firstChild.innerHTML
第一次使用富文本编辑器,遇到了很多的坑,与大家分享。
因为项目原因,使用了 react-draft-wysiwyg ;
配合使用插件如下:
1 Draft.js
2: draftjs-to-html
3: html-to-draftjs
DEMO1效果图如下:
一:安装所用插件
二:初始化一个空白的编辑器
(4)提交到后台:双方约定接收html字符串('<p>12344444</p>')
重点来了:
1)看看“1”处的数据结构到底是怎么样的
这是一个ContentState对像结构
2)看看“2”处的数据结构
convertToRaw()方法
将一个ContentState对象,转换为一个原始的JS结构。
在保存编辑器状态以用于存储,转换为其他格式或应用程序中的其他用途时使用
注意:多媒体,image的“type”跟普通的text(unstyled)不一样,是“atomic”。文本的转换之间。
3)看看“3”处的数据结构
draftToHtml() 方法
将原始js格式转换成html字符串;
编辑有值的富文本
难点:解析html字符串,让其显示在富文本编辑器中,可编辑。
理想中的效果图:
实际你遇到的:应该显示图片的地方却显示成一个相机;
draft官网解析的方式。用了自带的 converFromHTML 去转换
看一下转换后的数据格式
text值在转换后变成了相机的样子。
所以问题就出现在这里了。text值是相机。
用插件“ html-to-draftjs ”去转换,type值不再是相机。问题迎刃而解;
这是我第一次使用富文本,可能有些问题出有其他的解决方案,欢迎前来指教,谢谢!!
去掉富文本编辑器的html标签:可以采用正在表达式,如下description = description.replace(/(\n)/g, "")
description = description.replace(/(\t)/g, "")
description = description.replace(/(\r)/g, "")
description = description.replace(/<\/?[^>]*>/g, "")
description = description.replace(/\s*/g, "")