React-draft-wysiwyg: Input and output HTML changed

Created on 22 Mar 2018  路  2Comments  路  Source: jpuri/react-draft-wysiwyg

I am working with react-draft-wysiwyg.

All Html Tags are removed from text when I get content from editor.

For example:
Input:
const html = ' Hello world!

this is my test code

Hey this editor rocks

';

Output:

 Hello world!  this is my test code

Hey this editor rocks

span and div tags removed.

How can I resolve this.

Thanks in advance

Most helpful comment

Hello. I have make that (But i want to that be button on instruments panel, as "Show Source HTML" or "Edit HTML") :

/.../
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

        onEditorStateChange(event){
            let editorState = event; 
            let editorSourceHTML = draftToHtml(convertToRaw(event.getCurrentContent()))
            console.log(editorState );
        },

        handleChange(event){
            let value = event.target.value;

            const blocksFromHtml = htmlToDraft(value);
            const { contentBlocks, entityMap } = blocksFromHtml;
            const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
            const editorState = EditorState.createWithContent(contentState);

            let editorState = editorState; 
            let editorSourceHTML = value;
                        console.log(editorSourceHTML);
        },
/.../
/.../
                            <Editor 
                                  editorState={editorState}
                        onEditorStateChange={onEditorStateChange}
                             />     

                             <textarea  value={editorSourceHTML} 
                                        onChange={handleChange}
                             ></textarea>
/.../

All 2 comments

Hello. I have make that (But i want to that be button on instruments panel, as "Show Source HTML" or "Edit HTML") :

/.../
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

        onEditorStateChange(event){
            let editorState = event; 
            let editorSourceHTML = draftToHtml(convertToRaw(event.getCurrentContent()))
            console.log(editorState );
        },

        handleChange(event){
            let value = event.target.value;

            const blocksFromHtml = htmlToDraft(value);
            const { contentBlocks, entityMap } = blocksFromHtml;
            const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
            const editorState = EditorState.createWithContent(contentState);

            let editorState = editorState; 
            let editorSourceHTML = value;
                        console.log(editorSourceHTML);
        },
/.../
/.../
                            <Editor 
                                  editorState={editorState}
                        onEditorStateChange={onEditorStateChange}
                             />     

                             <textarea  value={editorSourceHTML} 
                                        onChange={handleChange}
                             ></textarea>
/.../

@semiromid Can find help here: https://github.com/jpuri/react-draft-wysiwyg/issues/315 ;)
And here: https://github.com/jpuri/react-draft-wysiwyg/issues/772#issuecomment-460251352

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MaDejing picture MaDejing  路  3Comments

jpuri picture jpuri  路  4Comments

FriOne picture FriOne  路  3Comments

ananddodia picture ananddodia  路  4Comments

Huespal picture Huespal  路  3Comments