Don't forget to hook subscriptions and update into your app's own subscriptions
and update
function. Otherwise the RTE won't do anything.
Note: When the RTE is active (the textarea object is part of your view
), it keeps taking away the focus from every other element. Use freeze to stop this.
The rich text editor. Under the hood, it is a record type that tracks cursor position, selection, formatting etc.
init : String -> Rte
The string you pass in is an id
, which must be unique.
subscriptions : Rte -> Platform.Sub.Sub Types.Msg
Doesn't do anything when the RTE is freezed.
update : Types.Msg -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
textarea : Rte -> List (Html.Attribute Types.Msg) -> Html Types.Msg
Show the RTE.
showContent : Types.Content -> List (Html.Attribute Types.Msg) -> Html Types.Msg
Display, in an uneditable div, the content generated by the RTE.
showContentCustom : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> Types.Content -> List (Html.Attribute Types.Msg) -> Html Types.Msg
Same with some parameters.
showEncodedContent : List (Html.Attribute Types.Msg) -> String -> Html Types.Msg
Same but using a json generated with encodeContentString.
showEncodedContentCustom : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> List (Html.Attribute Types.Msg) -> String -> Html Types.Msg
Same with some parameters.
Same as the previous but with Html.Styled
.
textareaStyled : Rte -> List (Html.Styled.Attribute Types.Msg) -> Html.Styled.Html Types.Msg
showContentStyled : Types.Content -> List (Html.Styled.Attribute Types.Msg) -> Html.Styled.Html Types.Msg
showContentCustomStyled : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> Types.Content -> List (Html.Styled.Attribute Types.Msg) -> Html.Styled.Html Types.Msg
showEncodedContentStyled : List (Html.Styled.Attribute Types.Msg) -> String -> Html.Styled.Html Types.Msg
showEncodedContentCustomStyled : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> List (Html.Styled.Attribute Types.Msg) -> String -> Html.Styled.Html Types.Msg
makePastedLinksClickable : Basics.Bool -> Rte -> Rte
Control whether pasting something that begins with with http(s)://
becomes a clickable link. Default is False
.
setCharacterLimit : Basics.Int -> Rte -> Rte
Prevent typing more than a certain number of characters. There is no default limit, but the RTE becomes increasingly slow for longer texts (>10-12K characters).
setFontSizeUnit : String -> Rte -> Rte
Defaults to px
.
setHighlighter : Maybe (Types.Content -> Types.Content) -> Rte -> Rte
See MiniRte.Types on highlighters.
setIndentUnit : ( Basics.Float, String ) -> Rte -> Rte
Defaults to (50,"px")
. Matters when you use increaseIndent or decreaseIndent.
setSelectionStyle : List ( String, String ) -> Rte -> Rte
Controls how selected text looks. Defaults to [("background","hsl(217,71%,53%)"), ("color","hsl(0,0%,100%)")]
.
turnPastedImageLinksIntoImgElements : Basics.Bool -> Rte -> Rte
When you paste an image link x
, it becomes an img element with src=x
.
Something qualifies as an image link iff it starts with data:image/
or it ends with .jpeg
, .jpg
, .gif
, .png
, .apng
, .svg
, .bmp
, or .ico
.
Defaults to False
.
You can build a rich text editor toolbar from these (see the example in the repo).
addContent : Types.Content -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Add content at current cursor position.
addCustomHtml : Types.EmbeddedHtmlRecord -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Embed a custom html node within text.
addImageWithSrc : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
An img
node with the specified src
.
addLink : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Turn the current selection into a link.
addText : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Insert text at current cursor position.
copy : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Copy current selection. Results in a ToBrowserClipboard
Msg which must be captured in update
. See the example.
cut : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
decreaseIndent : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
freeze : Rte -> Rte
Hides cursor and stops listening to mouse and keyboard events.
increaseIndent : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
paste : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
replaceContent : Types.Content -> Rte -> Rte
Clears the editor and loads new content.
replaceContentString : String -> Rte -> Rte
Same with plain text.
setFontSize : Basics.Float -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Controls the font size within the selected text / at the current cursor position.
setSelection : ( Basics.Int, Basics.Int ) -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
setTextAlignment : Types.TextAlignType -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
toggleBold : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
toggleClass : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
toggleFontFamily : List String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
toggleHeading : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Turns the current paragraph into an h1
element.
toggleItalic : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
toggleNodeType : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
toggleStrikethrough : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
toggleUnderline : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
undo : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
unlink : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )
Remove the href
at the current cursor position.
unfreeze : Rte -> Rte
Show the cursor and activate mouse/keyboard listeners.
content : Rte -> Types.Content
The edited content of the RTE.
fontFamily : Rte -> List String
The font-family (set with toggleFontFamily) at the cursor position.
fontSize : Rte -> Maybe Basics.Float
The font-size (set with setFontSize) at the cursor position.
freezed : Rte -> Basics.Bool
textContent : Rte -> String
The plain text content of the RTE.
textToContent : String -> Types.Content
contentToText : Types.Content -> String
decodeContentString : String -> Result String Types.Content
Convert content json string into edited content.
decodeContentGZip : Bytes -> Result String Types.Content
Convert gzipped content json into edited content.
encodeContentString : Rte -> String
Encode the edited content in a json string.
encodeContentGZip : Rte -> Bytes
Encode the edited content in a gzipped json string.