One of my latest projects is a notes app that is hosted in my server so I can stop using [G] Notes.
An interesting feature that I am including is Rich Text Editor, a rich javascript library in the form of user interface to format HTML text of any web form.
It’s open source, free for personal use, and very simple to use. A true win-win that I’m showing you today.
License
I said Rich Text Editor is free, and it is for a non-commercial use.
It's important that you read their pricing page to understand the limitations of the free license:
- 1 developer
- 1 domain
- 5 active users
In my case, I installed Rich Text Editor in this server that hosts the blog, and it's been restricted with php so it's only accessible from the same domain.
TIP! Do NOT host the files anywhere accessible for anyone (like a public server), as you might lead to a license break, being forced to pay a standard license or retiring your app.
Anyway, commercial licenses are one-off payments and it might be worth getting one if you're going to give it plenty of use.
Installation
Using Rich Text Editor is very simple and it's explained in their document page.
To install Rich Text Editor you only need to download the files from their website in a local folder or in your web server.
https://richtexteditor.com/download.aspx
Enable interface
Rich Text Editor works inside an HTML document.
Build it like this:
- As always, create an HTML file with the basic structure.
- Link the scripts and CSS files in the
<head>:<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script> - Inside the
<body>add the following<div>:<div id="div_editor1" >
<p>Initial Document Content</p>
</div> - Finally, call the editor in the
<script>:var editor1 = new RichTextEditor("#div_editor1", {skin:"rounded-corner", toolbar:"full"});
All the above would look like this (you can interact with it):
And the full code is the following:
<html>
<head>
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="/richtexteditor/rte.js"></script>
<script type="text/javascript" src='/richtexteditor/plugins/all_plugins.js'></script
</head>
<body>
<div id="div_editor1" >
<p>Initial Document Content</p>
</div>
</body>
<script>
var editor1 = new RichTextEditor("#div_editor1", {skin:"rounded-corner", toolbar:"full"});
</script>
</html>TIP! Copy and paste the above code to a local .html file inside the richtexteditor folder, and you can see the example in your browser.
Configuration
As you can see, I added some properties when calling the editor:
{skin:"rounded-corner", toolbar:"full"}
There are plenty of configuration options that you can check here:
https://richtexteditor.com/docs/configuration-reference.aspx
Editor functions
The library includes multiple functions to interact with the editor. All the command available can be found here:
https://richtexteditor.com/docs/cmd_allcommands.aspx
One basic funcionality is to capture the full HTML code for the text that we have been editing. That's what the button at the bottom does, using the getHTMLcode():
<button onclick="alert(editor1.getHTMLCode())">Show Html Code</button>
Uses
As stated previously, I'll be using this library as an editor for a notes app that will be hosted in my server.
The editor will let me easily add nice formatting to the notes and save them with the full format code.
Here you have a demo of how the interface is looking, although there are no functions enabled so far.
Other applications where you can use this editor are self-made forums, user forms, comments boxes or any text-box where a user needs to input text in your web app.
I hope you found this useful as I did and give it good use. Any doubts or comments, drop them on Twitter 🐦 See you soon!
