TinyMCE versão 4 com uplodfy - em asp NET
Bom dia, Senhores.
Estou criando um canal de FAQ utilizando o plugin TinyMCE versão 4. Devido ser preciso upload de imagem e a versão 4 não possuir tal função, estou realizando um integração com uploadfy. Encontrei muitos tutorial na net sobre a integração de ambos, porém sempre o tinyMCE na versão <= 3, verifiquei também que ambos os plugin foram atualizados. O meu plugin do uploadfy esta realizando o upload normal porém não esta carregando a imagem dentro do textbox do TinyMCE.
Segue o código java script que estou utilizando.
tinymce.init({ script_url: 'jscripts/tiny_mce/tiny_mce.js', selector: ".tinymce", theme: "modern", menubar: false, resize: false, statusbar: false, plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools'], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons', image_advtab: true, templates: [ { title: 'Test template 1', content: 'Test 1' }, { title: 'Test template 2', content: 'Test 2' } ], content_css: [ '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', '//www.tinymce.com/css/codepen.min.css' ]
});
$("[id*=FileUpload1]").uploadify({
'uploader': 'Upload.ashx',
'progressData': 'speed',
'swf': '/js/tinymce/uploadify.swf',
'cancelImg': '../img/icones/cancel.png',
'buttonText': 'Anexar Imagem ',
'folder': 'uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true,
'onComplete': function (event, ID, fileObj, response, data) {
var img = "<img style = 'height:80px;width:80px' src = '" + fileObj.filePath + "' />";
tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
}
});
Não sei o por que o comando onComplete não consta mais na documntação do uploadfy, minha pergunta é alguem conseguiu realizar a integração de ambos com a versão TyniMCE v4 e uploadfy v 3.2.1
Ficaria grato se alguém poder me ajudar nessa.
Estou criando um canal de FAQ utilizando o plugin TinyMCE versão 4. Devido ser preciso upload de imagem e a versão 4 não possuir tal função, estou realizando um integração com uploadfy. Encontrei muitos tutorial na net sobre a integração de ambos, porém sempre o tinyMCE na versão <= 3, verifiquei também que ambos os plugin foram atualizados. O meu plugin do uploadfy esta realizando o upload normal porém não esta carregando a imagem dentro do textbox do TinyMCE.
Segue o código java script que estou utilizando.
tinymce.init({ script_url: 'jscripts/tiny_mce/tiny_mce.js', selector: ".tinymce", theme: "modern", menubar: false, resize: false, statusbar: false, plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools'], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', toolbar2: 'print preview media | forecolor backcolor emoticons', image_advtab: true, templates: [ { title: 'Test template 1', content: 'Test 1' }, { title: 'Test template 2', content: 'Test 2' } ], content_css: [ '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', '//www.tinymce.com/css/codepen.min.css' ]
});
$("[id*=FileUpload1]").uploadify({
'uploader': 'Upload.ashx',
'progressData': 'speed',
'swf': '/js/tinymce/uploadify.swf',
'cancelImg': '../img/icones/cancel.png',
'buttonText': 'Anexar Imagem ',
'folder': 'uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true,
'onComplete': function (event, ID, fileObj, response, data) {
var img = "<img style = 'height:80px;width:80px' src = '" + fileObj.filePath + "' />";
tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
}
});
Não sei o por que o comando onComplete não consta mais na documntação do uploadfy, minha pergunta é alguem conseguiu realizar a integração de ambos com a versão TyniMCE v4 e uploadfy v 3.2.1
Ficaria grato se alguém poder me ajudar nessa.
Guilherme Henrique
Curtidas 0
Respostas
Guilherme Henrique
29/04/2016
Boa tarde a todos!
Depois de muito quebrar a cabeça, cheguei a uma solução.
O plugin Uploadfy sofreu algumas atualizações e suas opções foram atualizadas, lendo a documentação do mesmo observei que o comando onComplete não faz mais parte da nova versão do plugin, alterei o mesmo para o novo comando " onUploadSuccess ".
Foi necessário alterar algumas variáveis que estava sendo passadas como parâmetro.
No final meu código ficou:
/* Chamo a biblioteca do TinyMCE */
tinymce.init({
script_url: 'jscripts/tiny_mce/tiny_mce.js',
selector: ".tinymce",
theme: "modern",
menubar: false,
resize: false,
statusbar: false,
automatic_uploads:true,
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css'
]
});
/* Chamando a biblioteca do uploadfy*/
$("[id*=FileUpload1]").uploadify({
'progressData': 'speed',
'swf': '/js/tinymce/uploadify.swf',
'cancelImg': '../img/icones/cancel.png',
'buttonText': 'Anexar Imagem ',
'folder': 'uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true,
'uploader': 'arquivo_que_realiza_o_upload_aqui',
/* Comando onUploadSucess, chama a função que pega o caminho o arquivo, e adicionar a caixa texto do tinyMCE*/
'onUploadSuccess': function (file) {
var img = "<img style = 'height:80px;width:80px' src = caminho_onde_salvo_imagem" + file.name + "' />";
/* Retorno o caminho com o nome da imagem para o TinyMCE carregar no corpo do textbox */
tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
}
});
Até mais,
Depois de muito quebrar a cabeça, cheguei a uma solução.
O plugin Uploadfy sofreu algumas atualizações e suas opções foram atualizadas, lendo a documentação do mesmo observei que o comando onComplete não faz mais parte da nova versão do plugin, alterei o mesmo para o novo comando " onUploadSuccess ".
Foi necessário alterar algumas variáveis que estava sendo passadas como parâmetro.
No final meu código ficou:
/* Chamo a biblioteca do TinyMCE */
tinymce.init({
script_url: 'jscripts/tiny_mce/tiny_mce.js',
selector: ".tinymce",
theme: "modern",
menubar: false,
resize: false,
statusbar: false,
automatic_uploads:true,
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css'
]
});
/* Chamando a biblioteca do uploadfy*/
$("[id*=FileUpload1]").uploadify({
'progressData': 'speed',
'swf': '/js/tinymce/uploadify.swf',
'cancelImg': '../img/icones/cancel.png',
'buttonText': 'Anexar Imagem ',
'folder': 'uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true,
'uploader': 'arquivo_que_realiza_o_upload_aqui',
/* Comando onUploadSucess, chama a função que pega o caminho o arquivo, e adicionar a caixa texto do tinyMCE*/
'onUploadSuccess': function (file) {
var img = "<img style = 'height:80px;width:80px' src = caminho_onde_salvo_imagem" + file.name + "' />";
/* Retorno o caminho com o nome da imagem para o TinyMCE carregar no corpo do textbox */
tinyMCE.activeEditor.execCommand("mceInsertContent", true, img);
}
});
Até mais,
GOSTEI 0