HTML富文本编辑器Quill的使用

html-css012

HTML富文本编辑器Quill的使用,第1张

两种主题

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, "")