CocinaMental

+0 0

Añadiendo un boton personalizado a TinyMCE

Es un editor WYSIWYG para HTML de código abierto que funciona completamente en JavaScript y se distribuye gratuitamente bajo licencia LGPL.

Lo podemos descargas de su pagina http://tinymce.moxiecode.com/ la cual esta en su version 3.2.1.

Primero tenemos que agregarla TinyMCE a nuestra aplicacion para ello colocamos la siguiente linea de codigo.

<script type="text/javascript" src="/public/js/tiny_mce/tiny_mce.js"></script>

Ahora inicializamos el objeto y se veria asi :

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
	
	mode : "textareas",
	theme : "advanced",
	plugins : "safari,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,imagemanager,filemanager",

	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,

	content_css : "css/example.css",

	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",

	template_replace_values : {
		username : "Some User",
		staffid : "991234"
	}
});
</script>

<form method="post" action="somepage">
	<textarea name="content" style="width:100%">
	</textarea>
</form>

Ahora vamos a generar un boton con el cual podamos ingresar una pequeña frase , vamos a la ruta tiny_mce/plugins y creamos una nueva carpeta "boton", creamos 2 ficheros :

• boton_plugin.js : es un fichero comprimido para ello podemos usar heramientas online como javascriptcompressor.
• boton_plugin_src.js : Aqui esta el codico sin comprimir.

Asi tendria que ser el codigo para añadir una fase :

tinymce.create('tinymce.plugins.BotonPlugin', {
  createControl: function(n, cm) {
    switch (n) {
      case 'frase':
        var c = cm.createMenuButton('frase', {
          title : 'Subir Imagen',
          image : '/javascripts/tiny_mce/imgs/imagen.gif',
          onclick : function() {
            tinyMCE.execCommand('mceInsertRawHTML', false ,'<span>Frase</span>');
          }
        });
        return c;      
    }
    return null;
  }
});

tinymce.PluginManager.add('codigoboton', tinymce.plugins.BotonPlugin);
})();

El usando el comando execCommand insertamos la fase que queremos, tambien podemos llamar  a una funcion. Al boton le llamamos 'frase' y le agregado una imagen que esta en tiny_mce/imgs/imagen.gif.

Una vez creado el boton, lo tenemos que registrarlo con la funcion PluginManager.add y por ultimo tenemos que ponerlo en la inicializacion del objeto  "inicializaciontinyMCE.init," aqui resitramos el plugins en la seccion plugins: "codigoboton,..." y el boton en extended_valid_elements:"frase,..." solo recargamos la pagina y ya esta listo.

Si te gusto este artículo puedes dejar un comentario, también puedes suscribirte al canal RSS de la página o compartir este articulo por facebook

Deja tu comentario! Comentarios

churristian8 02/09/2009

No he entendido muy bien el ultimo parrafo...
No se donde añadir lo de la inicializacion ni lo de la seccion plugins :S

Gracias por este magnifico tutorial.
Saludos ;-)

Responder

0

zigor 02/20/2009

si tienes razon no estaria mal comentar un poquito mas el ultimo parrafo...me entero de poco

de todas formas...gran aporte

Responder

0

ArthasMX 08/17/2009

Pues no se que parte no entendieron mis colegas...si todo esta facilon :D

Responder

0

trenti1980 09/30/2009

Claro que esta facil, el que lo a entendido no necesita que se lo expliquen y al que lo a echo tampoco, pero muchos de nosotros no lo hemos entendido muy bien.

0

Deja tu comentario!