หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

React React Text Text Text

ตัวแก้ไขข้อความที่สมบูรณ์แบบใช้งานได้อย่างสมบูรณ์สำหรับทั้ง Android และ iOS โดยใช้โครงการ ZSSrichTextEditor

การติดตั้ง 

 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 Exponents สององค์ประกอบและพจนานุกรม const หนึ่ง:

RichTextEditor

องค์ประกอบของตัวแก้ไข เพียงวางองค์ประกอบนี้ไว้ในลำดับชั้นมุมมองของคุณเพื่อรับตัวแก้ไขข้อความที่สมบูรณ์แบบทำงานได้อย่างสมบูรณ์

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 ที่ทำงานอยู่ที่ตำแหน่ง Cusor ทำให้แถบเครื่องมือตอบสนองต่อการเปลี่ยนแปลง

  • 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()

ซึ่งจะต้องให้ ฟังก์ชั่น ที่ส่งคืน 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

RichTextEditor

actions

นี่คือชุดของ consts ของการกระทำที่ได้รับการสนับสนุนทั้งหมด สิ่งเหล่านี้จะถูกส่งผ่านในอาร์เรย์ไปยังการโทรกลับทั้งหมดที่ลงทะเบียนกับตัวแก้ไขโดยใช้เมธอด 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',
}

การระบุแหล่งที่มา

react-native-zss-rich-text-editor เป็น wrapper รอบโครงการ ZSSrichtexteditor ที่น่าทึ่ง นอกจากนี้ยังสื่อสารกับตัวแก้ไขโดยใช้ (ส้อมเล็ก ๆ ) ของโครงการ React-Native-Webview-Bridge ที่ยอดเยี่ยม

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด