Background spell check in TinyMCE

TinyMCE has spellchecker plugin which checks your text when you click button. You can read how to setup it here.

However what we want is to have background spell checking when we type text. Just like in regular word processor. The idea is simple – trigger spell check each time we type something. There’s a problem if we’ll trigger it after each letter – spell check uses Ajax request to server script, it may be very slow. We’ll solve it by triggering spell checking within 3-seconds delay after user has stopped typing.

Here’s the code:
(more…)

Sunday, April 11th, 2010

Extra spacing in TinyMCE after pasting from Word

TinyMCE can add extra empty paragraphs when you insert text from Word. TinyMCE simply wraps each newline into paragraph.
To solve it you need to follow these steps:

  1. Enable paste plugin.
  2. Add handler for parsing inserted text

So your TinyMCE code will look like:

  tinyMCE.init({
        ...
      	plugins: "paste",
      	paste_auto_cleanup_on_paste : true,
      	paste_postprocess : function(pl, o) {
            // remove extra line breaks
            o.node.innerHTML = o.node.innerHTML.replace(/<p.*>\s*(<br>|&nbsp;)\s*<\/p>/ig, "");
        }
  });

See more info on the official wiki

Saturday, March 6th, 2010

Prototype.js formElmt.request() and non-valid HTML

Handy and pretty $('myform').request() can be easily broken if you have really broken HTML. For example:

<table>
<form id="myform">
  <input />
  <input />
  <tr><td></td></tr>
</table></form>

$('myform').serialize() will return empty string for such html. As a result you’ll have ajax request with no parameters, obviously not what you’ve expected. Fix html and everything will work.

Friday, May 16th, 2008

How to make burning text in JavaScript

You can make different dynamic text effects on your html page using JavaScript function document.getElementsByTagName(‘tag_name’). The idea is to select tag, which is absent in your html (for example:<tt>, <i>, <b> etc.). Then you should embrace all letters of your text with this tag. For example: “Hello world” transforms to “<tt>H</tt><tt>e</tt><tt>l</tt><tt>l</tt><tt>o</tt><tt> </tt><tt>W</tt><tt>o</tt><tt>r</tt>

<tt>l</tt><tt>d</tt>”. After that you can dynamically change style (color, font etc.) of every letter you want accessing to it during array document.getElementsByTagName(‘tt’).

So, you can create with your text such effects like burning, dissapearing, growing etc. Please, look at http://atuk.boloto.org/fire/ to get sample scripts.

Friday, December 21st, 2007