We embed a sexy editor on your page

I apologize in advance if this post seemed to you boring and uninteresting)

In the course of developing my project, I was faced with the task of embedding a message editor. I wanted something so pleasant, light and at the same time quite functional. So that the pictures could be inserted from the buffer and the last actions could be undone, and of course all the basic functions of working with fonts.

And then my eyes fell on the editor supplied with the library
DojoToolkit

')

Since in runet about this library it is written frankly a little, I wanted to share my experience)

I’ll just say that I don’t have any programming experience on js, so maybe the post will be interesting to me like teapots), who live according to the principle “fight and search, find and hide”

So, in order to build a library you need to perform several steps:

1. Download and deploy)
2. Initialize the script
3. Add to the form itself

Under paragraph 1 - the size immediately scares, along with the library goes a bunch of examples of quite randomly scattered in folders, but for a start it will come down like that. Just unpack the entire folder, deal with what we need - later.

2. There were no problems with the initialization either, just add a couple of lines in the area of ​​the hider, by writing the appropriate paths:






3. Actually build editor
That's what this library is sexy from the inside, so it is easy to connect.
It is enough to enclose the textarea in the div style and set the parameter dojoType ..:

". htmlspecialchars(($doc['body'])) ."

Is done. It remains to tie the onclick event to the submission ..:
<input type=submit onclick='console.log(dijit.byId('body').getValue().length)' value='". $lang['submit'] ."' style='width:100%'>

and everything?
Not really) Now the most interesting thing is to catch bugs )
Fortunately, there are not so many of them. The first glitch is connected with incorrect processing of the event on onsubmit (Fortunately, Google answered this question, but unfortunately I could not find it again) Therefore, I’ll just attach the corrected file at the end of the post.
And the second is not quite a bug in general, but when parsing text, some characters are replaced with their html codes. That in general, it interferes with the insertion of links to videos from youtube, for example.
The fix is ​​quite simple, just comment out the line:
//str = str.replace(/&/gm, "&").replace(/</gm, "<").replace(/>/gm, ">").replace(/"/gm, """);
in escapeXml function in richtext.js library

And finally, in order to reduce the number of files lying in a directory, you can select only necessary libraries via firebug.

I laid out the libraries prepared in this way here.
As a result , we got a relatively small (about 200kb) and quite sexy editor)

It looks like this:


And poke on the editor in business
possible on this site

Oh, completely forgot about one moment. So that the links that users insert not through the buffer, but manually (http: //, without any hrefs), you can insert some kind of simple processing like this:
function url_process($text) {
if ( strstr($text,"\"http")){
return $text;
} else{
$text = preg_replace ('/http:\/\/([^",)<>\s]*)/', "\\1", $text);
}
return $text;
}


UPD

In the comments, the stark user also suggested another editor: nicedit With a volume of just 30! kb

As a result, I built it onto my website by hooking icons from dojo)

Icons can be downloaded separately here.