javascript - 单击时反应草稿所见即所得工具栏不起作用?
问题描述
当我按正常、图像、链接等时,它没有下拉菜单,这是怎么回事?
import React, { Component, Fragment } from 'react';
import { EditorState, ContentState, convertToRaw, convertFromHTML } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
// import htmlToDraft from 'html-to-draftjs';
class DraftEditor extends Component {
constructor(props) {
super(props)
this.state = {
editorState: EditorState.createEmpty(),
}
}
componentDidMount() {
console.log(this.props.defaultValue)
if (this.props.defaultValue) {
this.setState({
editorState: EditorState.createWithContent(
ContentState.createFromBlockArray(
convertFromHTML(this.props.defaultValue)
)
)
})
}
}
onEditorStateChange = (editorState) => {
const html = draftToHtml(convertToRaw(editorState.getCurrentContent()))
this.setState({ editorState: editorState }, () => {
this.props.onEditorStateChange(html)
});
};
render() {
const { editorState } = this.state;
return (
<Fragment>
<Editor
editorState={editorState}
// wrapperClassName="demo-wrapper"
// editorClassName="demo-editor"
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={this.onEditorStateChange}
/>
{/* <textarea
disabled
value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
/> */}
</Fragment>
);
}
}
export default DraftEditor
解决方案
推荐阅读
- android - 线性布局内的按钮位置错误
- docker - pm2-runtime 生态系统 npm 脚本失败
- ignite - 当节点增加到 2 时点燃减速
- python - 如何从元组中删除引号,然后将它们存储为元组
- android-studio - Kotlin:使用毕加索加载图像,旋转 90 度的人像图像
- java - 设置CameraX图像采集文件路径
- vue.js - 如何从其父组件下的组件打开和关闭 v-dialog?使用 Vuex?
- python-3.x - 在循环内仅打印一次输出
- python - 可以在表格中切换角色和状态
- azure - 如何使用 Db Transaction 向 Microsoft EventHub 发送消息?