Como instalar editor de texto Tinymce

En un principio instalé en mi proyecto el ckeditor. Como vi que venía muy pelado y que pesaba mucho, busqué alternativas y encontré el tinymce, que es mucho más cómodo de configurar, trae más opciones por defecto y, como ya he dicho, pesa mucho menos (apenas 700kb).

En este post voy a explicar como lo tengo instalado yo, luego cada cual lo puede colocar donde quiera o manipularlo como mejor le parezca.

En primer lugar hay que hacerse con el tinymce. La versión de descarga de su página web viene en ingles, por lo que le instalé una traducción al castellano. Como ya lo tengo hecho, mejor lo pongo para quien se lo quiera descargar.

http://dfiles.eu/files/2xjgq71rq

Pasos a seguir:

1- meter el tinymce en el proyecto. Yo, por comodidad, lo tengo en la raíz del proyecto, es decir, fuera de cualquier carpeta.
2- Llamar a los archivos de configuración desde la página donde se vaya a instalar y colocarlos donde corresponde. En mi caso lo tengo así:
En el bloque donde tienes los .css
<link href="tinymce_4.0.2/tinymce/js/tinymce/skins/lightgray/content.min.css" rel="stylesheet" type="text/css">

En el bloque donde tienes los .js
<script src="tinymce_4.0.2/tinymce/js/tinymce/tinymce.min.js"></script>

NOTA: Si colocas el tinymce en otro sitio, ya sabes que tienes que modificar la ruta y añadir el ../ si es necesario.

3- Pegar este script antes de que cierre el </head>:

<script type="text/javascript">
        tinymce.init({
			language : 'es',
			selector: "textarea.nombre de tu texarea",
    theme: "modern",
    plugins: [
         "advlist autolink link image lists charmap print preview hr anchor pagebreak table",
         "searchreplace wordcount visualblocks visualchars fullscreen insertdatetime media nonbreaking emoticons textcolor",
         "save table contextmenu directionality emoticons template paste textcolor"
   ],
   content_css: "css/content.css",
   toolbar: "insertfile undo redo preview | fontselect | fontsizeselect | forecolor backcolor emoticons | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | media fullpage", 
    fontsize_formats: "9pt 10pt 11pt 12pt 13pt 14pt 15pt 16pt 18pt 20pt 22pt 24pt",

	font_formats: "Andale Mono=andale mono,times;"+
        "Arial=arial,helvetica,sans-serif;"+
        "Arial Black=arial black,avant garde;"+
        "Book Antiqua=book antiqua,palatino;"+
        "Comic Sans MS=comic sans ms,sans-serif;"+
        "Courier New=courier new,courier;"+
        "Georgia=georgia,palatino;"+
        "Helvetica=helvetica;"+
        "Impact=impact,chicago;"+
        "Symbol=symbol;"+
        "Tahoma=tahoma,arial,helvetica,sans-serif;"+
        "Terminal=terminal,monaco;"+
        "Times New Roman=times new roman,times;"+
        "Trebuchet MS=trebuchet ms,geneva;"+
        "Verdana=verdana,geneva;"+
        "Webdings=webdings;"+
        "Wingdings=wingdings,zapf dingbats",
 }); 		
</script>

NOTA: en la siguiente línea debes poner el nombre que tenga tu textarea:

selector: "textarea.nombre de tu texarea",

Sustituye nombre de tu textarea por el que tú tengas puesto en la página. Por ejemplo, si tienes

<textarea class=" articulo " name=" articulo " cols="50" rows="15"></textarea>
Debes ponerlo así:

selector: "textarea.articulo",

Creo que esto es todo. Siguiendo estos pasos debería funcionar perfectamente. Si alguien tiene alguna duda o problema, que me lo diga y gustosa trato de ayudarle. Por supuesto que se le pueden quitar las funciones que se deseen. Para ello tan solo hay que eliminarlas de las líneas que hay en las secciones “plugins” y “toolbar”.

Respecto a fontsize_formats y font_formats son dos opciones que no vienen por defecto, sino que se las he instalado yo. En ellas se pueden añadir o quitar las familias de fuentes que se deseen y también los tamaños. Los emoticonos que tiene el editor también se los puse yo un día que me dio por experimentar en una web donde se pueden diseñar a gusto de cada uno.

Espero que os sea de utilidad este editor de textos y estaré atenta por si alguien tiene alguna duda o consulta.

¡QUE LO DISFRUTÉIS!

NOTA FINAL: Recomiendo eliminar la pestaña “tablas” porque he visto que si alguien te mete una demasiado grande te descuadra la página. No creo que en una web sea necesario que nadie meta una tabla, pero eso queda a gusto de cada uno. Quien quiera eliminar algún botón o pestaña que me lo diga y le indico cómo hacerlo.

muchas gracias por tu aporte esmeralda

No hay nada que agradecer, porque lo he hecho gustosa. Ahora solo me queda rezar para que mi primera aportación (espero no sea la última) sea útil a alguien y, sobre todo, que no me haya saltado nada. Pora asegurarme lo he probado yo misma, como si partiese de cero, y me ha funcionado perfectamente.

excelente aporte, de todos lo que eh probado solo me a funcionado este, quería preguntarte algo.. quieres casarte conmigo?? jeje no enserio sabes como hacer un evento onKey en este editor?

me explico

<script type="text/javascript">
function prueba() {
	alert('Has pulsado una tecla');
}
</script>
<textarea name="editor" id="editor" onKeyPress="prueba();"></textarea>

cuando en el ejemplo cuando pulsas una tecla se ejecuta la función prueba pero cuando tienes el editor cargado en la textarea ya no te hace ni caso, eh buscado documentación en la pagina oficial y encontré esto

// Adds an observer to the onKeyPress event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onKeyPress.add(function(ed, e) {
          console.debug('Key press event: ' + e.keyCode);
      });
   }
});

pero como si nada

Genial muchas gracias me ha venido muy bien!

si te es posible y no es mucha molestia, como sería para poder subir imágenes a la base de datos?? hacer un upload de imagen con X condiciones.

Muuuuchas gracias