react-native-pell-rich-editor-editor
v1.0.9
React Native Rich Editor edited from react-native-pell-rich-editor
0/weekUpdated 3 years agoMITUnpacked: 327.1 KB
Published by wxik
npm install react-native-pell-rich-editor-editorReact Native Rich Text Editor
------
> A fully functional Rich Text Editor for both Android and iOS (macOS and windows)?
> If you want to use flutter, you can check here to add flutter_rich_editor
``
yarn add react-native-pell-rich-editor
or
npm i react-native-pell-rich-editor
Also, follow instructions here to add the native react-native-webview dependency.
* Online Preview （Some functions）
* Example Hooks Rewrite
---
Scroll problem
###usecontainer = {true}
Need to be placed in ScrolView and add a callback method oncursorPosition to handle scroll bar positioning, refer to Examples
`this.scrollRef.current.scrollTo({y: scrollY - 30, animated: true});`---
The editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor. takes the following optional props:*
placeholder Wrap the editor content placeholder
*
HTML that will be rendered in the content section on load.
*
* Boolean value to Initial content request focus. The default value is .*
disabled
* Boolean value to disable editor. The default value is .*
enterKeyHint
* String value to set return key type - returnKeyType*
A function that will be called when the editor has been initialized.
*
Styling for container or for Rich Editor more dark or light settings. Object containing the following options:
-
: Editor background color
- color: Editor text color
- caretColor cursor/selection color
- placeholderColor: Editor placeholder text color
- contentCSSText: editor content css text（initial valid）
- cssText: editor global css text（initial valid）*
onChange
Callback after editor data modification*
Callback after height change*
Callback outside postMessage internal type processing
html
![]()
`*
Execute JS in the editor
js
// $ = document
this.richText.current?.commandDOM('$.execCommand('insertHTML', false, "
")');
`*
Manipulate the DOM in the editor
js
// $ = document.querySelector
this.richText.current?.commandDOM($('#title').style.color='${color}');
`*
A boolean value that determines if a View container is wrapped around the WebView. The default value is true. If you are using your own View to wrap this library around, set this value to false.*
useContainer is false by inline view of initial height*
A boolean value (false as default) that determines if the clipboard paste will keep its format or it will be done as plain text*
Callback clipboard paste value*
Callback Keyup event (Android 229 bug)*
Callback Keydown event (Android 229 bug)*
Callback input value*
Callback editor focus*
Callback editor blur*
Callback Enter the position of the cursor
this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});` also has methods that can be used on its ref to set:*
setContentHTML(html: string)
*
*
*
*
*
*
*
* This method registers a function that will get called whenver the cursor position changes or a change is made to the styling of the editor at the cursor's position., The callback will be called with an array of
that are active at the cusor position, allowing a toolbar to respond to changes.*
registerToolbar(listener: Function)$3
javascript
initialContentHTML={'Hello World this is a new paragraph
this is another new paragraph
'}
editorInitializedCallback={() => this.onEditorInitialized()}
/>
`
This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a
component.The
RichToolbar has one required property:*
getEditor()Which must provide a function that returns a
to a RichEditor component.This is because the
ref is not created until after the first render, before which the toolbar is rendered. This means that any ref passed directly will inevitably be passed as undefined.Other props supported by the
RichToolbar component are:*
actions An
of actions to be provided by this toolbar. The default actions are:
* actions.insertImage
*
*
*
*
*
*
*
*
*
*
*
*
*
*
Functions called when the actions are tapped.*
onInsertLink
Logic for what happens when you press on the add insert link button*
* Boolean value to disable editor. The default value is .
*
iconTint
*
*
*
*
* These provide options for styling action buttons.
*
Defines the size of the icon in pixels. Default is 50.
*
Altenatively, you can provide a render function that will be used instead of the default, so you can fully control the tollbar design.
*
comes with default icons for the default actions it renders. To override those, or to add icons for non-default actions, provide them in a dictionary to this prop.
$3
`javascript
const richText = React.createRef() || useRef();
`#### With Custom Action:
To define your own custom action:
- Send your action name as string in the
array.
- Include an icon for it with the iconMap
- Add a function prop with the same action name to be called on tapjavascript
actions={[
actions.setBold,
actions.setItalic,
actions.insertBulletsList,
actions.insertOrderedList,
actions.insertImage,
'customAction',
]}
iconMap={{
customAction: customIcon,
}}
customAction={this.handleCustomAction}
/>
`#### A Complete Example Using a Functional Component
javascript
import React from "react";
import { Text, Platform, KeyboardAvoidingView, SafeAreaView, ScrollView } from "react-native";
import {actions, RichEditor, RichToolbar} from "react-native-pell-rich-editor";const TempScreen = () => {
const richText = React.useRef();
return (
Description:
onChange={ descriptionText => {
console.log("descriptionText:", descriptionText);
}}
/>
actions={[ actions.setBold, actions.setItalic, actions.setUnderline, actions.heading1, ]}
iconMap={{ [actions.heading1]: ({tintColor}) => (H1 ), }}
/>
);
};
export default TempScreen;
``---
$3
!https://jb.gg/OpenSource