如何为 AtlasKit 编辑器/编辑器核心设置默认值？

Question

我正在尝试获得一个简单的受控组件，该组件输出一串 html 并接收一串 html。

不幸的是，atlaskit 团队关闭了 repo 中的问题。我在谷歌上看到这个链接，但实际上在 bitbucket 上看不到它（叹气）：https : //bitbucket.org/atlassian/atlaskit-mk-2/issues/89/way-to-get-html-as-它在地图集内

有没有其他人试过这个？似乎没有任何文档被更新。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

从我收集的一点点来看，似乎需要一个

It sucks because the editor is beautiful and all the other facets seems to be working well, I just can't get a damn default value in there which makes it hard to use as an input for editing values.

I understand why atlaskit team turned off issues (programmers these days are ungrateful, to say the least). Hopefully somebody can help me here though!

Further Reading: - I think it uses 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';，是错误的。在他们网站上的一个示例中（检查该示例的代码），它实际上被称为 theCollapsedEditor并包装了编辑器组件。因此，您需要先修复导入，然后才能使用。

至于使用 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]以访问允许您提取信息的编辑器方法。