ดาวน์โหลด rich textarea - ดาวน์โหลดซอร์สโค้ด rich textarea

rich textarea

ทรัพยากรอื่นๆ

0.26.4

ดาวน์โหลด

ร่ำรวย

textarea ขนาดเล็กที่ปรับแต่งได้สำหรับ React to colorize ไฮไลต์ตกแต่งข้อความเสนอการเติมข้อความอัตโนมัติและอื่น ๆ อีกมากมาย

บันทึก

คุณอาจชอบ https://github.com/inokawa/edix

การสาธิต

https://inokawa.github.io/rich-textarea/

คุณสมบัติ

ข้อความที่มีสไตล์: ไม่เพียง แต่เน้นข้อความเช่นไลบรารีที่คล้ายกันไลบรารีนี้ยังรองรับการระบายสีการตกแต่งและอื่น ๆ อีกมากมาย สามารถใช้ Regex หรือโทเคนิเซอร์ใด ๆ ได้
ง่ายต่อการโต้ตอบกับกิจกรรม: คุณสามารถรับตำแหน่ง Caret และสามารถจับเหตุการณ์เมาส์บางอย่างบนข้อความซึ่งมีประโยชน์ในการแสดงบางสิ่งบางอย่างสะท้อนถึงการกระทำของผู้ใช้
เข้ากันได้กับ Textarea: ยกเว้นคุณสมบัติที่เพิ่มเข้ามาห้องสมุดนี้ได้รับการออกแบบมาเพื่อทำหน้าที่เป็น textarea ดั้งเดิมให้มากที่สุด หากทำงานไม่ถูกต้องโปรดรายงานในปัญหาหรือ PR
การรวมกล่อง: ทำงานเป็นทั้งการควบคุมและไม่สามารถควบคุมได้ รองรับ formik, react-hook-form, @tanstack/react-form และอื่น ๆ รองรับ SSR รองรับแบบฟอร์มด้วยการกระทำของเซิร์ฟเวอร์ใน next.js และการกระทำในรีมิกซ์
การจัดการองค์ประกอบของ IME: เหตุการณ์ที่เกี่ยวข้องกับ IME มีปัญหาข้ามเบราว์เซอร์ ห้องสมุดนี้จัดการกับพวกเขาเพื่อใช้งานง่าย
น้ำหนักเบา: พยายามรองรับ usecases จำนวนมาก แต่ยังทำให้ขนาดมัดเล็ก ปัจจุบัน ~ 3KB (gzipped)

แรงจูงใจ

บางครั้งเราต้องการตัวแก้ไขข้อความที่กำหนดเองในเว็บ อย่างไรก็ตามการสร้างมันด้วยความพึงพอใจแบบดิบนั้นยากที่จะทำอย่างถูกต้องและกรอบการแก้ไขมักจะหนักเกินไป ... บางทีคุณอาจต้องการเป็นเพียง textarea ที่มีการเน้นและเมนูที่ลอยอยู่บางส่วน แต่ Textarea ดั้งเดิม ห้องสมุดนี้มีเป้าหมายที่จะแก้ปัญหา

ติดตั้ง

npm install rich-textarea

ความต้องการ

React> = 16.14

หากคุณใช้ ESM และ WebPack 5 ให้ใช้ React> = 18 เพื่อหลีกเลี่ยงการแก้ไขข้อผิดพลาด react/jsx-runtime

การใช้งาน

ที่ได้ถูกควบคุม

 import { useState } from "react" ;
import { RichTextarea } from "rich-textarea" ;

export const App = ( ) => {
  const [ text , setText ] = useState ( "Lorem ipsum" ) ;

  return (
    < RichTextarea
      value = { text }
      style = { { width : "600px" , height : "400px" } }
      onChange = { ( e ) => setText ( e . target . value ) }
    >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

ไม่มีการควบคุม

 import { RichTextarea } from "rich-textarea" ;

export const App = ( ) => {
  return (
    < RichTextarea
      defaultValue = "Lorem ipsum"
      style = { { width : "600px" , height : "400px" } }
    >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

ผู้ช่วย Regex

คุณสามารถใช้ Helper สำหรับ Regex หากคุณไม่ต้องการสร้างฟังก์ชั่นการเรนเดอร์ของคุณเอง

 import { useState } from "react" ;
import { RichTextarea , createRegexRenderer } from "rich-textarea" ;

const renderer = createRegexRenderer ( [
  [ / [A-Z][a-z]+ / g , { borderRadius : "3px" , backgroundColor : "#d0bfff" } ] ,
] ) ;

export const App = ( ) => {
  const [ text , setText ] = useState ( "Lorem ipsum" ) ;

  return (
    < RichTextarea
      value = { text }
      style = { { width : "600px" , height : "400px" } }
      onChange = { ( e ) => setText ( e . target . value ) }
    >
      { renderer }
    </ RichTextarea >
  ) ;
} ;

next.js การกระทำของเซิร์ฟเวอร์

 // _components/Textarea.tsx
"use client" ;
import { RichTextarea , RichTextareaProps } from "rich-textarea" ;

export const Textarea = (
  props : Omit < RichTextareaProps , "children" | "ref" >
) => {
  return (
    < RichTextarea { ... props } >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

// page.tsx in App Router of Next.js
import { Textarea } from "../_components/Textarea" ;

async function hello ( formData : FormData ) {
  "use server" ;
  console . log ( formData . get ( "hello" ) ) ;
}

export default ( ) => {
  return (
    < div >
      < div > this is server! </ div >
      < form action = { hello } >
        < Textarea defaultValue = "Lorem ipsum" name = "hello" />
        < button type = "submit" > submit </ button >
      </ form >
    </ div >
  ) ;
} ;

รีมิกซ์แอ็คชั่น

 import type { ActionFunction } from "@remix-run/node" ;
import { Form } from "@remix-run/react" ;
import { RichTextarea , RichTextareaProps } from "rich-textarea" ;

const Textarea = ( props : Omit < RichTextareaProps , "children" | "ref" > ) => {
  return (
    < RichTextarea { ... props } >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

export const action : ActionFunction = async ( { request } ) => {
  console . log ( ( await request . formData ( ) ) . get ( "hello" ) ) ;
} ;

export default ( ) => {
  return (
    < Form method = "post" >
      < Textarea defaultValue = "Lorem ipsum" name = "hello" />
      < button type = "submit" > submit </ button >
    </ Form >
  ) ;
} ;