[Resolvido] TinyMCE - Como criar botões extras

[Spyder.RV 0]

Salve pessoal!

 

Preciso criar alguns botões extras no TinyMCEe também fazer com que esses botões extras chamem funções javascript externas ao Tiny.... Alguém sabe como fazer isso?

[Spyder.RV 0]

Parte eu consegui resolver, que foi criar os botões personalizados... Achei na documentação: http://www.tinymce.c...ditor.addButton

 

O que eu não consegui foi fazer o click desse botão chamar uma função que está em outro local.

$(document).ready(function() {
   $("textarea.tinymce").tinymce({
       script_url : "/js/tinymce/tiny_mce.js",
       // General options
       theme : "advanced",
       plugins : "autolink,table,save,emotions,insertdatetime",
       language: "pt",

       // Theme options
       theme_advanced_buttons1 : "newdocument,save,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
       theme_advanced_buttons2 : "undo,redo,|,bullist,numlist,|,outdent,indent,|,link,unlink,image,cleanup,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,youtube,|,code,",
       theme_advanced_toolbar_location : "top",
       theme_advanced_toolbar_align : "left",
       theme_advanced_statusbar_location : "bottom",
       theme_advanced_resizing : false,

       save_enablewhendirty : true,
       save_onsavecallback : function(data){
           // Envia o conteúdo para salvar
       	// Aqui dentro dessa função callback eu consigo fazer rodar,
       	// porém preciso chamar funções feitas usando jquery e que estão em outros arquivos .js
       	// e que estão referenciados no meu index
       },
       oninit: function() { 
           $("textarea.tinymce").tinymce().setContent("<h1>Editor HTML</h1><p>Customização do TinyMCE.</p>");
       },
    	setup : function(ed) {
        	// Botões Customizados
       	// Youtube
       	ed.addButton("youtube", {
         	  title : "Inserir link do Youtube ou Vimeo",
         	  image : "/js/tinymce/override/themes/advanced/img/youtube.gif",
         	  onclick : function() {
 	              // Aqui também roda normal, porém preciso chamar as funções externas e não dá certo.
    	       }
       	});
   	}
   });
});

[Spyder.RV 0]

Também consegui resolver... deu um pouco mais de trabalho... mas foi só correr um pouco na documentação do jQuery que consegui fazer rodar...

 

Foi só criar eventos customizados e fazer o bind deles ao document usando jquery e depois lá dentro do tinymce fazer o trigger deles...

 

Meu arquivo .js externo aos arquivos do tinymce

...

var editorVisual_saveEvent = jQuery.Event("CustomEvent");
var editorVisual_youtubeEvent = jQuery.Event("CustomEvent");

$(document).bind({
editorVisual_saveEvent: function(event, data){
	console.log("Foi Chamado o Evento SAVE do Editor e os dados a serem salvos estão abaixo:");
	console.log(data);
},
editorVisual_youtubeEvent: function(event, editor){
	// Aqui é só implementar o código para chamar uma janela e pegar o  link que eu quero do youtube... 
	// na verdade só vou pegar o código do  video
	// A idéia é só pegar esse link e deixar armazenado... 
	// depois na  hora de exibir o conteúdo, faço o replace do que tiver entre {} pelo  código para exibir o video.
	editor.execCommand('mceInsertContent',false,'{link do youtube}');
}
});

...

 

Meu código ajustado no tinyMCE

$(document).ready(function() {
$("textarea.tinymce").tinymce({
	script_url : "/js/tinymce/tiny_mce.js",
	// General options
	theme : "advanced",
	plugins : "autolink,table,save,emotions,insertdatetime",
	language: "pt",

	// Theme options
	theme_advanced_buttons1 :  "newdocument,save,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
	theme_advanced_buttons2 :  "undo,redo,|,bullist,numlist,|,outdent,indent,|,link,unlink,image,cleanup,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,youtube,|,code,",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "bottom",
	theme_advanced_resizing : false,

	save_enablewhendirty : true,
	save_onsavecallback : function(data){
		// Envia o conteúdo para salvar
		$(document).trigger("editorVisual_saveEvent", $("textarea.tinymce").tinymce().getContent());
	},
	oninit: function() { 
		$("textarea.tinymce").tinymce().setContent("<h1>Editor  HTML</h1><p>Customização do TinyMCE.</p>");
	},
	setup : function(ed) {
		// Botões Customizados
		// Youtube
		ed.addButton("youtube", {
			title : "Inserir link do Youtube ou Vimeo",
			image : "/js/tinymce/override/themes/advanced/img/youtube.gif",
			onclick : function() {
				$(document).trigger("editorVisual_youtubeEvent", this );
			}
		});
	}
});
});