rich textarea下載 - rich textarea源代碼下載

rich textarea

其他資源

0.26.4

下載

Rich-Textarea

一個小的可自定義文本方面的反應，以使其著色，突出顯示，裝飾文本，提供自動完成等等。

筆記

您也可能喜歡https://github.com/inokawa/edix

演示

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

特徵

可觀的文本：不僅突出顯示類似庫之類的文本，此庫還支持著色，裝飾等。可以使用正則或任何令牌。
易於與事件進行互動：您可以獲得CARET位置，並且可以在文本上捕獲一些鼠標事件，這些事件可用於顯示某些內容反映用戶操作。
與Textarea兼容：除了添加的功能外，該庫的設計旨在盡可能地表現出本地文本方面的行為。如果無法正常工作，請在問題或公關中報告。
開箱即用的集成：作為受控和不受控制的工作。支持Formik，React-Hook-Form， @Tanstack/React-Form等。支持SSR。在Next.js中使用服務器操作和混音中的操作支持表單。
IME組成處理：與IME相關的事件存在一些交叉瀏覽器問題。該庫處理它們以易於使用。
輕量級：試圖支持許多用戶酶，但也要使捆綁尺寸較小。目前〜3KB（GZBIPPPECT）。

動機

有時我們需要Web中的自定義文本編輯器。但是，用原始的滿足來創建它是如此的正確做到，並且編輯框架通常太重了……也許您真的需要一個文本方面，帶有突出顯示和一些盤旋的菜單，但是本機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 >
  ) ;
} ;

正則助手

如果您不想創建自己的渲染功能，則可以將助手用於正則。

 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 >
  ) ;
} ;