CKEditor

HTML Element

view : List (Attribute msg) -> List (Html msg) -> Html msg

Renders a CKEditor instance

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

config : Config -> Attribute msg

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

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

editor : String -> Attribute msg

Sets the registered editor build to use

See ckeditor5-webcomponent for more information

onChange : (String -> msg) -> Attribute msg

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

type Msg
    = CKEditorChanged String


onCKEditorChange CKEditorChanged

Configuration of CKEditor

Default CKEditor config

withCustom : String -> Value -> Config -> 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"

Set the plugins to use in the configuration

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

Set the plugins that should not be loaded in the configuration

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

Set the toolbar to use in the configuration

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