As stated in the comment CK Editor already has this. The problem is how to enable it :-)
It is not a setting of <apex:textarea>
You will have to do some javascript to enable it...
If it's a custom page you can put on the top (just after <apex:page.....>
:
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
CKEDITOR.on('instanceReady', function(e) {
if (e.editor.config.magic) return;
var target = e.editor.config.bodyId;
var name = e.editor.name;
e.editor.destroy();
CKEDITOR.editorConfig = function( config ) { config.magic = true; }
CKEDITOR.replace(name, {
height : 600,
bodyId : target
});
});
});
</script>
If it is a standard page you can override this as such:
<apex:page standardController="MyObject">
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/>
<script>
var $j = jQuery.noConflict();
$j(document).ready(function(){
CKEDITOR.on('instanceReady', function(e) {
if (e.editor.config.magic) return;
var target = e.editor.config.bodyId;
var name = e.editor.name;
e.editor.destroy();
CKEDITOR.editorConfig = function( config ) { config.magic = true; }
CKEDITOR.replace(name, {
height : 600,
bodyId : target
});
});
});
</script>
<apex:detail relatedList="true">
</apex:page>
If you don't want all the options of the CK Editor available to your user you can create a custom list of buttons to show in the editor. Just go to the CK Editor's man pages and get the info from there.