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

【问题标题】：How to se defaultValue for AtlasKit editor/editor-core?如何为 AtlasKit 编辑器/编辑器核心设置默认值？
【发布时间】：2019-06-30 09:50:17
【问题描述】：

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

不幸的是，atlaskit 团队关闭了 repo 中的问题。我在 google 上看到了这个链接，但实际上在 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

【问题讨论】：

标签： reactjs atlaskit

【解决方案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] 中，以访问允许您提取信息的编辑器方法。

【讨论】：

【解决方案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 帮助我们解决了编辑器循环渲染的错误。

【讨论】：