Text Editor

A rich text (WYSIWYG) editor for formatted content. Used by RenderFormFields for ColumnTypeEnum.TEXT_EDITOR fields.

Import


import { TextEditor } from "@phpcreation/frontend-components-react-nextjs-bundle/components/TextEditor";

Props

Prop	Type	Default	Description
`value`	`string`	`""`	HTML string content
`onChange`	`(value: string) => void`	—	Change handler
`placeholder`	`string`	`""`	Placeholder text
`disabled`	`boolean`	`false`	Read-only mode
`className`	`string`	—	Additional CSS classes

Usage


import { TextEditor } from "...";
 
<TextEditor
  value={content}
  onChange={setContent}
  placeholder="Enter description..."
/>

With React Hook Form


<FormField
  control={form.control}
  name="description"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Description</FormLabel>
      <FormControl>
        <TextEditor
          value={field.value}
          onChange={field.onChange}
          placeholder="Enter description..."
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  )}
/>

The editor outputs HTML strings. When rendering saved content, use dangerouslySetInnerHTML or a safe HTML renderer.

Textarea — plain text multi-line input
Form (RHF)
Render Form Fields