Implementanto o TinyMCE
em ASP.NET MVC
encontrei um problema ao realizar upload de imagens.
A forma que estou tentadto implementar é a seguinte:
Tenho uma View
com o Script
que chama um Controller
contendo um método de upload que faz seu trabalho salvando a imagem em meu servidor, como é um método comum e está funcionando perfeitamente, deixei ele no Gist, afim de encurtar um pouco a pergunta. E a minha View
:
@model EuVotoAf.Models.Publicacao
@{
ViewBag.Title = "Create";
}
<script src="~/Scripts/tinymce/tinymce.js"></script>
<h2>Create</h2>
<iframe id="form_target" name="form_target" style="display:none"></iframe>
@using (Html.BeginForm("Upload", "Publicacao", FormMethod.Post, new { @id = "my_form", target = "form_target", enctype = "multipart/form-data", style = "width:0;height:0;overflow:hidden" }))
{
@Html.AntiForgeryToken()
<input name="file" type="file" onchange="$('#my_form').submit();this.value='';">
}
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
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 | ltr rtl",
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
file_browser_callback: function (field_name, url, type, win) {
if (type == 'image') $('#my_form input').click();
}
});
</script>
@Html.TextAreaFor(model => model.Conteudo, new { id = "my_editor", @class = "mceEditor" })
@using (Html.BeginForm("Create", "Publicacao", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
}
O que preciso é basicamente, enviar o texto pra ser salvo no DB
e a imagem pra ser salvo no servidor. Se eu colocar, a linha
@Html.TextAreaFor(model => model.Conteudo, new { id = "my_editor", @class = "mceEditor" })
Dentro do primeiro form
ele não renderiza na tela, se coloco no segundo, os o upload não é feito. Qual, é a forma que eu possa fazer pra que funcione de alguma forma.
Estou fazendo da forma errada?
Está certo, porem contem erros no código ?
Tem uma forma melhor de fazer ?
Caso tenha algum outro detalhe que seja importante que não inseri, posso colocar.