Как отобразить данные Draft.js, включая гиперссылки? - PullRequest
Новая
       15

Как отобразить данные Draft.js, включая гиперссылки?

1 голос
/ 16 октября 2019

Создание редактора с использованием draft.js. Возникает проблема при отображении, когда он включает теги ссылок. без тега ссылки, работает нормально. Я следовал за этим блогом, чтобы реализовать функцию извлечения.

Сохранение данных в локальном хранилище для тестирования. 

localStorage.setItem("testObject", JSON.stringify(editorData));

затем добавьте это так: 

render() {
    const contentState = convertFromRaw(localStorage.testObject);
    const editorState = EditorState.createWithContent(contentState);
    return (
         <div className="App">
             <Editor editorState={editorState} readOnly={true} />
         </div>
    );

Полужирный шрифт и курсив отображаются правильно, а ссылки - нет. Для примера ссылки нажмите здесь

1 Ответ

0 голосов
/ 17 октября 2019

Вам нужно позволить Draft.js полностью управлять вашими ссылками - вы также должны вставлять ссылки через Draft API.

Чтобы вставить ссылки - используйте RichUtils.toggleLink () API, вы можете найти пример здесь .

Чтобы отобразить ссылки, создайте свой собственный декоратор, который создает элемент ссылки, и зарегистрируйте этот декоратор с draft.js: 

 const Link = (props) => {
  const {url} = Entity.get(props.entityKey).getData();
  return (
    <a href={url}>{props.children}</a>
  )
}

function findLinkEntities(contentBlock, callback) {
  contentBlock.findEntityRanges(
    (character) => {
      const entityKey = character.getEntity();
      return (
        entityKey !== null &&
        Entity.get(entityKey).getType() === 'LINK'
      )
    },
    callback
  )
}

const decorators = [
  { strategy: findLinkEntities, component: Link }
]


const editorState = EditorState.createWithContent(state, new CompositeDecorator(decorators))


<Editor decorators={decorators} 
        editorState={editorState}
    ... />
...