Answer the question
In order to leave comments, you need to log in
Draft.js copy paste styles?
Welcome all. Who has worked with draft.js? I need help...
Actually, the code below adds an editor for the text, everything works fine, but the following question arises:
Editor has options in which I describe the tools I need, in fact I only need a couple. But what about the fact that when copy-pasting text from outside, the Editor pulls up unnecessary styles, including color, indents, etc. I know there is a stripPastedStyles editor that disables copying styles completely. But I need it to recognize links, but not the rest of the styles. How to be?
import React, { useState, useEffect } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw, convertFromRaw } from 'draft-js';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
export default function TextEditor({ description, changeDescription }) {
const rawDescription = convertFromRaw(JSON.parse(description));
const [content, setContent] = useState(
EditorState.createWithContent(rawDescription)
);
const toolbar = {
options: ['inline', 'link', 'list', 'textAlign', 'history'],
inline: { inDropdown: true },
list: { inDropdown: true },
textAlign: { inDropdown: true },
};
const handleChangeDescription = editorState => {
const contentState = editorState.getCurrentContent();
const json = JSON.stringify(convertToRaw(contentState));
setContent(editorState);
changeDescription(json);
};
return (
<div className="text-form-editor">
<Editor
wrapperClassName="demo-wrapper"
editorClassName="nts-input-desc editor-custom-styles"
editorState={content}
onEditorStateChange={handleChangeDescription}
toolbar={toolbar}
/>
</div>
);
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question