How to use the ProseMirror

BranceLee · April 2, 2019, 3:38pm

I use the Basic demo to create richEditor in react, and the web shows the right inputArea, and I GET the data from the input by

    import React, { useEffect,useState } from 'react';
    import { EditorState } from 'prosemirror-state';
    import { EditorView } from 'prosemirror-view';
    import { Schema, DOMParser } from 'prosemirror-model';
    import { schema } from 'prosemirror-schema-basic';
    import { addListNodes } from 'prosemirror-schema-list';
    import { exampleSetup } from 'prosemirror-example-setup';

    ...

    localStorage.setItem('state',JSON.stringify(window.view.state.doc.toJSON()))

/** Save the value that will send to the server, when I click the submit btn**/

and I will get the data when I first render in Effect or the componentDidmount

  useEffect(() => {
    const mySchema = new Schema({
      nodes: addListNodes(schema.spec.nodes, 'paragraph', 'block'),
      marks: schema.spec.marks,
    });
    console.log('state',JSON.parse(localStorage.getItem('state')))
    window.view = new EditorView(document.querySelector('#editor'), {
      state: EditorState.create({
        doc: mySchema.nodeFromJSON(JSON.parse(localStorage.getItem('state'))),
        plugins: exampleSetup({ schema: mySchema }),
      }),
    });
  },[]);