0

我试图让一个简单的受控组件输出一个 html 字符串并接收一个 html 字符串。

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

4

2 回答 2

5

这里发生了几件事。首先，你是进口的import { CollapsibleEditor } from 'previous-example';，是错误的。在他们网站上的一个示例中（检查该示例的代码），它实际上被称为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]以访问允许您提取信息的编辑器方法。

于 2019-02-26T02:52:46.747 回答
1

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

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可以帮助我们解决循环中编辑器渲染的错误。

于 2020-11-25T17:34:09.837 回答