ProMMirror के साथ एक सरल WYSIWYG संपादक लिखना

प्रोसेमिरर का अवलोकन

• अभियोजक-मॉडल - एक दस्तावेज मॉडल जो किसी दस्तावेज़ के सभी घटकों, उनकी संपत्तियों और कार्यों का वर्णन करता है जो उन पर किया जा सकता है;
  
• अभियोजक-राज्य - एक डेटा संरचना जो एक निश्चित समय पर निर्मित दस्तावेज़ की स्थिति का वर्णन करती है, जिसमें चयनित टुकड़े और एक राज्य से दूसरे राज्य में जाने के लिए लेनदेन शामिल है;
  
• अभियोजक-दृश्य - ब्राउज़र और टूल में दस्तावेज़ की प्रस्तुति ताकि उपयोगकर्ता दस्तावेज़ के साथ बातचीत कर सके;
  
• अभियोजन-परिवर्तन - लेन-देन के इतिहास को संग्रहीत करने के लिए एक कार्यात्मक, जिसकी मदद से लेनदेन को लागू किया जाता है और जो आपको पिछले राज्यों में वापस रोल करने या एक दस्तावेज़ के संयुक्त विकास का संचालन करने की अनुमति देता है।
  

• प्रोसेमिरर-कमांड - संपादन के लिए तैयार कमांड का एक सेट। एक नियम के रूप में, आपको कुछ और अधिक जटिल या व्यक्तिगत लिखने की आवश्यकता है, लेकिन मैरिजन हावेर्बके ने पहले ही हमारे लिए कुछ चीजें की हैं, उदाहरण के लिए, पाठ के चयनित टुकड़े को हटाना;
  
• अभियोजक-कीमैप - कीबोर्ड शॉर्टकट निर्दिष्ट करने के लिए दो तरीकों का एक मॉड्यूल;
  
• prosemirror-history – , .. , , , ;
  
• prosemirror-schema-list – , ( DOM-, , ).
  

ProseMirror

import { Schema } from "prosemirror-model";

const mySchema = new Schema({
    nodes: {
        doc: {
           content: 'block'
        },
        text: {},
        paragraph: {
            content: 'inline',
            group: 'block',
            toDOM: function toDOM(node) {
                return ['p', {class: 'paragraph'}, 0];
            },
        },
    },
});

<p class="paragraph">Content of the paragraph</p>

import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Schema } from "prosemirror-model";

const mySchema = new Schema({
    nodes: {
        doc: {
            content: 'block+'
        },
        text: {
            group: 'inline',
            inline: true
        },
        paragraph: {
            content: 'inline*',
            group: 'block',
            toDOM: function toDOM(node) {
                return ['p', {class: 'paragraph'}, 0];
            },
        },
    },
});

/**
 * @classdesc  
 * @param {Object} el DOM-,    
 */
export default class Wysiwyg {
    constructor(el) {
        this.el = el;
    }

    /**
      * @description     
      * @param {Object} content ,    
      */
    setArticle(content) {
        const state = EditorState.fromJSON(
            {schema: mySchema},
            content,
        );
        const view = new EditorView(this.el, {state: state});
    }
}

<div id="editor"></div>

//     
import Wysiwyg from 'wysiwyg';

const root = document.getElementById('editor');
const myWysiwyg = new Wysiwyg(root);
myWysiwyg.setArticle();

content: [
    {
        type: 'paragraph',
        value: '    WYSIWYG-',
    },
]

//     
import Wysiwyg from 'wysiwyg';

const root = document.getElementById('editor');
const myWysiwyg = new Wysiwyg(root);
const content = {
    type: 'doc',
    content: [
        {
            type: 'paragraph',
            value: 'Hello, world!',
        },
        {
            type: 'paragraph',
            value: 'This is my first wysiwyg-editor',
        }
    ],
};
myWysiwyg.setArticle(content);

आगे संपादक के साथ क्या करना है