rich text editor

Предупреждение о предстоящем переломном изменении

18.10. Мы выпустим новую крупную версию (V8) богатого текстового редактора, который является повторным записи старой кодовой базы. Это предупреждение не имеет решающего критического для пользователей пакетов NPM, использующих управление версиями, но пользователи UNPKG Bundle (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js) заметят, что последний пакет кода больше не будет работать, как ожидалось. Чтобы избежать нарушения изменения в вашей системе, вы можете явно установить версию пакета UNPKG в последнюю стабильную версию V7 следующим образом: http://unpkg.com/[email protected]/dist/rich-text-editor-bundle.js

Это даст вам время для разработки ваших систем для приспособления к новой версии после ее выхода.

Abitti.net

Использование политики торговой марки Abitti

Богатый текстовый редактор с математической поддержкой для финского совета по экзаменам. Живая демонстрация может быть найдена на https://math-demo.abitti.fi/

Поскольку V4.0.0 предоставляется только код ES2017 с модулями ES (в dist каталоге). Если вы хотите использовать эту библиотеку, вероятно, такая пучка, как WebPack или RULLUP.

Использование

Использование с NPM

Установите пакет с npm install rich-text-editor . Богатый текстовый редактор может быть либо использован как

• Компонент реагирования import RichTextEditor from 'rich-text-editor'
• или в качестве функции в приложениях, которые не используют React import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

Большинство свойств, передаваемых компоненту или функции инициализации, описаны ниже. Больше информации можно найти в типах и/или исходном коде.

Использование в качестве пучка CDN

Добавьте тег скрипта на свою страницу HTML, источник которого- https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js , eg <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script> .

Это добавит makeRichText в окно, которое можно использовать для инициализации редактора.

Функция принимает следующие параметры в качестве объекта:

Ключ	По умолчанию
контейнер	Document.getElementById ('Rich-Text-Editor-Root')
язык	'Fi'
базовый	''
разрешенныефилетипы	['image/png', 'image/jpeg']
OnValueChange	() => {}
TextareaProps	{}

Пример:

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

TextareaProps передаются в базовый элемент Div, который является видимым элементом редактора, здесь это актуальны для конфигурации пользователей CDN:

Ключ	тип	Цель
AriAinvalid	логический	Добавить арию-инвалид
arialabelledby	нить	Добавить арию
EditorStyle	React.cssproperties	Прямые свойства CSS в элемент редактора
классное имя	нить	Дополнительное имя класса (ы) для элемента редактора
идентификатор	нить	Идентификационное поле для элемента редактора
ланг	нить	Lang-Field для редактора Element для доступности

Цель (прочитайте это перед отправкой)

Был разработан богатый текстовый редактор, чтобы позволить кандидатам финского экзамена по магистратуре для прикрепления скриншотов и писать уравнения как часть их представлений. Наша цель состоит не в том, чтобы создать замену в общем назначении для Textarea, а редактор, который работает в Abitti и его встроенном браузере.

Пока мы празднуем каждый отчет об ошибке, запрос функции и запрос на то, что мы любезно просим вас запомнить следующее:

• Большинство вопросов, связанных с введением формул и рендеринга латекса, вызваны библиотеками MathJax и Mathquill. У нас нет ресурсов для написания запросов на привлечение на основе вопросов, представленных нам. По аналогичным причинам мы не будем передавать вопросы вверх по течению, сообщаемые нам.
• Мы не обращаем внимания на проблемы или не обращаем запросов, которые выходят за пределы нашей миссии - Абитти.

Мы надеемся, что вы понимаете наше желание сосредоточиться на нашей цели, указанной законом.

Зависимости

• Mathquill (https://github.com/digabi/mathquill)
• Матхакс-узлы
• JQuery
• Слухлизировать-HTML

Начиная

1. Установите node.js
2. Запустите npm install .
3. Запустите npm run dev .
4. Тесты браузера: http: // localhost: 5111/test/tests.html
5. Ручное тестирование: http: // localhost: 5111/test/tests.html? Grep = Руководство

Тестирование пакета на местном уровне

1. Запустить npm run build
2. Запустить npm run dev-server
3. Запустите простой HTTP -сервер в корне проекта, например python3 -m http.server 8080
4. Изменить тег скрипта dev/index.html , чтобы указать на пакет: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (не проводите это).
5. Перейдите в http: // localhost: 8080/dev/index.html

Пример прямого использования

Демо: http://digabi.github.io/rich-text-editor/

Источник: https://github.com/digabi/rich-text-editor/blob/master/index.html

Лицензия

https://opensource.org/licenses/mit