TinyMCE 4 Crear Plugin PRE prettyprint

Crear Plugin Pre para PrettyPrint

Lo que ahora haremos será un plugin para tinyMCE 4 que nos ayude a insertar códigos fuentes en nuestros artículos. Además conoceremos mas profundo sobre como realizar plugins avanzados para tinyMCE 4.

Primero es crear un archivo javascript con el nombre plugin.min.js y colocarlo dentro de un carpeta que llevará el nombre de tu plugin "mipluginpre/plugin.min.js" lo que esta en negrita puedes cambiarlo y recuerda cambiar tambien dentro del codigo de javascript.

Colocaré el código con las explicaciones de su funcionamiento.

tinymce.PluginManager.add('mipluginpre', function(e, url) {
	function ins_prettyprint(){
		var selected = false;
		 var b=e.windowManager.open({
			title: 'Insertar Código PrettyPrint',
			width: 400, //ancho del dialogo
			height: 400, //Alto del dialogo	
			body: [{
				type: 'textbox', 
				multiline:!0,
				name: 'prettycode',
				minWidth:e.getParam("code_dialog_width",300),
				minHeight:e.getParam("code_dialog_height",Math.min(tinymce.DOM.getViewPort().h-200,350))
			}],onsubmit: function(get) {
				//genera el código reemplazando etiquetas para su modo visible
				code = get.data.prettycode.replace(/\</g,"<").replace(/\>/g,">");
				//esto es muy importante ya que si no se reemplaza eso, el código se ejecuta.
				
				//verifica si se escribió algo en el editor
				//verifica si es edición o nuevo codigo
				if(code.length >= 2 || selected == true){
					//Crea el codigo PRE con la respectiva clase prettyprint
					html_pre = e.dom.create('pre',{'class':'prettyprint'},code);
					if(selected){
						//si es edición reemplaza el Código
						e.dom.replace(html_pre, e.selection.getNode());
					}else{
						//si es nuevo inserta el código
						e.insertContent(e.dom.getOuterHTML(html_pre)+'<br>');
					}
				}
			}
		 });
		//Verifica si se va modificar
		if(e.selection.getNode().className == "prettyprint" ){
			selected = true;
			//si se esta editando rellena el plugin con el código del editor
			b.find("#prettycode").value($(e.selection.getNode()).html());
			//Aqui solo se me ocurrió usar jquery ya que no encontré el
			//método que me retorne el contenido del pre.
		}
		
	}
	//esto colocará un botón en el editor
	e.addButton('prettyprint', {
		icon: 'pastetext', //Puedes cambiar por otro icono.
		tooltip: 'Insertar PrettyCode', //El texto que aparece cuando el cursor está sobre el botón
		onclick: ins_prettyprint // al hacer click ejecutará la funcion ins_prettyprint(9;
	});	

    e.addMenuItem('prettyprint', {
		icon: 'pastetext',
        text: 'Insertar PrettyCode', //Muestra el texto del Menú
		tooltip: 'Insertar PrettyCode',
        context: 'insert', //menus disponibles "file edit insert view format table tools"
        onclick: ins_prettyprint
    });		
});

E tratado de explicar al máximo. en la parte donde se usa jquery, si alguien sabe como se retorna ese mismo contenido sin usar jquery podríamos mejorarlo. de modo que nuestro plugin no dependa de query.

tambien debes agregar el plugin y el botón en la inicialización de TinyMCE:

tinymce.init({
    selector: "textarea#idtextarea",//cambia por el id de tu area de texto
	language : 'es',
	menubar: "edit insert view format table tools",
	plugins: [
         "mipluginpre ..."
   ],
   toolbar1: "ssp_prettyprint | ..."
 });

Con esto ya tendremos nuestro plugin PRE PRETTY PRINT

Recomiendo leer el artículo Mostrar códigos fuentes con colores para que tengas idea de como usaro