TextEditorR7

TextEditorR7 - это текстовой редактор для веб-приложений на JavaScript с акцентом на надежность, доступность и производительность. TextEditorR7 нацелен на предоставление оптимального опыта разработчика, чтобы вы могли легко создавать прототипы и внедрять функции с уверенностью. Совмещенный с высокорасширяемой архитектурой, TextEditorR7 позволяет разработчикам создавать уникальные текстовые редакторы, масштабирующиеся по размеру и функциональности

Быстрый старт

import { Editor } from '';

Инициализация текстового редактора.

По умолчанию TextEditorR7 работает с объектом и может возвращать объект или HTML.

Пример с объектом:

const text = 'Hello world';

const json = {
  root: {
    children: [
      {
        children: [
          {
            detail: 0,
            format: 0,
            mode: 'normal',
            style: '',
            text: text,
            type: 'text',
            version: 1
          }
        ],
        direction: 'ltr',
        format: '',
        indent: 0,
        type: 'paragraph',
        version: 1
      }
    ],
    direction: 'ltr',
    format: '',
    indent: 0,
    type: 'root',
    version: 1
  }
};

const onChange = (
  data // json
) => <Editor initialContent={json} onChange={onChange} />;

Также в редактор можно передать HTML-строку.

Пример с HTML:

const html = `
<h2 dir="ltr" style="text-align: left;">
   <span style="background-color: rgb(248, 231, 28); font-family: &quot;Trebuchet MS&quot;; white-space: pre-wrap;">Hello</span>
</h2>
<h2 dir="ltr">
   <br>
</h2>
<p dir="ltr">
   <br>
</p>
<p dir="ltr">
   <span style="font-size: 21px; white-space: pre-wrap;">world</span>
</p>
`

const onChange = (data) => // json

<Editor initialContent={html} onChange={onChange} />

За вывод данных в функции onChange отвечает свойство outputFormat. outputFormat может быть равен либо "html", либо "json". Пример с outputFormat:

const html = `
<h2 dir="ltr" style="text-align: left;">
   <span style="background-color: rgb(248, 231, 28); font-family: &quot;Trebuchet MS&quot;; white-space: pre-wrap;">Hello</span>
</h2>
<h2 dir="ltr">
   <br>
</h2>
<p dir="ltr">
   <br>
</p>
<p dir="ltr">
   <span style="font-size: 21px; white-space: pre-wrap;">world</span>
</p>
`

const onChange = (data) => // html

<Editor initialContent={html} outputFormat="html" onChange={onChange} />

DocSpaceStylesProvider

Используйте DocSpaceStylesProvider, чтобы добавить стили оформления к вашему HTML-контенту.

 import { Editor } from '';

  <DocSpaceStylesProvider>
      <div
        dangerouslySetInnerHTML={{ __html: '<p>Your html here</p>' }}
      />
    </DocSpaceStylesProvider>

Свойства

onChange: (value: string | object) => undefined - функция, срабатывает при каждом изменении редактора и возвращает HTML-строку или объект в зависимости от свойства outputFormat.
onBlur: (value: string | object) => undefined - функция, срабатывает при расфокусировки редактора и возвращает HTML-строку или объект в зависимости от свойства outputFormat.
outputFormat?: 'html' | 'json' - свойство outputFormat передается, если мы хотим на выходе получать HTML-строку, по умолчанию json.
initialContent: string | object - изначальные данные для редактора.
mode?: 'simple' | 'full' | 'editor' - режим редактора: в зависимости от выбранного режима урезается или добавляется новый функционал. По умолчанию full
placeholder?: string - подсказка пока текст не введен.
maxHeight?: number - задает высоту редактора, по умолчанию 100%.
mode?: 'simple' | 'full' - режим редактора: в зависимости от выбранного режима урезается или добавляется новый функционал. По умолчанию full
mode?: 'simple' | 'full' | 'editor' - режим редактора: в зависимости от выбранного режима урезается или добавляется новый функционал. По умолчанию full
placeholder?: string - подсказка пока текст не введен.