Reactjs 如何使用AtlasKit编辑器/编辑器核心的defaultValue？

我试图让一个简单的受控组件运行起来，它输出一个html字符串并接收一个html字符串

不幸的是，atlaskit团队关闭了回购中的问题。我在谷歌上看到了这个链接，但在bitbucket上却看不到：

还有人试过吗？所有文档似乎都没有更新。当给定字符串时，defaultValue字段会输出无效的json

上面的示例不起作用，而且任何假定已为编辑器准备好值的转换器也不起作用

从我收集的一点资料来看，似乎需要一段时间

这很糟糕，因为编辑器很漂亮，而且所有其他方面似乎都工作得很好，我就是不能在那里得到一个该死的默认值，这使得它很难用作编辑值的输入

我理解atlaskit团队为什么关闭了这些天程序员忘恩负义的问题，至少可以这么说。希望有人能在这里帮助我

进一步阅读：

---

-我认为它使用了prosemirror:

这里发生了一些事情。首先，您要导入，从“上一个示例”导入{collapsableeditor}；，这是错误的。在一个示例中，检查该示例的代码，它实际上被称为CollapsedEditor并包装编辑器组件。因此，在导入工作之前，您需要修复导入

至于使用HTML字符串并将其导出，我也很难做到这一点，因此我深入研究了源代码。下面是一个基本示例，您可以开始学习：

import React from 'react'
import { Editor, WithEditorActions } from '@atlaskit/editor-core'
import { JIRATransformer } from '@atlaskit/editor-jira-transformer'

export const AtlaskitSimple = () => {
  return (
    <Editor
      contentTransformerProvider={schema => new JIRATransformer(schema)}
      defaultValue={'<p>Hey there!</p>'}
      primaryToolbarComponents={
        <WithEditorActions
          render={actions => (
            <button
              onClick={async () => console.log(await actions.getValue())} //'<p>Hey there!</p>'
            >
              Save
            </button>
          )}
        />
      }
    />
  )
}

---

您需要defaultValue和[JiratTransformer][1]使其工作。原因是编辑器使用了自己的格式，在引擎盖下找不到任何文档，因此您必须深入源代码以了解我的意思。最后，您需要将按钮包装在[WithEditorActions][2]中，以访问允许您提取信息的编辑器方法。

您可以为编辑器设置默认值。但这个过程并不简单。以下是我们将如何做到这一点：

a> 当您以JSON格式提供数据时，编辑器确实会接受数据，因此让我们从创建编辑器接受的JSON开始

import React, { useEffect, useState } from 'react';
import { EditorView } from 'prosemirror-view';
import {
  Editor,
  CollapsedEditor,
  WithEditorActions,
  EditorContext,
  EmojiResource,
} from '@atlaskit/editor-core';

const MainEditor = () => {
  const [firstTimeRenderingdoc, setFirstTimeRenderingdoc] = useState(true);

  const onEditorChange = (editorView: EditorView) => {
    setFirstTimeRenderingdoc(false);

    const output = editorView.state.doc;
    // Now you can save this output doc anywhere and use it inside actions.replaceDocument() function below
  };
  return (
    <EditorContext>
      <div>
        <Editor onChange={onEditorChange} />
        <WithEditorActions
          render={(actions) => (
            <div>
              {actions.replaceDocument(JSON.parse(`load that JSON here`))}
            </div>
          )}
        />
      </div>
    </EditorContext>
  );
};

在onEditorChange中，我们获取编辑器可以读取的JSON，您可以在任何地方保存输出，然后在actions.replaceDocument中呈现数据您可能还需要解析它

PS:-firstTimeRenderingdoc帮助我们解决了编辑器在循环中呈现的错误

import React, { useEffect, useState } from 'react';
import { EditorView } from 'prosemirror-view';
import {
  Editor,
  CollapsedEditor,
  WithEditorActions,
  EditorContext,
  EmojiResource,
} from '@atlaskit/editor-core';

const MainEditor = () => {
  const [firstTimeRenderingdoc, setFirstTimeRenderingdoc] = useState(true);

  const onEditorChange = (editorView: EditorView) => {
    setFirstTimeRenderingdoc(false);

    const output = editorView.state.doc;
    // Now you can save this output doc anywhere and use it inside actions.replaceDocument() function below
  };
  return (
    <EditorContext>
      <div>
        <Editor onChange={onEditorChange} />
        <WithEditorActions
          render={(actions) => (
            <div>
              {actions.replaceDocument(JSON.parse(`load that JSON here`))}
            </div>
          )}
        />
      </div>
    </EditorContext>
  );
};