Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-native-pell-rich-editor-edited
Advanced tools
Readme
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.
###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});
RichEditor
The editor component. Simply place this component in your view hierarchy to receive a fully functional Rich text Editor.
RichEditor
takes the following optional props:
placeholder
Wrap the editor content placeholder
initialContentHTML
HTML that will be rendered in the content section on load.
initialFocus
Boolean value to Initial content request focus. The default value is false
.
disabled
Boolean value to disable editor. The default value is false
.
enterKeyHint
String value to set return key type - returnKeyType
editorInitializedCallback
A function that will be called when the editor has been initialized.
editorStyle
Styling for container or for Rich Editor more dark or light settings. Object containing the following options:
backgroundColor
: Editor background colorcolor
: Editor text colorcaretColor
cursor/selection colorplaceholderColor
: Editor placeholder text colorcontentCSSText
: editor content css text(initial valid)cssText
: editor global css text(initial valid)onChange
Callback after editor data modification
onHeightChange
Callback after height change
onMessage
Callback outside postMessage internal type processing
<img src="" onclick="_.sendEvent('ImgClick')" contenteditable="false"/>
command
Execute JS in the editor
// $ = document
this.richText.current?.commandDOM('$.execCommand('insertHTML', false, "<br/>")');
commandDOM
Manipulate the DOM in the editor
// $ = document.querySelector
this.richText.current?.commandDOM(`$('#title').style.color='${color}'`);
useContainer
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.
initialHeight
useContainer is false by inline view of initial height
pasteAsPlainText
A boolean value (false as default) that determines if the clipboard paste will keep its format or it will be done as plain text
onPaste
Callback clipboard paste value
onKeyUp
Callback Keyup event (Android 229 bug)
onKeyDown
Callback Keydown event (Android 229 bug)
onInput
Callback input value
onFocus
Callback editor focus
onBlur
Callback editor blur
onCursorPosition
Callback Enter the position of the cursor
this.scrollRef.current.scrollTo({y: scrollY - 30, duration: 100, animated: true});
RichEditor
also has methods that can be used on its ref
to set:
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()
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 actions
that are active at the cusor position, allowing a toolbar to respond to changes.
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()}
/>
RichToolbar
This is a Component that provides a toolbar for easily controlling an editor. It is designed to be used together with a RichEditor
component.
The RichToolbar
has one required property:
getEditor()
Which must provide a function that returns a ref
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 array
of actions
to be provided by this toolbar. The default actions are:
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
Functions called when the addImage
actions are tapped.
onInsertLink
Logic for what happens when you press on the add insert link button
disabled
Boolean value to disable editor. The default value is false
.
iconTint
unselectedButtonStyle
selectedIconTint
selectedButtonStyle
disabledIconTint
disabledButtonStyle
These provide options for styling action buttons.
iconSize
Defines the size of the icon in pixels. Default is 50.
renderAction
Altenatively, you can provide a render function that will be used instead of the default, so you can fully control the tollbar design.
iconMap
RichTextToolbar
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.
const richText = React.createRef() || useRef();
<RichToolbar editor={that.richText}/>
To define your own custom action:
actions
array.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 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]: ({tintColor}) => (<Text style={[{color: tintColor}]}>H1</Text>), }}
/>
</SafeAreaView>
);
};
export default TempScreen;
FAQs
React Native Rich Editor edited from react-native-pell-rich-editor
The npm package react-native-pell-rich-editor-edited receives a total of 0 weekly downloads. As such, react-native-pell-rich-editor-edited popularity was classified as not popular.
We found that react-native-pell-rich-editor-edited demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.