prosemirror: преобразование вывода JSON в HTML

Question

prosemirror: преобразование вывода JSON в HTML

Я пытаюсь преобразовать вывод JSON ProseMirror обратно в HTML (чтобы сохранить его из одной БД в другую). Я новичок в ProseMirror и не уверен, что полностью понимаю связь между моделью, состоянием и схемой.

Судя по тому, что я прочитал, https://github.com/ProseMirror/prosemirror/issues/455 и https://discuss.prosemirror.net/t/example-of-converting-between-formats-for-the-purpose-of-saving/424,

Сначала я должен создать новое состояние на основе базовой схемы, затем использовать DOMSerializer и прикрепить вывод к временному элементу (затем получить innerHtml). Звучит ли это правильно? Любая помощь будет принята с благодарностью.

10

prose-mirror

Источник

user10332393 07 сен '18 в 19:34

2 ответа

Другие вопросы по тегам prose-mirror

user10332393 14 сен '18 в 14:16 2018-09-14 14:16 · Answer 1 · 2018-09-14 14:16

После некоторых копаний вот как я получил это на работу:

Создайте узел, используя.fromJSON
Создайте DOMSerializer на основе схемы, используемой редактором
Передайте узел в сериализатор

Мой код ниже.

const { schema } = require("prosemirror-schema-basic")
const { Node, DOMSerializer } = require("prosemirror-model")
const jsdom = require("jsdom").JSDOM

let dom = new jsdom('<!DOCTYPE html><div id="content"></div>')
let doc = dom.window.document
let target = doc.querySelector("div")
//Demo JSON output from ProseMirror
let content = {
  "doc": {
    "type": "doc",
    "content": [{
      "type": "paragraph",
      "attrs": {
        "align": "left"
      },
      "content": [{
        "type": "text",
        "text": "My sample text"
      }]
    }]
  },
  "selection": {
    "type": "text",
    "anchor": 16,
    "head": 16
  }
}

let contentNode = Node.fromJSON(schema, content.doc)

DOMSerializer
  .fromSchema(schema)
  .serializeFragment(contentNode.content, {
    "document": doc
  }, target)

console.log(doc.getElementById("content").innerHTML)
//<p>My sample text</p>

user5013193 14 мар '23 в 02:18 2023-03-14 02:18 · Answer 2 · 2023-03-14 02:18

Примечание для будущих читателей. Если вы используете React и хотите получать уценку при обновлении содержимого редактора, вот пример.

      import { OnChangeJSON, Remirror } from '@remirror/react';
import { MarkdownExtension } from 'remirror/extensions';
import { useRemirror } from '@remirror/react';
import { RemirrorJSON } from '@remirror/core';


export interface MarkdownControlledEditorProps {
export interface MarkdownControlledEditorProps {
  onChangeJson: (json: RemirrorJSON) => void,
  onChangeMarkdown: (markdown: string) => void,
  initialContent?: string,
}
export const MarkdownControlledEditor = ({
  onChangeJson,
  onChangeMarkdown,
  initialContent,
}: any) => {
  const { manager } = useRemirror({
    selection: 'start',
    extensions: RemirrorExtensionsPreset,
  });

  const _onChangeJson = (json: RemirrorJSON) => {
    onChangeContent({
      json,
      html: manager.store.helpers.getHTML(),
      text: manager.store.helpers.getText(),
      markdown: manager.store.helpers.getMarkdown(),
    });
  }

  return (
    <Remirror
      autoFocus={true}
      autoRender={'start'}
      manager={manager}
      initialContent={initialContent}
    >
      <OnChangeJSON onChange={_onChangeJson}/>
    </Remirror>
  );
};