Hello world!
" /> ``` ### ๐ก CDN Distribution Load CKEditor 5 directly from CKSource's CDN - no build configuration required. This method is ideal for most users who want quick setup and don't need custom builds. **Complete setup:** 1. **Add dependency** to your `mix.exs`: ```elixir def deps do [ {:ckeditor5_phoenix, "~> 1.4.1"} ] end ``` 2. **Register JavaScript hook** in your `app.js`: ```javascript import { Hooks } from 'ckeditor5_phoenix'; const liveSocket = new LiveSocket('/live', Socket, { hooks: Hooks, }); ``` 3. **Exclude CKEditor from bundler** in your `config/config.exs`: ```elixir config :my_app, MyAppWeb.Endpoint, watchers: [ esbuild: {Esbuild, :install_and_run, [ :my_app, ~w(--external:ckeditor5 --external:ckeditor5-premium-features) ]} ] ``` 4. **Add license key** (see [Providing the License Key ๐๏ธ](#providing-the-license-key-๏ธ) section) 5. **Use in templates:** ```heex <%!-- Load CDN assets in --%> <.cke_cloud_assets /> <%!-- Use editor anywhere in --%> <.ckeditor type="classic" value="Hello world!
" /> ``` That's it! ๐ ## Basic Usage ๐ Get started with the most common usage patterns. These examples show how to render editors in your templates and handle real-time content changes. ### Simple Editor โ๏ธ Create a basic editor with default toolbar and features. Perfect for simple content editing without server synchronization. ```heex <%!-- CDN only: Load assets in --%> <.cke_cloud_assets /> <%!-- Render editor with initial content --%> <.ckeditor type="classic" value="Initial content
" editable_height="300px" /> ``` ### With LiveView Sync ๐ Enable real-time synchronization between the editor and your LiveView. Content changes are automatically sent to the server with configurable debouncing for performance optimization. ```heex <.ckeditor value={@content} change_event debounce_ms={500} /> ``` Handle content changes in your LiveView: ```elixir def handle_event("ckeditor5:change", %{"data" => data}, socket) do {:noreply, assign(socket, content: data["main"])} end ``` **Event details:** - Events are sent automatically when content changes - `debounce_ms` controls the delay between changes and events (default: 300ms) - Higher debounce values improve performance for large content or frequent changes ## Editor Types ๐๏ธ CKEditor 5 Phoenix supports four distinct editor types, each designed for specific use cases. Choose the one that best fits your application's layout and functionality requirements. ### Classic editor ๐ Traditional WYSIWYG editor with a fixed toolbar above the editing area. Best for standard content editing scenarios like blog posts, articles, or forms. **Features:** - Fixed toolbar with all editing tools - Familiar interface similar to desktop word processors - Works well in forms and modal dialogs  ```heex <%!-- CDN assets in --%> <.cke_cloud_assets /> <%!-- Classic editor in --%> <.ckeditor type="classic" value="Initial content here
" editable_height="300px" /> ``` ### Multiroot editor ๐ณ Advanced editor supporting multiple independent editable areas within a single editor instance. Perfect for complex layouts like page builders, newsletters, or multi-section content management. **Features:** - Multiple editable areas with shared toolbar - Each area can have different content - Ideal for CMS and page builder applications  ```heex <%!-- CDN assets in --%> <.cke_cloud_assets /> <%!-- Editor container --%> <.ckeditor type="multiroot" /> <%!-- Shared toolbar --%> <.cke_ui_part name="toolbar" /> <%!-- Multiple editable areas --%>Main content area
" class="border border-gray-300" /> <.cke_editable root="sidebar" value="Sidebar content
" class="border border-gray-300" />Click here to edit this content
" editable_height="300px" /> ``` **Note:** Inline editors don't work with `