# `CKEditor5.Components.Editor`
[🔗](https://github.com/Mati365/ckeditor5-phoenix/blob/v1.28.2/lib/components/editor/editor.ex#L1)

LiveView component for CKEditor 5 integration in Phoenix Framework.

This module provides the necessary functionality to render and manage
CKEditor 5 instances within Phoenix LiveView applications.

# `render`

Renders the CKEditor 5 component in a LiveView.

## Attributes

* `id` (`:string`) - The ID for the editor instance.
* `context_id` (`:string`) - The context ID for the editor, used for multi-root editors. Defaults to `nil`.
* `class` (`:string`) - Additional CSS classes to apply to the editor container. Defaults to `""`.
* `style` (`:string`) - Inline styles to apply to the editor container. Defaults to `""`.
* `preset` (`:any`) - The name or reference of the preset to use. Defaults to `"default"`.
* `change_event` (`:boolean`) - Whether the editor should push events to the LiveView. If true, the editor will send `ckeditor5:change` event every time the content changes. Defaults to `false`.
* `focus_event` (`:boolean`) - Whether the editor should push events to the LiveView when it gains focus. If true, the editor will send `ckeditor5:focus` event when it gains focus. Defaults to `false`.
* `blur_event` (`:boolean`) - Whether the editor should push events to the LiveView when it loses focus. If true, the editor will send `ckeditor5:blur` event when it loses focus. Defaults to `false`.
* `ready_event` (`:boolean`) - Whether the editor should notify the LiveView when it has finished initializing. If true, the editor will send `ckeditor5:ready` event once when it is ready. Defaults to `false`.
* `editable_height` (`:string`) - The height of the editable area (e.g., "300px"). If not provided, the height will be determined by the editor's content. Defaults to `nil`.
* `save_debounce_ms` (`:integer`) - Debounce time in ms for saving/syncing editor content. Defaults to `400`.
* `type` (`:string`) - The type of the editor. Overrides the type from the preset. Defaults to `nil`.
* `language` (`:string`) - The language code for the editor UI (e.g., 'en', 'pl', 'de', etc.). If not provided, will use the default "en" language. Defaults to `nil`.
* `content_language` (`:string`) - The content language code for the editor (e.g. 'en', 'pl', 'de', etc.). This is used to set the `lang` attribute on the editable area. If not provided, it will default to the same value as `language`. Defaults to `nil`.
* `watchdog` (`:boolean`) - Whether to enable the watchdog for the editor. If true, the component will automatically restart the editor if it crashes. Defaults to `true`.
* `root_attrs` (`:map`) - A map of HTML attributes to apply to the editor's root element(s). Defaults to `%{}`.
* `root_model_element` (`:string`) - This is the name of the root element. Setting it to '$inlineRoot' enables you to
  use the editor in paragraph-like editing mode.

  Defaults to `nil`.
* `upload_url` (`:string`) - The URL endpoint for image uploads. If not provided, the default upload endpoint will be used if configured in the application config. Set to "base64" to use Base64 upload adapter. Defaults to `nil`.
* `name` (`:string`) - The name of the input field that will be used to submit the content.
  If not provided, it will be derived from the `:field` attribute when available.
  This is useful for form integration, allowing the content to be submitted as part of a form.

  Defaults to `nil`.
* `field` (`Phoenix.HTML.FormField`) - The `Phoenix.HTML.FormField` for form integration. Defaults to `nil`.
* `value` (`:string`) - The initial value for the content. This will be set when the component is initialized.
  If not specified, it will default to an empty string.

  Defaults to `""`.
* `required` (`:boolean`) - Marks the input as required. This will be used to validate the content when the form is submitted. Defaults to `false`.
## Slots

* `inner_block` - Optional content to render inside the editor container.

---

*Consult [api-reference.md](api-reference.md) for complete listing*