Как выбрать defaultValue для редактора / редактора ядра AtlasKit? - PullRequest
Новая
       32

Как выбрать defaultValue для редактора / редактора ядра AtlasKit?

0 голосов
/ 06 февраля 2019

Я пытаюсь запустить простой управляемый компонент, который выводит строку html и принимает строку html.

К сожалению, команда atlaskit отключила проблемы в репозитории.Я вижу эту ссылку в 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

1 Ответ

0 голосов
/ 26 февраля 2019

Здесь происходит пара вещей.Во-первых, вы импортируете 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], чтобы получить доступ к методам редактора, которые позволяют извлекать информацию.

...