For my website, we are coding everything from scratch, and I've been learning a ton from it. Lately I've been working on the rich text editor(Just got it to work
), and wanted to share how I made it with you guys. This tutorial will not cover the exact one im making, as that one will use some more complex coding that I am not going to writ in this tutorial. However, i will show you guys how to make a basic rich text editor.(We will not be discussing security in this tutorial).
First things first, what is a rich text editor? It's a text editor that supports styles, like when you make posts on EZ. It allows you to bold, italic, and style your input.
The basic method behind this is using an editable div to accept commands from the javascript command "execCommand", which can be used to format text.
In the following code is actually the tutorial, written in comments. This code creates a rich text editor with minimal styling and functions, just enough for you guys to get the basic concept. Enjoy!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Rich Text editor</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery
/1.3.2/jquery.min.js"> <!--Gotta have the link to use Jquery :O-->
</script>
<style>
/*VERY basic styling just to make it not so painful to the eyes. This will not be
explained, as it is not essential to the tutorial*/
#rte {
width:500px;
height:100px;
border: 1px solid #c0c0c0;
margin-right:auto;
margin-left:auto;
}
#menu {
width:500px;
height:20px;
border: 1px solid #c0c0c0;
background-color:#efefef;
margin-right:auto;
margin-left:auto;
}
.options {
cursor:pointer;
color: #000000;
font-size:16px;
margin-left:auto;
margin-right:auto;
}
a:hover {
color:red;
}
a:active{
color:blue;
}
</style>
<script type="text/javascript">
/*Ahh, now here's the interesting part. This calls a different execCommand depending on which id you click.
execCommand is a command that provides formatting, and inside the parameters you request set actions. So,
bold, for instance, is not a variable or anything that i created, it is a supported action from execCommand.
All possible actions can be found through a simple google search The false and null's are added in each
execCommand, with the exception of foreColor(which changes the text color). Rather than null, you name
the desired color. The great thing about execCommand is that it's a toggle, at each click, it toggles the
action on/off. You don't have to manually provide that functionality. The unique thing about this code, is
where it says $('#rte').focus(). this part of the code exists merely to keep the cursor within the editable
div even when you click outside of it. Because execCommand is a toggle, foucs must be repeatedly called.*/
$(function(){
$('#rte').focus();
$('#bold').click(function(){document.execCommand('bold', false, null);$('#rte').focus();return false;});
$('#italic').click(function(){document.execCommand('italic', false, null);$('#rte').focus();return false;});
$('#underline').click(function(){document.execCommand('underline', false, null);$('#rte').focus();return false;});
$('#red').click(function(){document.execCommand('foreColor', false, 'red');$('#rte').focus();return false;});
$('#center').click(function(){document.execCommand('justifyCenter', false, null);$('#rte').focus();return false;});
});
</script>
</head>
<body>
<div id="menu" style="background-color: grey;"><em><b>Rich Text Editor</b></em><>
<div id="menu">
<a id="bold" href="#"><b>B</b></a><!--The next point of significance.
these are simply empty links with id's,
which allows them to be called in jquery.-->
<b>|</b>
<a id="italic" href="#" class="options"><b><i>I</i></b></a>
<b>|</b>
<a id="underline" href="#" class="options"><b><u>U</u></b></a>
<b>|</b>
<a id="red" href="#" class="options"><b><u>Color: red</u></b></a>
<b>|</b>
<a id="center" href="#" class="options"><b><u>Center</u></b></a>
<>
<div id="rte" contenteditable="true" unselectable="off"><>
<!--The above part is the last significant part. It allows the idv to be edited and selected.
it also has an id which can be called in jquery. execCommand automatically affects it!-->
</body>
</html>
I hope you enjoyed this tutorial! I will likely make a more detailed one featuring the actual rich text editor im making for my website(It's awesome
[for you on the team, im not talking about the one you guys have seen. I'm locally creating a cross browser one now that is WAY better and works 100%. That last way i tried to make it was too much trouble lol]). Later, ill probably make a tut on how to create .gif emoticons for your text editors. If you would like this, please leave it in the comments, as I'm not sure how useful such a tutorial will be.
More coming soon
