braft-editor
braft-editor copied to clipboard
Published
20 hours ago •
margox
margox
工具栏清空后，再次使用默认，插入媒体功能失效
if(this.state.edit){
editor = <BraftEditor value={this.state.editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
/>
} else {
editor = <BraftEditor value={this.state.editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}
draftProps={{readOnly: true}}
controls={[]}
/>
}
在条件为 false 渲染后，媒体按钮不起作用，其余按钮正常。
"braft-editor": "^2.1.4",
版本是这个，看到 npm 上好像是 20 个小时前提交的，应该是更新过了，但是还是与之前一样有问题。
已经重新编译过了，我这边测试，首先要渲染带有 controls={['']} 的组件，再渲染默认的就会出现问题。
另外，如果 controls 指定为 controls={['media']} 就正常了。
我这边用的下面的代码测试的，应该跟你的情况是一样的吧，2秒后显示所有控件，但是点媒体按钮是有效的，你那边点媒体按钮无效，那控制台有什么报错出现么？你的React版本是什么？
import React from 'react'
import ReactDOM from 'react-dom'
import BraftEditor from 'braft-editor'
class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
showControls: false
}
}
componentDidMount () {
setTimeout(() => {
this.setState({
showControls: true
})
}, 2000)
}
render() {
const { editorState, showControls } = this.state
return (
<div>
<div className="demo" id="demo">
{!showControls ? (
<BraftEditor draftProps={{readOnly: true}} controls={[]}/>
) : (
<BraftEditor />
)}
</div>
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector('#root'))
另外看一下，点那个按钮的时候，页面的DOM结构里面有么有多出来类似下面的部分：
控制台没有报错，react 版本是 "react": "^16.5.1",
import React from 'react'
// 引入编辑器以及EditorState子模块
import BraftEditor, { EditorState } from 'braft-editor'
import { Button, notification, Card, Icon, Tooltip, message } from 'antd';
// 引入编辑器样式
import 'braft-editor/dist/index.css'
export default class EditorDemo extends React.Component {
static defaultProps = {
htmlContent: '测试',
};
constructor () {
super();
this.state = {
// 创建一个空的editorState作为初始值
editorState: EditorState.createFrom(''),
bordered: false,
Action: this.CardAction['view'],
showControls: false,
};
}
componentDidMount () {
// 假设此处从服务端获取html格式的编辑器内容
// const htmlContent = await fetchEditorContent()
// const htmlContent = 'test';
// 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
this.setState({
editorState: EditorState.createFrom(this.props.htmlContent),
})
}
submitContent = async () => {
// 在编辑器获得焦点时按下ctrl+s会执行此方法
// 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
const htmlContent = this.state.editorState.toHTML()
// const result = await saveEditorContent(htmlContent)
};
handleEditorChange = (editorState) => {
this.setState(
{
editorState,
}
);
};
handleEdit = () => {
this.setState(
{
bordered: true,
Action: this.CardAction['edit'],
showControls: true,
}
);
message.success('切换到编辑模式~');
};
render () {
const { showControls } = this.state;
return (
<Card
title={'文章标题'}
>
<Card
type="inner"
bordered={this.state.bordered}
actions={this.state.Action}
>
{!showControls ? (
<BraftEditor value={this.state.editorState} draftProps={{readOnly: true}} controls={[]}/>
) : (
<BraftEditor value={this.state.editorState}
onChange={this.handleEditorChange}
onSave={this.submitContent}/>
)}
</Card>
</Card>
)
}
}
我是通过按钮的 onClick 事件来更新 state。
