Improve your blogging experience in WebSharper
Medium Editor is in WebSharper as an extension, so all we have to do is to get our
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
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:
- Creating a simple
classwe can refer to with our selector, or
- Creating a
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:
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.
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 =
Toolbar = Union1Of2 ToolbarOptions(
Buttons = [|
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.