Improve your blogging experience in WebSharper

Have you ever wondered about creating your own blog, but couldn’t find a nice text editor? Some fans of this site created the Medium Editor JavaScript library that looks and acts like the editor we have here!

Medium Editor is in WebSharper as an extension, so all we have to do is to get our Zafir.MediumEditor (or WebSharper.MediumEditor for WebSharper 3) NuGet package in our project.

If you haven’t heard about WebSharper, I highly recommend reading these stories: Getting started (part 1), Getting started (part 2). These will help you get started with your very first website and then you’ll have a greater understanding of WebSharper’s templating system.

As we got the Medium Editor extension in our project, we’re able to use it and its functions, but first we have to open it in the Client.fs or the fs file we use as the client side code (Tagged with the [<JavaScript>] attribute).

open WebSharper.MediumEditor

A simple example

If we don’t need anything special, all we have to do is call the MediumEditor() constructor with the selector to the DOM element we want to change to an editor element.

We have two way to do this:

  1. Creating a simple div with an id or class we can refer to with our selector, or
  2. Creating a textarea with an id or class , but if we do this, the original textarea will be saved and we’ll be able to get its content (which is the formatted text we want)

If you want to create your container div with F# code, be sure to run the constructor after the element is already in the DOM.

So to keep it simple, we just need a div , something like this in our html file:

<div class="editable"></div>

If we have this, the F# code is really simple:

let editor = MediumEditor(".editable")

This will change every single DOM element with the editable class to a text editor on our website.

More options

The editor comes with a lot of options to set. We can access this with the MediumEditorOptions record type. In this record sometimes we have to use other records too, see the documentation to know what to use when! And the original documentation for the fields to set.

Let’s construct a new editor for the same div as above, but now with a custom toolbar:

let editor = 
MediumEditor(
".editable",
MediumEditorOptions(
Toolbar = Union1Of2 ToolbarOptions(
Buttons = [|
"bold"
"italic"
"underline"
"strikethrough"
"quote"
"anchor"
"image"
"justifyLeft"
"justifyCenter"
"justifyRight"
"justifyFull"
"superscript"
"subscript"
"orderedlist"
"unorderedlist"
"pre"
"removeFormat"
"outdent"
"indent"
"h2"
"h3"
"html"
|]
),
ButtonLabels = "fontawesome",
Anchor = Union1Of2 AnchorOptions (
TargetCheckbox = true
)
)
)

With these options we have every button our toolbar could have.

Try it out!

Try out a live example of this extension on Try WebSharper! You can play with the code and explore more extensions:


Be sure to leave a 💚, it helps me know what stories you want to read, and leave a comment if you have any question! Hope you had fun reading the post and found your love for F# and for WebSharper.