Edición del formato de un textarea en HTML con TinyMce

Buenas a tod@s!!!

Hoy traigo una solución fácil, rápida y bonita para que el usuario pueda editar un textarea de nuestra web como si se tratara de un de un fichero de Word, para luego poder guardarlo y mostrarlo; es el TinyMce, una librería basada en JavaScript y HTML.

Varios ejemplos para los que nos vendría bien utilizar esta plataforma es:
En foros, para la gente edite el formato de sus mensajes.
En esta misma entrada que estoy escribiendo la cual puedo modificar la fuente como me apetezca sin saber de HTML ni CSS.
En una tienda online para hacer una descripción bonita de los productos.
(...)

Vamos con unas nociones básicas para empezar a utilizar el tinymce lo más rápido y de la manera más fácil:

Lo primero es descargarnos la librería, nos bajamos la versión más reciente aquí. Y lo ponemos en la carpeta dónde trabajaremos.

Seguidamente creamos un fichero HTML, para ver el editor de textarea, dónde copiaremos el siguiente código (el código es casi el mismo que la web de tinyMce):


tinyMCE.html

<script type="text/javascript" src="js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
        // General options
        mode : "textareas",
        theme : "advanced",
        plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

        // Skin options
        skin : "o2k7",
        skin_variant : "silver",

        // Example content CSS (should be your site CSS)
        content_css : "css/example.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "js/template_list.js",
        external_link_list_url : "js/link_list.js",
        external_image_list_url : "js/image_list.js",
        media_external_list_url : "js/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
                username : "Some User",
                staffid : "991234"
        }
});
</script>

<form method="post" action="tinyMce_post.php">
        <textarea name="content" style="width:100%"></textarea>
<input type="submit" />
</form>

Creamos ahora otro archivo, este .PHP, dónde recogeremos por POST el texto con formato que ha elaborado el usuario y lo mostraremos.

tinyMce_post.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
var_dump($_POST["content"]);
echo $_POST["content"];
}
?>