FabienHenon / elm-ckeditor5 / CKEditor

HTML Element

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

Renders a CKEditor instance

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

Attributes

config : Config -> Html.Attribute msg

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

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

editor : String -> Html.Attribute msg

Sets the registered editor build to use

See ckeditor5-webcomponent for more information

content : String -> Html.Attribute msg

Sets the content of the editor

See ckeditor5-webcomponent for more information

targetId : String -> Html.Attribute msg

Sets the id of the element the editor will render for. (Itself by default)

See ckeditor5-webcomponent for more information

Events

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

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 ]
    []

Helpers

isContentEmpty : String -> Basics.Bool

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>

trimContent : String -> String

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

Config


type Config

Configuration of CKEditor

defaultConfig : Config

Default CKEditor config

withCustom : String -> Json.Encode.Value -> Config -> Config

Set any other configuration

defaultConfig
    |> withCustom "mediaEmbed" mediaEmbedEncoder

The name must be a valid configuration property name

withLanguage : String -> Config -> Config

Set the language to use in the configuration

defaultConfig
    |> withLanguage "fr"

See reference for more information

withPlugins : List String -> Config -> Config

Set the plugins to use in the configuration

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

See reference for more information

withPluginsRemoved : List String -> Config -> Config

Set the plugins that should not be loaded in the configuration

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

See reference for more information

withToolbar : List String -> Config -> Config

Set the toolbar to use in the configuration

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

See reference for more information