如何为 AtlasKit editor/editor-core 设置默认值？

Question

我正在尝试让一个简单的受控组件运行，它输出一个字符串 html 并接收一个字符串 html.

不幸的是，atlaskit 团队关闭了 repo 中的问题。我在 google 上看到这个 link，但实际上在 bitbucket 上看不到它（叹息）：https://bitbucket.org/atlassian/atlaskit-mk-2/issues/89/way-to-get-html-as-it-is-in-atlaskit

还有其他人尝试过吗？ None 的文档似乎已更新。 defaultValue 字段，当给定一个字符串时，输出 "not valid 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>;

上面的例子不会工作，而且任何 "transformers" 应该为编辑器准备好的值也不会工作。

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 格式提供数据时，编辑器会接受数据，所以让我们从创建编辑器接受的 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 帮助我们解决了编辑器在循环中渲染的错误。

如何为 AtlasKit editor/editor-core 设置默认值？

How to se defaultValue for AtlasKit editor/editor-core?

reactjs

atlaskit