react-draft-wysiwyg 默认值样式不加载

Question

我无法在React-draft-wysiwyg中加载默认值样式。Codesandbox链接:编辑器

我试了什么?我使用react-draft-wysiwyg库进行编辑，使用draft-js进行初始化和转换，并使用样式传递默认值。如果我删除样式标签，它工作得很好。但是在添加样式之后，它就不起作用了。如何修复默认值

中的样式问题

import { Editor } from "react-draft-wysiwyg";
import { EditorState, ContentState, convertFromHTML } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
export default function App() {
const defaultValueRender = !true;
const defaultValue = "**<p style="color:red**">This is a paragraph.</p>";
const initialState = () => EditorState.createEmpty();
const [editorState, setEditorState] = useState(initialState);
useEffect(() => {
if (defaultValue !== "") {
setEditorState(
EditorState.createWithContent(
ContentState.createFromBlockArray(convertFromHTML(defaultValue))
)
);
}
}, []);
const onChange = async (value) => {
await setEditorState(value);
};
return (
<div className="App">
<Editor
editorState={editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={(value) => onChange(value)}
stripPastedStyles
ariaLabel="draftEditor"
/>
</div>
);
}

Answer 1

您可以使用html-to-draftjs将html字符串转换为内联样式。

import React, { useState } from 'react';
import PropTypes from 'prop-types';
// DRAFT
import { EditorState, ContentState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
// PURIFY
import DOMPurify from 'dompurify';
// INITIAL STATE
// EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(defaultValue)))
const getInitialState = (defaultValue) => {
if (defaultValue) {
const blocksFromHtml = htmlToDraft(defaultValue);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
return EditorState.createWithContent(contentState);
} else {
return EditorState.createEmpty();
}
};
const DraftEditor = ({ defaultValue, onChange }) => {
const [editorState, setEditorState] = useState(getInitialState(defaultValue));
const onEditorChange = (val) => {
setEditorState(val);
const rawContentState = convertToRaw(val.getCurrentContent());
const htmlOutput = draftToHtml(rawContentState);
const cleanHtml = DOMPurify.sanitize(htmlOutput);
onChange && onChange(cleanHtml);
};
return (
<Editor
editorState={editorState}
onEditorStateChange={onEditorChange} />
);
};
DraftEditor.propTypes = {
defaultValue: PropTypes.string,
onChange: PropTypes.func.isRequired,
};
export default DraftEditor;

Answer 2

多亏了gokhan的回答，我终于解决了初始值为react-draft-wysiwyg + react-hook-form

import React, { useState, useEffect, useCallback } from 'react'
import { ContentState, EditorState, convertToRaw } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import htmlToDraft from 'html-to-draftjs'
import draftToHtml from 'draftjs-to-html'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import { styContainer, styWrapper, styToolbar, styEditor } from './style'
const getInitialState = (defaultValue) => {
if (defaultValue) {
const blocksFromHtml = htmlToDraft(defaultValue)
const { contentBlocks, entityMap } = blocksFromHtml
const contentState = ContentState.createFromBlockArray(
contentBlocks,
entityMap
)
return EditorState.createWithContent(contentState)
} else {
return EditorState.createEmpty()
}
}
const RichEditor = ({ defaultValue, onChange }) => {
const [editorState, setEditorState] = useState()
const [defaultValueState, setdefaultValueState] = useState()
useEffect(() => {
if (defaultValue) {
const initialState = getInitialState(defaultValue)
onEditorDefaultStateChange(initialState)
}
}, [onEditorDefaultStateChange, defaultValue])
const onEditorDefaultStateChange = useCallback(
(editorState) => {
setdefaultValueState(editorState)
return onChange(
draftToHtml(convertToRaw(editorState.getCurrentContent()))
)
},
[onChange]
)
const onEditorStateChange = useCallback(
(editorState) => {
setEditorState(editorState)
return onChange(
draftToHtml(convertToRaw(editorState.getCurrentContent()))
)
},
[onChange]
)
return (
<div className={styContainer}>
<Editor
editorState={editorState ? editorState : defaultValueState}
onEditorStateChange={onEditorStateChange}
wrapperClassName={styWrapper}
toolbarClassName={styToolbar}
editorClassName={styEditor}
/>
</div>
)
}
RichEditor.propTypes = {}
RichEditor.defaultProps = {}
export default RichEditor