react native rich editor скачать - react native rich editor Reditor Supper Code скачать

react native rich editor

Другие ресурсы

v1.9.0

Скачать

Реагировать

Полностью функциональный текстовый редактор богатого текста как для Android, так и для iOS (macOS и Windows)?

Если вы хотите использовать Flutter , вы можете проверить здесь, чтобы добавить flutter_rich_editor

 yarn add react-native-pell-rich-editor
or
npm i react-native-pell-rich-editor

Кроме того, следуйте инструкциям, чтобы добавить нативную зависимость react-native-webview .

Онлайн предварительный просмотр (некоторые функции)
Пример крючков переписывается

Проблема прокрутки

### usecontainer = {true} необходимо размещать в ScrolView и добавить метод обратного вызова oncursorPosition , чтобы обрабатывать позиционирование стержня прокрутки, см. Примеры this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});

`RichEditor`

Компонент редактора. Просто поместите этот компонент в иерархию вашего взгляда, чтобы получить полностью функциональный редактор богатого текста.

RichEditor берет следующий необязательный реквизит:

html
Принимает пользовательский HTML, позволяя сделать свои собственные настройки
placeholder
Оберните заполнитель по контенту редактора
initialContentHTML
HTML, который будет отображаться в разделе содержимого при загрузке.
initialFocus
Логическое значение для первоначального запроса на контент фокусируется. Значение по умолчанию false .
disabled
Логическое значение отключения редактора. Значение по умолчанию false .
enterKeyHint
Значение строки, чтобы установить тип возврата клавиши - returnKeyType
editorInitializedCallback
Функция, которая будет вызвана, когда редактор был инициализирован.
editorStyle
Стиль для контейнера или для богатого редактора более темных или световых настроек. Объект, содержащий следующие параметры:
- backgroundColor : редактор цвет фона
- color : цвет текста редактора
- caretColor Cursor/Color
- placeholderColor : редактор заполнителя цвет текста
- contentCSSText : редактор контент CSS текст (начальный допустимый)
- cssText : редактор Global CSS Text (начальный допустимый)
- initialCSSText : инъекции CSS в начале встроенной таблицы стилей. Полезно для включения пользовательских шрифтов (см. Ниже).
обратный вызов onChange после изменения данных редактора
Обратный вызов onHeightChange после изменения высоты
обратный вызов onMessage Outs Outs PostMessage Внутренний тип обработки
```
 < img src ="" onclick =" _.sendEvent('ImgClick') " contenteditable =" false " />
```

command выполнить JS в редакторе

 // $ = document
 this . richText . current ?. commandDOM ( '$.execCommand(' insertHTML ', false, "<br/>")' ) ;

commandDOM

 // $ = document.querySelector
 this . richText . current ?. commandDOM ( `$('#title').style.color=' ${ color } '` ) ;

useContainer БУЛЕЙСКОЕ ЗНАЧЕНИЕ, которое определяет, обернут ли контейнер представления вокруг веб -просмотра. Значение по умолчанию верно. Если вы используете свое собственное представление, чтобы обернуть эту библиотеку, установите это значение на False.
styleWithCSS когда истинно, стиль атрибут тегов модифицируется. В противном случае создаются выделенные теги. Значение по умолчанию неверно
initialHeight useContainer является ложным путем встроенного взгляда на начальную высоту
pasteAsPlainText Бузолевое значение (False As Default), которое определяет, будет ли вставка буфера баллотироваться в его формате, или оно будет сделано в виде простого текста
useCharacter Вариант отключить китайские иероглифы позволяет вам поддерживать английские персонажи без ошибок на Android. Установите true по умолчанию для обратной совместимости.
defaultHttps Стороннее значение (True As Default), которое придает https: // начало ссылок
значение onPaste обратного обратного обмена
onKeyUp обратное событие Keyup (ошибка Android 229)
onKeyDown Callback Event Ceakdown (Android 229 Bug)
onInput значение для вызова обратного вызова
Ссылка на обратный вызов onLink Нажмите
Редактор обратного переключения onFocus фокус
Редактор onBlur вызова
обратный вызов onCursorPosition Введите положение курсора this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});

RichEditor также есть методы, которые можно использовать в своем ref для набора:

setContentHTML(html: string)
insertImage(url: string, style?: string)
insertLink(title: string, url: string)
insertText(text: string)
insertHTML(html: string)
insertVideo(url: string, style?: string)
setContentFocusHandler(handler: Function)
blurContentEditor()
focusContentEditor()

Этот метод регистрирует функцию, которая будет вызвана при изменении позиции курсора, или изменение внесено в стиль редактора на положении курсора. Обратный вызов будет вызван множеством actions , которые активны в положении квалификации, позволяя панели инструментов отвечать на изменения.

registerToolbar(listener: Function)

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

 < RichEditor
  ref = { ( r ) => this . richtext = r }
  initialContentHTML = { 'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>' }
  editorInitializedCallback = { ( ) => this . onEditorInitialized ( ) }
/>

Используя пользовательские шрифты

Чтобы использовать пользовательские шрифты, вам необходимо использовать initialCSSText из опоры editorStyle .

Загрузите свои файлы шрифтов на https://transfonter.org и проверьте опцию «Base64». Когда вы загружаете ZIP -файл, там будет файл styleSheet.css.
Возьмите свой файл stylesheet.css и создайте файл stylesheet.js .
Создайте экспорт и вставьте содержимое файла CSS. например:

 const FontFamilyStylesheet = `
@font-face {
    font-family: 'Your Font Family';
    src: url('data:font/ttf;charset=utf-8;base64,...............'); // You can also use a web url here
    font-weight: normal;
}
` ;

export default FontFamilyStylesheet ;

Там, где вы включили свой компонент RichEditor , импортируйте файл и используете его.

 import FontFamilyStylesheet from 'stylesheet.js' ;

const fontFamily = 'Your_Font_Family' ;
const initialCSSText = { initialCSSText : ` ${ FontFamilyStylesheet } ` , contentCSSText : `font-family: ${ fontFamily } ` }
< RichEditor editorStyle = { initialCSSText } / >

Перезагрузить приложение. Теперь вы должны увидеть ваш богатый контент редактора в своем пользовательском лице шрифта!

Для получения дополнительной информации о том, как работает initialCSSText , ознакомьтесь с PR здесь. Кроме того, кредит на этот вопрос комментарий и его вилку, в которой описывается, как использовать кодированный файл шрифта Base64.

`RichToolbar`

Это компонент, который предоставляет панель инструментов для легко управления редактором. Он предназначен для использования вместе с компонентом RichEditor .

У RichToolbar есть одно необходимое свойство:

getEditor()

Который должен обеспечить функцию , которая возвращает ref в компонент RichEditor .

Это связано с тем, что ref не создается до первого рендеринга, до которого визуализируется панель инструментов. Это означает, что любой ref который непосредственно пройдет, неизбежно будет передаваться как undefined .

Другие реквизиты, поддерживаемые компонентом RichToolbar :

actions
array actions , которые будут предоставлены этой панелью инструментов. Действия по умолчанию:
- actions.insertImage
- actions.setBold
- actions.setItalic
- actions.insertBulletsList
- actions.insertOrderedList
- actions.insertLink
- actions.keyboard
- actions.setStrikethrough
- actions.setUnderline
- actions.removeFormat
- actions.insertVideo
- actions.checkboxList
- actions.undo
- actions.redo
Функции onPressAddImage вызываются, когда действия addImage нажаты.
логика onInsertLink для того, что происходит, когда вы нажимаете на кнопку «Добавить вставку ссылки»
disabled
Логическое значение отключения редактора. Значение по умолчанию false .
iconTint
unselectedButtonStyle
selectedIconTint
selectedButtonStyle
disabledIconTint
disabledButtonStyle
Они предоставляют параметры для кнопок стиля.
iconSize
Определяет размер значка в пикселях. По умолчанию 50.
renderAction
По сути, вы можете предоставить функцию рендеринга, которая будет использоваться вместо по умолчанию, чтобы вы могли полностью контролировать дизайн Tollbar.
iconMap
RichTextToolbar поставляется с значками по умолчанию для действий по умолчанию, которые он отображает. Чтобы переопределить их или добавить значки для действий, не связанных с делом, предоставить их в словаре этой опоры.

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

 const richText = React . createRef ( ) || useRef ( ) ;
< RichToolbar editor = { that . richText } />

С индивидуальным действием:

Чтобы определить свое собственное действие:

Отправьте имя действия в качестве строки в массиве actions .
Включите значок для него с iconMap
Добавьте функцию опола

 < RichToolbar
    editor = { that . richText }
	actions = { [
		actions . setBold ,
		actions . setItalic ,
		actions . insertBulletsList ,
		actions . insertOrderedList ,
		actions . insertImage ,
		'customAction' ,
	] }
	iconMap = { {
		customAction : customIcon ,
	} }
	customAction = { this . handleCustomAction }
/>

Полный пример с использованием функционального компонента

 import React from "react" ;
import { Text , Platform , KeyboardAvoidingView , SafeAreaView , ScrollView } from "react-native" ;
import { actions , RichEditor , RichToolbar } from "react-native-pell-rich-editor" ;


const handleHead = ( { tintColor } ) => < Text style = { { color : tintColor } } > H1 </ Text >
const TempScreen = ( ) => {
	const richText = React . useRef ( ) ;
	return (
    < SafeAreaView >
      < ScrollView >
        < KeyboardAvoidingView behavior = { Platform . OS === "ios" ? "padding" : "height" }	style = { { flex : 1 } } >
          < Text > Description: </ Text >
          < RichEditor
              ref = { richText }
              onChange = { descriptionText => {
                  console . log ( "descriptionText:" , descriptionText ) ;
              } }
          />
        </ KeyboardAvoidingView >
      </ ScrollView >

      < RichToolbar
        editor = { richText }
        actions = { [ actions . setBold , actions . setItalic , actions . setUnderline , actions . heading1 ] }
        iconMap = { { [ actions . heading1 ] : handleHead } }
      />
    </ SafeAreaView >
  ) ;
} ;

export default TempScreen ;