Reactjs 生产类型上的draftjs错误：can'；“不转让给财产”；“当前”；关于；编者"；：不是物体
在开发模式下它工作得很好，但在生产模式下它会出错，在控制台中写道：TypeError:无法在“编辑器”上指定属性“current”：没有对象任何想法，我花了将近2天的时间使它工作，但。。。？这是我的代码（短路）Reactjs 生产类型上的draftjs错误：can'；“不转让给财产”；“当前”；关于；编者"；：不是物体,reactjs,draftjs,Reactjs,Draftjs,在开发模式下它工作得很好，但在生产模式下它会出错，在控制台中写道：TypeError:无法在“编辑器”上指定属性“current”：没有对象任何想法，我花了将近2天的时间使它工作，但。。。？这是我的代码（短路） 从'draft js'导入{EditorState}； 从“../../components/TextEditor”导入TextEditor const AddNew=（）=>{ 常量[editorState，]=useState（（）=>editorState.createEmpty（
从'draft js'导入{EditorState}；
从“../../components/TextEditor”导入TextEditor
const AddNew=（）=>{
常量[editorState，]=useState（（）=>editorState.createEmpty（））
返回（）
}
import React from 'react';
import {Editor, RichUtils,getDefaultKeyBinding,convertToRaw } from 'draft-js';
class TextEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: this?.props?.editorState || {}};
this.focus = () => this.refs.editor.focus();
this.saveContent = (content) => {
setTimeout(() => {window.localStorage.setItem('additional_info', JSON.stringify(convertToRaw(content)));},1000)
}
this.onChange = (editorState) => {
const contentState = editorState.getCurrentContent();
this.saveContent(contentState);
console.log('content state', convertToRaw(contentState));
this.setState({editorState});
};
this.handleKeyCommand = this._handleKeyCommand.bind(this);
this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this);
this.toggleBlockType = this._toggleBlockType.bind(this);
// this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
}
_handleKeyCommand(command, editorState) {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
}
_mapKeyToEditorCommand(e) {
if (e.keyCode === 9 /* TAB */) {
const newEditorState = RichUtils.onTab(
e,
this.state.editorState,
4, /* maxDepth */
);
if (newEditorState !== this.state.editorState) {
this.onChange(newEditorState);
}
return;
}
return getDefaultKeyBinding(e);
}
_toggleBlockType(blockType) {
this.onChange(
RichUtils.toggleBlockType(
this.state.editorState,
blockType
)
);
}
handlePastedText(text,html){
// if they try to paste something they shouldn't let's handle it
if (text.indexOf('text that should not be pasted') != -1) {
// we'll add a message for the offending user to the editor state
const newContent = Modifier.insertText(
setEditorState(editorState.getCurrentContent()),
setEditorState(editorState.getSelection()),
'nice try, chump!'
);
// update our state with the new editor content
this.onChange(EditorState.push(
this.state.editorState,
newContent,
'insert-characters'
));
return true;
} else {
return false;
}
}
render() {
const {editorState} = this.state;
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
var contentState = editorState?.getCurrentContent();
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'paragraph') {
className += ' RichEditor-hidePlaceholder';
}
}
return (
<div className="RichEditor-root">
<BlockStyleControls
editorState={editorState}
onToggle={this.toggleBlockType}
/>
{/*<InlineStyleControls*/}
{/* editorState={editorState}*/}
{/* onToggle={this.toggleInlineStyle}*/}
{/*/>*/}
<div className={className} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={this.mapKeyToEditorCommand}
onChange={this.onChange}
placeholder="Tell a story..."
ref="editor"
spellCheck={false}
handlePastedText={this.handlePastedText}
stripPastedStyles={true}
/>
</div>
</div>
);
}
}
// Custom overrides for "code" style.
const styleMap = {
CODE: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
fontSize: 16,
padding: 2,
},
};
function getBlockStyle(block) {
switch (block.getType()) {
case 'blockquote': return 'RichEditor-blockquote';
default: return null;
}
}
class StyleButton extends React.Component {
constructor() {
super();
this.onToggle = (e) => {
e.preventDefault();
this.props.onToggle(this.props.style);
};
}
render() {
let className = 'RichEditor-styleButton';
if (this.props.active) {
className += ' RichEditor-activeButton';
}
return (
<span className={className} onMouseDown={this.onToggle}>
{this.props.label}
</span>
);
}
}
const BLOCK_TYPES = [
{label: 'Title', style: 'header-two'},
{label: 'Text', style: 'paragraph'},
{label: 'List', style: 'unordered-list-item'},
];
const BlockStyleControls = (props) => {
const {editorState} = props;
const selection = editorState.getSelection();
const blockType = editorState
.getCurrentContent()
.getBlockForKey(selection.getStartKey())
.getType();
return (
<div className="RichEditor-controls">
{BLOCK_TYPES.map((type) =>
<StyleButton
key={type.label}
active={type.style === blockType}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
export default TextEditor;
从“React”导入React；
从'draft js'导入{Editor、RichUtils、getDefaultKeyBinding、convertToRaw}；
类TextEditor扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={editorState:this？.props？.editorState |{}；
this.focus=（）=>this.refs.editor.focus（）；
this.saveContent=（content）=>{
setTimeout（（）=>{window.localStorage.setItem（'additional_info'，JSON.stringify（convertToRaw（content））；}，1000）
}
this.onChange=（editorState）=>{
const contentState=editorState.getCurrentContent（）；
这个.saveContent（contentState）；
log（'content state'，convertToRaw（contentState））；
this.setState（{editorState}）；
};
this.handleKeyCommand=this.\u handleKeyCommand.bind（this）；
this.mapKeyToEditorCommand=this.\u mapKeyToEditorCommand.bind（this）；
this.toggleBlockType=this.\u toggleBlockType.bind（this）；
//this.toggleInlineStyle=this.\u toggleInlineStyle.bind（this）；
}
_handleKeyCommand（命令，编辑器状态）{
const newState=RichUtils.handleKeyCommand（editorState，command）；
如果（新闻状态）{
这个.onChange（newState）；
返回true；
}
返回false；
}
_mapKeyToEditorCommand（e）{
如果（e.keyCode===9/*TAB*/）{
const newEditorState=RichUtils.onTab(
E
这个州，编辑州，
4，/*最大深度*/
);
if（newEditorState！==this.state.editorState）{
此.onChange（newEditorState）；
}
返回；
}
返回getDefaultKeyBinding（e）；
}
_切换块类型（块类型）{
这是一次改变(
RichUtils.toggleBlockType(
这个州，编辑州，
块状
)
);
}
handlePastedText（文本，html）{
//如果他们试图粘贴东西，他们不应该让我们来处理
if（text.indexOf（‘不应粘贴的文本’）！=-1）{
//我们将为违规用户添加一条消息到编辑器状态
const newContent=Modifier.insertText(
setEditorState（editorState.getCurrentContent（）），
setEditorState（editorState.getSelection（）），
“干得好，笨蛋！”
);
//使用新的编辑器内容更新我们的状态
this.onChange（EditorState.push(
这个州，编辑州，
新内容，
“插入字符”
));
返回true；
}否则{
返回false；
}
}
render（）{
const{editorState}=this.state；
//如果用户在输入任何文本之前更改块类型，我们可以
//要么设置占位符的样式，要么隐藏它。让我们现在就隐藏它。
让className='RichEditor'；
var contentState=editorState？.getCurrentContent（）；
如果（！contentState.hasText（））{
如果（contentState.getBlockMap（）.first（）.getType（）！=='段落'）{
className+='RichEditor hidePlaceholder'；
}
}
返回(
{/**/}
);
}
}
//“代码”样式的自定义替代。
常量样式映射={
代码：{
背景颜色：“rgba（0,0,0,0.05）”，
fontFamily:“‘Inconcolata’、‘Menlo’、‘Consolas’、‘monospace’，
尺寸：16，
填充：2，
},
};
函数getBlockStyle（块）{
开关（block.getType（））{
案例'blockquote'：返回'RichEditor blockquote'；
默认值：返回null；
}
}
类StyleButton扩展了React.Component{
构造函数（）{
超级（）；
this.onToggle=（e）=>{
e、 预防默认值（）；
this.props.ontogle（this.props.style）；
};
}
render（）{
让className='RichEditor styleButton'；
如果（此.props.active）{
className+='RichEditor activeButton'；
}
返回(
{this.props.label}
);
}
}
常量块类型=[
{标签：'Title'，样式：'header two'}，
{标签：“文本”，样式：“段落”}，
{标签：“列表”，样式：“无序列表项”}，
];
const BlockStyleControls=（道具）=>{
const{editorState}=props；
const selection=editorState.getSelection（）；
常量块类型=编辑器状态
.getCurrentContent（）
.getBlockForKey（selection.getStartKey（））
.getType（）；
返回(
{BLOCK_TYPES.map（（type）=>
)}
);
};
导出默认文本编辑器；
import React from 'react';
import {Editor, RichUtils,getDefaultKeyBinding,convertToRaw } from 'draft-js';
class TextEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: this?.props?.editorState || {}};
this.focus = () => this.refs.editor.focus();
this.saveContent = (content) => {
setTimeout(() => {window.localStorage.setItem('additional_info', JSON.stringify(convertToRaw(content)));},1000)
}
this.onChange = (editorState) => {
const contentState = editorState.getCurrentContent();
this.saveContent(contentState);
console.log('content state', convertToRaw(contentState));
this.setState({editorState});
};
this.handleKeyCommand = this._handleKeyCommand.bind(this);
this.mapKeyToEditorCommand = this._mapKeyToEditorCommand.bind(this);
this.toggleBlockType = this._toggleBlockType.bind(this);
// this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
}
_handleKeyCommand(command, editorState) {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
}
_mapKeyToEditorCommand(e) {
if (e.keyCode === 9 /* TAB */) {
const newEditorState = RichUtils.onTab(
e,
this.state.editorState,
4, /* maxDepth */
);
if (newEditorState !== this.state.editorState) {
this.onChange(newEditorState);
}
return;
}
return getDefaultKeyBinding(e);
}
_toggleBlockType(blockType) {
this.onChange(
RichUtils.toggleBlockType(
this.state.editorState,
blockType
)
);
}
handlePastedText(text,html){
// if they try to paste something they shouldn't let's handle it
if (text.indexOf('text that should not be pasted') != -1) {
// we'll add a message for the offending user to the editor state
const newContent = Modifier.insertText(
setEditorState(editorState.getCurrentContent()),
setEditorState(editorState.getSelection()),
'nice try, chump!'
);
// update our state with the new editor content
this.onChange(EditorState.push(
this.state.editorState,
newContent,
'insert-characters'
));
return true;
} else {
return false;
}
}
render() {
const {editorState} = this.state;
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
var contentState = editorState?.getCurrentContent();
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'paragraph') {
className += ' RichEditor-hidePlaceholder';
}
}
return (
<div className="RichEditor-root">
<BlockStyleControls
editorState={editorState}
onToggle={this.toggleBlockType}
/>
{/*<InlineStyleControls*/}
{/* editorState={editorState}*/}
{/* onToggle={this.toggleInlineStyle}*/}
{/*/>*/}
<div className={className} onClick={this.focus}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={this.mapKeyToEditorCommand}
onChange={this.onChange}
placeholder="Tell a story..."
ref="editor"
spellCheck={false}
handlePastedText={this.handlePastedText}
stripPastedStyles={true}
/>
</div>
</div>
);
}
}
// Custom overrides for "code" style.
const styleMap = {
CODE: {
backgroundColor: 'rgba(0, 0, 0, 0.05)',
fontFamily: '"Inconsolata", "Menlo", "Consolas", monospace',
fontSize: 16,
padding: 2,
},
};
function getBlockStyle(block) {
switch (block.getType()) {
case 'blockquote': return 'RichEditor-blockquote';
default: return null;
}
}
class StyleButton extends React.Component {
constructor() {
super();
this.onToggle = (e) => {
e.preventDefault();
this.props.onToggle(this.props.style);
};
}
render() {
let className = 'RichEditor-styleButton';
if (this.props.active) {
className += ' RichEditor-activeButton';
}
return (
<span className={className} onMouseDown={this.onToggle}>
{this.props.label}
</span>
);
}
}
const BLOCK_TYPES = [
{label: 'Title', style: 'header-two'},
{label: 'Text', style: 'paragraph'},
{label: 'List', style: 'unordered-list-item'},
];
const BlockStyleControls = (props) => {
const {editorState} = props;
const selection = editorState.getSelection();
const blockType = editorState
.getCurrentContent()
.getBlockForKey(selection.getStartKey())
.getType();
return (
<div className="RichEditor-controls">
{BLOCK_TYPES.map((type) =>
<StyleButton
key={type.label}
active={type.style === blockType}
label={type.label}
onToggle={props.onToggle}
style={type.style}
/>
)}
</div>
);
};
export default TextEditor;