react native zss rich text editorダウンロード - react native zss rich text editorソースコードダウンロード

react native zss rich text editor

その他のリソース

1.0.0

ダウンロード

ネイティブリッチテキストエディターを反応します

AndroidとiOSの両方の完全に機能するリッチテキストエディターは、ZSSSRICHTEXTEDITORプロジェクトに基づいています。

インストール

 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 2つのコンポーネントと1つのconst Dictionaryをエクスポートします。

`RichTextEditor`

エディターコンポーネント。このコンポーネントをビューの階層に配置して、完全に機能するリッチテキストエディターを受け取るだけです。

RichTextEditor 、次のオプションの小道具を取ります。

initialTitleHTML
コンポーネントがロードされるとすぐにタイトルセクションでレンダリングされるHTML。
initialContentHTML
LOADのコンテンツセクションでレンダリングされる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)

これらのメソッドは、カーソルの位置を整える画像やリンクなどのコンテンツを追加するときに使用されます。 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 ( ) }
/>

richtexteditor

`RichTextToolbar`

これは、エディターを簡単に制御するためのツールバーを提供するコンポーネントです。 RichTextEditorコンポーネントと一緒に使用するように設計されています。

RichTextToolbarには、必要なプロパティが1つあります。

getEditor()

refをRichTextEditorコンポーネントに返す関数を提供する必要があります。

これは、 refが最初のレンダリングの後まで作成されず、その前にツールバーがレンダリングされるためです。これは、直接渡されたrefが必然的にundefinedとして渡されることを意味します。

RichTextToolbarコンポーネントによってサポートされる他の小道具は次のとおりです。

actions
このツールバーが提供するarrayのactions 。デフォルトのアクションは次のとおりです。
- actions.insertImage
- actions.setBold
- actions.setItalic
- actions.insertBulletsList
- actions.insertOrderedList
- actions.insertLink
onPressAddLink
onPressAddImage
addLinkまたはaddImageアクションがタップされたときに呼び出される関数。
selectedButtonStyle
iconTint
selectedIconTint
unselectedButtonStyle
これらは、スタイリングアクションボタンのオプションを提供します。
renderAction
非常に、デフォルトの代わりに使用されるレンダリング関数を提供できるため、Tollbarの設計を完全に制御できます。
iconMap
RichTextToolbarは、レンダリングするデフォルトのアクションのデフォルトアイコンが付属しています。それらをオーバーライドする、または非デフォルトアクションのためにアイコンを追加するには、この小道具の辞書でそれらを提供します。

使用例：

 < RichTextToolbar
	getEditor = { ( ) => this . richtext }
/>

richtexteditor

`actions`

これは、サポートされているすべてのアクションの一連のconstです。これらは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',
}