كتابة محرر WYSIWYG بسيط باستخدام ProseMirror

نظرة عامة على ProseMirror

• prosemirror-model - نموذج مستند يصف جميع مكونات المستند وخصائصه وإجراءاته التي يمكن تنفيذها عليها ؛
  
• prosemirror-state - بنية بيانات تصف حالة المستند الذي تم إنشاؤه في وقت معين ، بما في ذلك الأجزاء والمعاملات المحددة للانتقال من حالة إلى أخرى ؛
  
• عرض prosemirror - عرض المستند في المستعرض والأدوات حتى يتمكن المستخدم من التفاعل مع المستند ؛
  
• prosemirror-convert - وظيفة لتخزين سجل المعاملات ، بمساعدة المعاملات التي يتم تنفيذها والتي تسمح لك بالتراجع إلى الحالات السابقة أو إجراء تطوير مشترك لمستند واحد.
  

• أوامر prosemirror - مجموعة من الأوامر الجاهزة للتحرير. كقاعدة ، تحتاج إلى كتابة شيء أكثر تعقيدًا أو فرديًا بنفسك ، لكن Marijn Haverbeke قام بالفعل ببعض الأشياء لنا ، على سبيل المثال ، حذف جزء محدد من النص ؛
  
• prosemirror-keymap - وحدة من طريقتين لتحديد اختصارات لوحة المفاتيح ؛
  
• 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);

ماذا تفعل مع المحرر بعد ذلك