Turn a HTML Textarea into a Rich-Text Editor
Thursday, 19 November 2015
Hello? Today's post is going to be a short one. We will be creating a WYSIWYG / Rich Text Editor. What this simply means is, we will be adding Microsoft word-like features to a text area to enable things like selecting text and making it bold or underlined. The image Below shows what we will be making. And WYSIWYG simply stands for What You See Is What You Get in case you were wondering, plus it's a commonly used abbreviation in web design so chances are you will be using it yourself pretty soon.
To make this possible we will use an open source JavaScript library called TinyMce. If you have worked with platforms such as WordPress, then TinyMCE isn't new, it's what is used as the text editor.
So head over here and download the latest version and extract it into your project's folder. If you have an active internet connection, you don't need to download it as I will show you how to include it from a CDN. A CDN is a content delivery network i.e. A certain server has this file and allows your projects to download it directly. This is more advantageous than manually including the library.
How is using a CDN advantegious?
Let's say for example a user visits a website that uses Tiny MCE, the browser caches the TinyMCE JavaScript and given that it's very popular, chances are that many people have visited sites that use this library. Now a person visits your site which happens to use TinyMCE, instead of including the library from within your site, the browser will realize that a previous site used the same CDN and instead of downloading it, it uses the cached one, making your site fast.
The HTML
<div class="container">
<textarea placeholder="Enter your story here..." class="text-area"></textarea>
</div>
The Html is pretty simple, a div that acts as the text areas container with a class of "container". Then the text area with a placeholder and a class of "text-area". I noticed that if you put any space between the opening and closing text area tags, the placeholder text will not show.The CSS
.container{
width: 50%;
margin: 0 auto;
}
.text-area{
height: 400px;
}
The CSS is simple too. We use the ".container" class to give the container div a width of 50% and margins of 0 on top and bottom and auto on the left and right (auto on left and right will center the div horizontally). Next we use the ".text-area" class to style the text-area. We give it a height of 400px to make it cover the page nicely. when content overflows a scroll bar will show to scroll the content. Don't worry about the width as i noticed that the TinyMCE JavaScript makes the text area's width occupy 100% of it's parent container.Adding TinyMCE to the Text Area.
If you downloaded and extracted TinyMCE, copy the extracted folder into the root of your project. The javascript file we need to include is buried within a few levels of folders i.e. "tinymce/js/tinymce/tinymce.min.js" . You can later delete the unnecessary folders but to avoid confusion, let's just use the above structure in this project.
Add the following code just above the closing head tag(</head>) to include it.
Add the following code just above the closing head tag(</head>) to include it.
<script src="tinymce/js/tinymce/tinymce.min.js"></script>if you have a stable working internet connection this is how you include it from the CDN
<script src="http://tinymce.cachefly.net/4.2/tinymce.min.js"></script>The next thing we are going to do is write the script that initializes TinyMCE to the text area. Right after the include script add this code ( Still within the head tag ).
<script>
tinymce.init(
{selector:'.text-area'}
);
</script>
In this code we are specifying the selector as a class ".text-area" so the JavaScript will find the text-area with a class of ".text-area" and apply TinyMCE to it. If you refresh your project on a browser you will notice that it includes that basic TinyMCE, luckily we can specify that we want more components by adding the specifications to the above code.You can replace the above code with this to get the added features like Image Uploads, links e.t.c.
<script type="text/javascript">
tinymce.init({
selector: ".text-area",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
As you can see we are simply specifying that we want some plugins and toolbar tools to be loaded. Click here to see a detailed list of all the available options, and how you can further expand the functionality.You can download the finished project here or view a demo here.
I hope you enjoyed this tutorial, if you have any questions please leave a comment and i will get back to you.
By: Unknown | On: Thursday, 19 November 2015 | At: 15:00 |
IN:
