P
P
ParaBellum5772020-01-22 17:18:00
JavaScript
ParaBellum577, 2020-01-22 17:18:00

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?
jyWG6R2.png

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 question

Ask a Question

731 491 924 answers to any question