rich textarea Download - rich textarea Quellcode Download

rich textarea

Andere Ressourcen

0.26.4

Herunterladen

Rich-Textea

Ein kleiner anpassbarer Textbereich zum Reagieren, um Texte zu fördern, hervorzuheben, zu dekorieren, Autocomplete und vieles mehr.

Notiz

Sie können auch https://github.com/inokawa/edix mögen

Demo

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

Merkmale

Stilbare Texte: Nicht nur Texte wie ähnliche Bibliotheken hervorheben, diese Bibliothek unterstützt auch das Färben, Dekorieren und mehr. Regex oder Tokenisierer können verwendet werden.
Einfach zu interagieren mit Ereignissen: Sie können die Pflegeposition erhalten und einige Mausereignisse in Texten fangen.
Kompatibel mit textarea: Ausnahme von hinzugefügten Funktionen ist diese Bibliothek so konzipiert, dass sie sich so weit wie möglich als native textarea verhalten kann. Wenn nicht ordnungsgemäß funktioniert, melden Sie es bitte in einem Problem oder einer PR.
Out of the Box Integration: Funktioniert sowohl kontrolliert als auch unkontrolliert. Unterstützt Formik, React-Hook-Form, @TanStack/React-Form und mehr. Unterstützt SSR. Unterstützt das Formular mit Serveraktionen in Next.js und Aktionen in Remix.
IME -Kompositionshandhabung: IME -verwandte Ereignisse haben einige Probleme mit dem Cross -Browser. Diese Bibliothek kümmert sich um einfach zu bedienen.
Leichtes Gewicht: Versuchen Sie, viele Usecasen zu unterstützen, aber auch die Bündelgröße klein halten. Derzeit ~ 3 KB (GZIPPED).

Motivation

Manchmal brauchen wir im Web einen angepassten Texteditor. Es ist jedoch so schwer, es mit inhaltlichem Rohstoff zu erstellen, und die Editor -Frameworks sind normalerweise zu schwer. Vielleicht benötigen Sie wirklich nur ein Textbereich mit Hervorhebung und einigen schwebenden Menüs, aber ein natives Textbereich und viele der Textbereichsbibliotheken sind aufgrund der begrenzten Anpassbarkeit weit davon entfernt. Diese Bibliothek zielt darauf ab, das Problem zu lösen.

Installieren

npm install rich-textarea

Anforderungen

React> = 16,14

Wenn Sie ESM und WebPack 5 verwenden, verwenden Sie React> = 18, um react/jsx-runtime Fehler nicht aufzulösen.

Verwendung

Kontrolliert

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

Unkontrolliert

 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 Helfer

Sie können Helper für Regex verwenden, wenn Sie Ihre eigene Renderfunktion nicht erstellen möchten.

 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 Server -Aktionen

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

Remix -Aktion

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