react native zss rich text editor
1.0.0
Полностью функциональный текстовый редактор богатого текста как для Android, так и для iOS, основанный на проекте Zssrichtexteditor.
npm i --save react-native-zss-rich-text-editor
На Android добавьте следующее в конце вашего android/app/build.gradle
project . afterEvaluate {
apply from : ' ../../node_modules/react-native-zss-rich-text-editor/htmlCopy.gradle ' ;
copyEditorHtmlToAppAssets(file( ' ../../node_modules/react-native-zss-rich-text-editor ' ))
} Кроме того, следуйте инструкциям здесь, чтобы добавить нативную зависимость react-native-webview-bridge-updated .
react-native-zss-rich-text-editor экспортирует два компонента и один словар констановка:
RichTextEditorКомпонент редактора. Просто поместите этот компонент в иерархию вашего взгляда, чтобы получить полностью функциональный редактор богатого текста.
RichTextEditor принимает следующую дополнительную реквизит:
initialTitleHTML
HTML, который будет отображаться в разделе заголовка, как только компонент загружается.
initialContentHTML
HTML, который будет отображаться в разделе содержимого при загрузке.
titlePlaceholder
Текст, который будет использоваться в качестве заполнителя, когда в разделе заголовка нет текста.
contentPlaceholder
Текст, который будет использоваться в качестве заполнителя, когда в разделе контента нет текста.
customCSS
Любые пользовательские стили CSS, которые вы хотите ввести в редактор.
editorInitializedCallback
Функция, которая будет вызвана, когда редактор был инициализирован.
RichTextEditor также имеет методы, которые можно использовать в своем ref для установки стиля на текущем выборе или положении курсора:
setBold()setItalic()setUnderline()heading1()heading2()heading3()heading4()heading5()heading6()setParagraph()removeFormat()alignLeft()alignCenter()alignRight()alignFull()insertBulletsList()insertOrderedList()insertLink(url, title)updateLink(url, title)insertImage(attributes)setSubscript()setSuperscript()setStrikethrough()setHR()setIndent()setOutdent()setBackgroundColor(color)setTextColor(color)Этот метод показывает диалог для настройки заголовка и URL -адреса ссылки, который будет вставлен в текущее местоположение курсора.
showLinkDialog(optionalTitle = '', optionalUrl = '')Для корректировки контента, заполнителей или CSS используйте эти методы
setTitlePlaceholder(placeholder)setContentPlaceholder(placeholder)setCustomCSS(css)setTitleHTML(html)setContentHTML(html) Эти методы используются при добавлении контента, такого как изображения или ссылки, которые будут Intefere с положением курсора. prepareInsert сохраняет текущий выбор, и restoreSelection заменит его после того, как вставка будет выполнена. Это неявно называется insertImage и insertLink поэтому их, вероятно, никогда не должны вызывать напрямую.
prepareInsert()restoreSelection()Чтобы получить контент или заголовок HTML, используйте эти асинхронные методы.
async getTitleHtml()async getTitleText()async getContentHtml()async getSelectedText()Чтобы сосредоточить или размыть секции, используйте эти методы
focusTitle()focusContent()blurTitleEditor()blurContentEditor()Чтобы узнать, когда заголовок или контент находятся в фокусе, используйте следующие методы.
setTitleFocusHandler(callbackHandler)setContentFocusHandler(callbackHandler) Этот метод регистрирует функцию, которая будет вызвана при изменении позиции курсора, или изменение внесено в стиль редактора на положении курсора. Обратный вызов будет вызван множеством actions , которые активны в положении квалификации, позволяя панели инструментов отвечать на изменения.
registerToolbar(listener) < RichTextEditor
ref = { ( r ) => this . richtext = r }
initialTitleHTML = { 'Title!!' }
initialContentHTML = { 'Hello <b>World</b> <p>this is a new paragraph</p> <p>this is another new paragraph</p>' }
editorInitializedCallback = { ( ) => this . onEditorInitialized ( ) }
/> 
RichTextToolbar Это компонент, который предоставляет панель инструментов для легко управления редактором. Он предназначен для использования вместе с компонентом RichTextEditor .
RichTextToolbar имеет одно необходимое свойство:
getEditor() Который должен обеспечить функцию , которая возвращает ref в компонент RichTextEditor .
Это связано с тем, что ref не создается до первого рендеринга, до которого визуализируется панель инструментов. Это означает, что любой ref который непосредственно пройдет, неизбежно будет передаваться как undefined .
Другие реквизиты, поддерживаемые компонентом RichTextToolbar :
actions
array actions , которые будут предоставлены этой панелью инструментов. Действия по умолчанию:
actions.insertImageactions.setBoldactions.setItalicactions.insertBulletsListactions.insertOrderedListactions.insertLink onPressAddLink
onPressAddImage
Функции, вызванные, когда действия addLink или addImage нажаты.
selectedButtonStyle
iconTint
selectedIconTint
unselectedButtonStyle
Они предоставляют параметры для кнопок стиля.
renderAction
По сути, вы можете предоставить функцию рендеринга, которая будет использоваться вместо по умолчанию, чтобы вы могли полностью контролировать дизайн Tollbar.
iconMap
RichTextToolbar поставляется с значками по умолчанию для действий по умолчанию, которые он отображает. Чтобы переопределить их или добавить значки для действий, не связанных с делом, предоставить их в словаре этой опоры.
< RichTextToolbar
getEditor = { ( ) => this . richtext }
/> 
actions Это набор константов всех поддерживаемых действий. Они будут переданы в массивах всем обратным вызовам, зарегистрированным в редакторе с использованием метода registerToolbar() .
{
setTitleHtml: 'SET_TITLE_HTML',
setContentHtml: 'SET_CONTENT_HTML',
getTitleHtml: 'GET_TITLE_HTML',
getTitleText: 'GET_TITLE_TEXT',
getContentHtml: 'GET_CONTENT_HTML',
getSelectedText: 'GET_SELECTED_TEXT',
blurTitleEditor: 'BLUR_TITLE_EDITOR',
blurContentEditor: 'BLUR_CONTENT_EDITOR',
focusTitle: 'FOCUS_TITLE',
focusContent: 'FOCUS_CONTENT',
setBold: 'bold',
setItalic: 'italic',
setUnderline: 'underline',
heading1: 'h1',
heading2: 'h2',
heading3: 'h3',
heading4: 'h4',
heading5: 'h5',
heading6: 'h6',
setParagraph: 'SET_PARAGRAPH',
removeFormat: 'REMOVE_FORMAT',
alignLeft: 'justifyLeft',
alignCenter: 'justifyCenter',
alignRight: 'justifyRight',
alignFull: 'justifyFull',
insertBulletsList: 'unorderedList',
insertOrderedList: 'orderedList',
insertLink: 'INST_LINK',
updateLink: 'UPDATE_LINK',
insertImage: 'INST_IMAGE',
setSubscript: 'subscript',
setSuperscript: 'superscript',
setStrikethrough: 'strikeThrough',
setHR: 'horizontalRule',
setIndent: 'indent',
setOutdent: 'outdent',
setTitlePlaceholder: 'SET_TITLE_PLACEHOLDER',
setContentPlaceholder: 'SET_CONTENT_PLACEHOLDER',
setTitleFocusHandler: 'SET_TITLE_FOCUS_HANDLER',
setContentFocusHandler: 'SET_CONTENT_FOCUS_HANDLER',
prepareInsert: 'PREPARE_INSERT',
restoreSelection: 'RESTORE_SELECTION',
setCustomCSS: 'SET_CUSTOM_CSS',
setTextColor: 'SET_TEXT_COLOR',
setBackgroundColor: 'SET_BACKGROUND_COLOR',
}
react-native-zss-rich-text-editor это обертка вокруг удивительного проекта Zssrichtextextitor. Он также общается с редактором, использующим (крошечную вилку) удивительного проекта React-Native-Webview Bridge.
