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

Posted 2023-05-01

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

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

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

未定义窗口 - react-draft-wysiwyg 与下一个 js (s-s-r) 一起使用

【中文标题】未定义窗口 - react-draft-wysiwyg 与下一个 js (s-s-r) 一起使用

【英文标题】：window is not defined - react-draft-wysiwyg used with next js (s-s-r)

【发布时间】：2020-12-06 14:27:35

【问题描述】：

我正在开发一个富文本编辑器，用于将纯 html 转换为带有下一个 js 用于 s-s-r 的编辑器内容。我得到了这个错误窗口没有定义所以我搜索这个github的解决方案link

它使用了next js的动态导入功能。

而不是直接导入编辑器import Editor from "react-draft-wysiwyg";

它使用这段代码来动态导入编辑器

const Editor = dynamic(
  () => 
    return import("react-draft-wysiwyg").then(mod => mod.Editor);
  ,
   s-s-r: false 
);

尽管我已经安装了这个 react-draft-wysiwyg 模块，但我仍然收到此错误

ModuleParseError: Module parse failed: Unexpected token (19:9)
You may need an appropriate loader to handle this file type.
| import dynamic from "next/dynamic";
| var Editor = dynamic(function () 
>   return import("react-draft-wysiwyg").then(function (mod) 
|     return mod.Editor;
|   );

这是我的全部代码

import React,  Component  from "react";
import  EditorState  from "draft-js";
// import  Editor  from "react-draft-wysiwyg";
import dynamic from "next/dynamic";

const Editor = dynamic(
  () => 
    return import("react-draft-wysiwyg").then(mod => mod.Editor);
  ,
   s-s-r: false 
);

class MyEditor extends Component 
  constructor(props) 
    super(props);
    this.state =  editorState: EditorState.createEmpty() ;
  

  onEditorStateChange = editorState => 
    this.setState( editorState );
  ;

  render() 
    const  editorState  = this.state;

    return (
      <div>
        <Editor
          editorState=editorState
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange=this.onEditorStateChange
          placeholder="The message goes here..."
        />
      </div>
    );
  


export default MyEditor;

请帮帮我。谢谢。

【问题讨论】：

我的日志有 samo 错误：\react-draft-wysiwyg.js:1:393) undefined window ... 是同一个错误点吗？

错误信息是什么？它认为是因为在未定义窗口的服务器端渲染组件

其实我的代码和你的一样，在我的项目中运行良好

【参考方案1】：

这里有一个解决方法

import dynamic from 'next/dynamic'
import  EditorProps  from 'react-draft-wysiwyg'

// install @types/draft-js @types/react-draft-wysiwyg and @types/draft-js @types/react-draft-wysiwyg for types

const Editor = dynamic<EditorProps>(
  () => import('react-draft-wysiwyg').then((mod) => mod.Editor),
   s-s-r: false 
)

【讨论】：

动态导入修复了安装类型时没有定义窗口的错误，使用EditorProps修复了Typescript中的类型错误

【参考方案2】：

在 React 使用 useEffect 钩子更新 DOM 后，尝试返回 Editor。例如：

const [editor, setEditor] = useState<boolean>(false)
  useEffect(() => 
    setEditor(true)
  )

  return (
    <>
      editor ? (
        <Editor
          editorState=editorState
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange=this.onEditorStateChange
          placeholder="The message goes here..."
        />
      ) : null
    </>
  )

【讨论】：

这个问题不是在加载组件时出现，而是在导入组件时出现。