3

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.

1 Resposta 1

4

Não irei falar muito sobre o TinyMCE, e sim sobre seus problemas e uma forma genérica de resolver.

Primeiro, você possui dois forms na mesma página. Mesmo utilizando Ajax indiretamente, você poderá ter alguns problemas.

Outra coisa, não coloque scripts no meio da View. Você possui uma section somente para ela.

E o seu maior problema. O TinyMCE não está em nenhum form. Em resumo, ao enviar o formulário @using (Html.BeginForm("Create", "Publicacao", FormMethod.Post)) o valor de Conteudo não será enviado.

Bom, agora vamos à solução genérica.

Primeiro, atualize sua View para isso:

<h2>Create</h2>


<input name="file" type="file" id="file">

@using (Html.BeginForm("Create", "Publicacao", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    @Html.TextAreaFor(model => model.Conteudo, new { id = "my_editor", @class = "mceEditor" })

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
}

@section Scripts{
    <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <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>

    <script>
        $('#file').change(function () {
            var formData = new FormData();
            var file = this.files[0];
            console.log(file)
            formData.append('file', file);
            $.ajax({
                url: '@Url.Action("Upload", "Home")',  
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data)
                    tinyMCE.get('my_editor').setContent('dsdsdsds');
                    tinymce.activeEditor.execCommand('mceInsertContent', false, data);
                }
            });
        });
    </script>
}

E seu Controller para isso:

  public string Upload(HttpPostedFileBase file)
    {
        string path;
        string saveloc = "~/Uploads/Imagens";
        string filename = file.FileName;

        if (file != null && file.ContentLength > 0)
        {
            try
            {
                path = Path.Combine(HttpContext.Server.MapPath(saveloc), Path.GetFileName(filename));
                file.SaveAs(path);
            }
            catch (Exception e)
            {
                return "<script>alert('Failed: " + e + "');</script>";
            }
        }
        else
        {
            return "<script>alert('Failed: Unkown Error. This form only accepts valid images.');</script>";
        }

        return @"<img src=/Uploads/Imagens/" + filename + " >";
    }

Note que agora eu estou fazendo o Upload no evento change(). Após isso, eu envio o arquivo para o Controller via Ajax e o retorno eu insiro no TinyMCE, através do tinymce.activeEditor.execCommand('mceInsertContent', false, data);.

Note que o retorno do Controller não é mais um script, e sim uma imagem return @"<img src=/Uploads/Imagens/" + filename + " >";. Fiz desta forma pois se você alterar o WYSIWYG, o código poderá permanecer o mesmo.

Agora, se você deseja adicionar o upload no botão de insert/edit image, a coisa muda um pouco.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .