Renders a CKEditor instance

view
    [ config defaultConfig
    , onCKEditorChange CKEditorChanged
    ]
    [ text "Initial text" ]

Add the specified configuration to the editor. This will reload the component

view
    [ config (defaultConfig |> withLanguage "fr") ]
    []

Sets the registered editor build to use

See ckeditor5-webcomponent for more information

Event fired when the CKEditor content changed. This event will not necessarily fire on every single input action.

type Msg
    = CKEditorChanged String


view
    [ onChange CKEditorChanged ]
    []

Check if the content you received from the editor is empty.

Such a check can be necessary because when you empty the editor the final data still contains <p>&nbsp;</p>. This function checks if the trimmed content is empty or is equal to <p>&nbsp;</p>

Configuration of CKEditor

Default CKEditor config

Set any other configuration

defaultConfig
    |> withCustom "mediaEmbed" mediaEmbedEncoder

The name must be a valid configuration property name

Set the language to use in the configuration

defaultConfig
    |> withLanguage "fr"

See reference for more information

Set the plugins to use in the configuration

defaultConfig
    |> withPlugins [ "Bold", "Italic" ]

See reference for more information

Set the plugins that should not be loaded in the configuration

defaultConfig
    |> withPluginsRemoved [ "Bold", "Italic" ]

See reference for more information

Set the toolbar to use in the configuration

defaultConfig
    |> withToolbar [ "bold", "italic" ]

See reference for more information