如何为AtlasKit编辑器/编辑器核心编写defaultValue？

Question

我正在尝试实现一个简单的受控组件，它输出一个html字符串，并接受一个html字符串。

不幸的是，atlaskit团队关闭了repo中的问题。我在谷歌上看到了这个链接，但在bitbucket上看不到(叹气)：https://bitbucket.org/atlassian/atlaskit-mk-2/issues/89/way-to-get-html-as-it-is-in-atlaskit

还有没有其他人试过？所有文档似乎都没有更新。当给定一个字符串时，defaultValue字段会显示“无效的json”。

https://atlaskit.atlassian.com/packages/editor/editor-core

  import { EditorContext, WithEditorActions } from '@atlaskit/editor-core';
  import { CollapsibleEditor } from 'previous-example';

  <EditorContext>
    <div>
      <CollapsibleEditor />
      <WithEditorActions
        render={actions => (
          <ButtonGroup>
            <Button onClick={() => actions.clear()}>Clear Editor</Button>
            <Button onClick={() => actions.focus()}>Focus Editor</Button>
          </ButtonGroup>
        )}
      />
    </div>
  </EditorContext>;

上面的例子不起作用，任何一个理应为编辑器准备好值的“转换器”也不起作用。

https://atlaskit.atlassian.com/packages/editor/editor-json-transformer

从我收集的少量信息来看，这似乎需要一个

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

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

进一步阅读：-我认为它使用了prosemirror：https://discuss.prosemirror.net/t/how-to-create-a-mention-plugin-similar-to-atlaskit-supporting-popup/1439

Answer 1

这里有几件事要做。首先，你是进口的，import { CollapsibleEditor } from 'previous-example';，是错的。在their website上的一个示例中(请查看该示例的代码)，它实际上被称为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和[JIRATransformer][1]才能使其工作。原因是编辑器在幕后使用了它自己的格式(找不到任何文档，所以您必须深入源代码才能明白我的意思)。最后，您需要将按钮包装在[WithEditorActions][2]中，以获得对编辑器方法的访问，这些编辑器方法允许您提取信息。

Answer 2

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

当您以a>格式提供数据时，编辑器确实接受数据，因此让我们从创建编辑器接受的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帮助我们解决了一个在循环中呈现编辑器的错误。