react native zss rich text editor 다운로드 react native zss rich text editor 소스 코드 다운로드

react native zss rich text editor

기타 리소스

1.0.0

다운로드

네이티브 리치 텍스트 편집기에 반응합니다

ZSSRichtexTeditor Project를 기반으로 Android 및 iOS의 완벽한 기능이 풍부한 텍스트 편집기.

설치

 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 두 가지 구성 요소와 하나의 const 사전을 내 보냅니다.

`RichTextEditor`

편집기 구성 요소. 이 구성 요소를 View Hierarchy에 배치하여 완벽하게 기능적 인 풍부한 텍스트 편집기를 받으십시오.

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)

이러한 방법은 커서 위치와 관련하여 이미지 또는 링크와 같은 컨텐츠를 추가 할 때 사용됩니다. 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 에는 필요한 속성이 하나 있습니다.

getEditor()

RichTextEditor 구성 요소에 ref 반환하는 함수를 제공해야합니다.

이는 도구 모음이 렌더링되기 전에 첫 번째 렌더링이 끝날 때까지 ref 생성되지 않기 때문입니다. 이는 직접 통과 한 ref 필연적으로 정의 undefined 것으로 통과 될 것임을 의미합니다.

RichTextToolbar 구성 요소가 지원하는 다른 소품은 다음과 같습니다.

actions
이 도구 모음에서 제공 할 actions array . 기본 조치는 다음과 같습니다.
- actions.insertImage
- actions.setBold
- actions.setItalic
- actions.insertBulletsList
- actions.insertOrderedList
- actions.insertLink
onPressAddLink
onPressAddImage
addLink 또는 addImage 동작이 탭 될 때 호출 된 기능.
selectedButtonStyle
iconTint
selectedIconTint
unselectedButtonStyle
이들은 스타일링 액션 버튼을위한 옵션을 제공합니다.
renderAction
Altenative에서는 기본값 대신 사용될 렌더링 기능을 제공 할 수 있으므로 Tollbar 설계를 완전히 제어 할 수 있습니다.
iconMap
RichTextToolbar 에는 렌더링하는 기본 작업에 대한 기본 아이콘이 제공됩니다. 이를 무시하거나 비 디폴트 조치를위한 아이콘을 추가하려면이 소품의 사전으로 제공하십시오.

예제 사용 :

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

RichtexTeditor

`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',
}