Do you have an example where which shows the editor along with the save, update and retrieve data from a source ?

PManager1 commented 6 years ago

there are a bunch of plugins etc and im confused which way to follow, your help will be nice! thx!

jpuri commented 6 years ago

hey @jpca999 check examples here: https://github.com/jpuri/react-draft-wysiwyg/tree/master/stories

this one is good to convert to and from raw draft content state: https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/ConvertFromRawDraftContent/index.js

PManager1 commented 6 years ago

@jpuri that was helpful link, another question:

now i got so much data after json stringify,, whats the best way to save it to the database, so that next time user logs in, he can start working from where he left ?

Heres the output

Full code here

// I am Able to chage the data on the Editor

// import React from 'react'; import React, { Component } from "react"; import { Link } from 'react-router-dom'; import SurveyList from './surveys/SurveyList';

import { EditorState, convertToRaw, ContentState } from 'draft-js';

import { Editor } from 'react-draft-wysiwyg';

import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

import draftToHtml from 'draftjs-to-html'; import htmlToDraft from 'html-to-draftjs';

// import { convertFromHTML, ContentState, EditorState} from 'draft-js'; import { convertFromHTML, contentState, editorState, convertFromRaw } from 'draft-js'; // import {stateFromHTML} from 'draft-js-import-html';

// NEW

const contentBlocks = convertFromHTML('

Content writable for the html pdf of

');

const sampleEditorContent = ContentState.createFromBlockArray(contentBlocks);

// NEW END

const content = {"entityMap":{},"blocks":[{"key":"637gr","text":"Initialized from content state.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]};

class Contracts extends Component {

constructor(props) {
super(props);
const contentState = convertFromRaw({"entityMap":{},"blocks":[{"key":"637gr","text":"Initialized from content state.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}]});
const editorState = EditorState.createWithContent(contentState);
this.state = {
  editorState,
}

}

onEditorStateChange: Function = (editorState) => { this.setState({ editorState, }); };

render() {
  const { editorState } = this.state;
  return (
    <div>
      <div>
      <button className="btn waves-effect waves-light" type="submit" name="action">Create New
        <i className="material-icons right">add</i>
      </button>

      <button className="btn waves-effect waves-light" type="submit" name="action">Save current changes
        <i className="material-icons right">save</i>
      </button>

      Select Contract
      </div>

      <Editor
        editorState={editorState}
        toolbarClassName="rdw-storybook-toolbar"
        wrapperClassName="rdw-storybook-wrapper"
        editorClassName="rdw-storybook-editor"
        onEditorStateChange={this.onEditorStateChange}
      />
      <textarea
        disabled
        value={JSON.stringify(editorState, null, 4)}
      />
    </div>
  );
}

}

export default Contracts;

PManager1 commented 6 years ago

@jpuri I dont unerstand why are we using the raw content and not the html ?

jpuri commented 6 years ago

@jpca999: saving editor content in JSON format is better as its more flexible. You can easily save content as JSON re-hydrate editor from it.

You can also derive HTML from JSON using this library.

jpuri commented 6 years ago

Hey @jpca999 , I am closing this issue. Plz feel free to re-open if you are still facing trouble.

thatsmeamal commented 6 years ago

@jpuri How can more inline styles be incorporated into your editor ?

jpuri / react-draft-wysiwyg

Do you have an example where which shows the editor along with the save, update and retrieve data from a source ? #545