大佬教程收集整理的这篇文章主要介绍了生产类型错误上的草稿：无法分配给“编辑器”上的属性“当前”：不是对象，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在开发模式下它工作得很好，但在生产中它会出错并在控制台中写道：TypeError：无法分配给“编辑器”上的“当前”属性：不是对象任何想法，我花了将近 2 天的时间来让它工作，但是......？这是我的代码（缩短）
import { EditorState } from 'draft-Js';
import TextEditor from '../../components/TextEditor'
const AddNew = () => {
const [editorState,] = useState(() => EditorState.createEmpty())
return(<TextEditor editorState={editorState}/>)
}
这是文本编辑器组件：
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.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;
很高兴收到任何回复
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）
以上是大佬教程为你收集整理的生产类型错误上的草稿：无法分配给“编辑器”上的属性“当前”：不是对象全部内容，希望文章能够帮你解决生产类型错误上的草稿：无法分配给“编辑器”上的属性“当前”：不是对象所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。