如何解决带有初始值的 Draft.js 编辑器
我正在使用 HTML 编辑器处理 React 组件。
目前正在尝试使用 Draft.js (WYIWYG Draft.js) 中的 WYSIWYG 编辑器
文档似乎面向基于类的组件,但我正在尝试使用功能组件。
我有来自 API 调用的 HTML 文本并存储在如下变量中:
var values.overview = "<p>this is html text</p>"
我希望这是初始值 - 在编辑器组件中可见和可编辑。
我已经获得了显示文本的能力,但我很确定这是一种非常有缺陷的方法:
const [editorState,setEditorState] = useState(EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(values.overview))));
和组件:
<Editor
editorState={editorState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
/>
如何根据用户输入更新状态?
我是否需要使用 Content State 来进行用户输入?
管理这种状态的最佳方法是什么?
我已经坚持了一段时间了。
解决方法
这似乎有效....
var overview = "<u>this is my text</u>";
const contentDataState = ContentState.createFromBlockArray(convertFromHTML(overview));
const editorDataState = EditorState.createWithContent(contentDataState);
const [editorState,setEditorState] = useState(editorDataState);
const onEditorStateChange = (editorStateData) => {
setEditorState(editorStateData);
};
const data = draftToHtml(convertToRaw(editorState.getCurrentContent()));
console.log(data);
return (
<>
<Editor
editorState={editorState}
onEditorStateChange={onEditorStateChange}
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
toolbarClassName="toolbar-class"
toolbar={{
options: ['inline','list','textAlign'],inline: {
options: ['bold','italic','underline'],},list: {
options: ['unordered','ordered','indent','outdent'],textAlign: {
options: ['left','center','right'],}}
/>
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。