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>

Trim the content, removing white spaces at the beginning and the end of the data. If the data is considered as empty (see isContentEmpty) this function will return an empty string

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