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

react native rich editor

その他のリソース

v1.9.0

ダウンロード

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

AndroidとiOS（Macos and Windows）の両方の完全に機能するリッチテキストエディター？

フラッターを使用したい場合は、ここで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
LOADのコンテンツセクションでレンダリングされるHTML。
initialFocus
初期コンテンツリクエストフォーカスに対するブール値。デフォルト値はfalseです。
disabled
エディターを無効にするためのブール値。デフォルト値はfalseです。
enterKeyHint
文字列値を設定するreturnキータイプ-ReturnKeyType
editorInitializedCallback
エディターが初期化されたときに呼び出される関数。
editorStyle
コンテナまたはリッチエディター用のスタイリングは、より暗いまたは明るい設定です。次のオプションを含むオブジェクト：
- backgroundColor ：エディターの背景色
- color ：エディターのテキスト色
- caretColorカーソル/選択色
- placeholderColor ：編集者プレースホルダーのテキストの色
- contentCSSText ：エディターコンテンツCSSテキスト（初期有効）
- cssText ：エディターグローバルCSSテキスト（初期有効）
- initialCSSText ：インラインスタイルシートの先頭にCSSを注入します。カスタムフォントを組み込むのに役立ちます（以下を参照）。
エディターデータの変更後にコールバックonChange
onHeightChange高さの変化後のコールバック

メッサージ後の内部タイプ処理の外側のonMessageコールバック

 < img src ="" onclick =" _.sendEvent('ImgClick') " contenteditable =" false " />

編集者でJSを実行するcommand

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

commandDOM 、エディターのDOMを操作します

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

useContainerビューコンテナがWebViewに巻き付けられているかどうかを決定するブール値。デフォルト値は真です。あなたが独自のビューを使用してこのライブラリを包む場合は、この値をfalseに設定してください。
styleWithCSS trueの場合、タグのスタイル属性が変更されます。それ以外の場合は、専用タグが作成されます。デフォルト値はfalseです
初期高さのインラインビューでは、 initialHeight usecontainerは偽です
pasteAsPlainTextクリップボードペーストがフォーマットを保持するか、プレーンテキストとして実行されるかどうかを決定するブール値（デフォルトとしてFalse）
useCharacter漢字を無効にするオプションを使用すると、Androidでエラーなしで英語の文字をサポートできます。後方互換性のデフォルトでtrueに設定します。
defaultHttps https：//をリンクの開始にプレイエンドするブール値（デフォルトとして真）
onPasteコールバッククリップボード貼り付け値
onKeyUpコールバックキーアップイベント（Android 229バグ）
onKeyDownコールバックキーダウンイベント（Android 229バグ）
onInputコールバック入力値
onLinkコールバックリンククリック
onFocusコールバックエディターフォーカス
onBlurコールバックエディターBlur
onCursorPosition callback cursor 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 ( ) }
/>

カスタムフォントを使用します

カスタムフォントを使用するにはeditorStyle initialCSSText 。

フォントファイルを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には必要なプロパティが1つあります。

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 ;