react-draft-wysiwyg富文本编辑器使用心得

第一次使用富文本编辑器，遇到了很多的坑，与大家分享。

因为项目原因，使用了 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值不再是相机。问题迎刃而解；

这是我第一次使用富文本，可能有些问题出有其他的解决方案，欢迎前来指教，谢谢！！

又来了

https://www.draft-js-plugins.com/plugin/image

draft.js：不要使用redux来管理editorState

draft.js：让光标显示在最后面

draft.js：内容清空之后，光标的位置会错乱

draft.js：如何改变 draft.js 编辑框的高度

draft.js：getPlainText 对换行符的修改 (填坑篇)

draft.js：onChange改装，判断文字内容是否修改

draft.js--富文本编辑器框架的实践（一）

draft.js--富文本编辑器框架的实践（二）

原 1.Draftjs 学习笔记

原 2.Draftjs 学习笔记-Rich Styling

原 3.Draftjs 学习笔记-Entities

原 4.Draftjs 学习笔记-Decorators

原 5.Draftjs 学习笔记-自定义控件（多媒体）

原 6.Draftjs 学习笔记-聊聊自定义样式

原 7.Draftjs 学习笔记-StateToHtml

Draftjs中文翻译1 - 概观

Draftjs中文翻译2 - API Basics API基础

Draftjs中文翻译3 - Rich Styling丰富的造型

Draftjs中文翻译4- 实体

Draftjs中文翻译5 - v0.10 API迁移

Draft.js文档

使用 Draft.js 来构建一个现代化的编辑器

draft.js在知乎的实践

基于Draft.js自定义富文本编辑器

基于Draftjs实现的Electron富文本聊天输入框

基于Draftjs实现的Electron富文本聊天输入框(一) —— 群@功能

基于Draftjs实现的Electron富文本聊天输入框(二) —— 图文输入

基于Draftjs实现的Electron富文本聊天输入框(三) —— Emoji

基于Draftjs实现的Electron富文本聊天输入框(四) —— 自定义快捷键

基于Draftjs实现的Electron富文本聊天输入框(五) —— 问题总结与解决

完美解决问题！

还有下一个问题：光标位置错乱 待解决！！！

---