CKEditor5.Components.Editor (ckeditor5_phoenix v1.21.0)

View Source

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.

Summary

Functions

Renders the CKEditor 5 component in a LiveView.

Functions

render(assigns)

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.

  • 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.