Integrando o TinyMCE editor html no ASP.NET MVC

.NET

ASP.NET MVC

ASP.NET

NuGet

.NET Framework

30/07/2019

Realizei todo o processo de acordo com o DevCast https://www.devmedia.com.br/integrando-o-tinymce-editor-html-no-asp-net-mvc/32932 porém está me ocorrendo um erro assim que o formulário carrega na página:

Uncaught TypeError: $(...).tinymce is not a function
Stella Oliveira

Stella Oliveira

Curtidas 0

Melhor post

Jothaz

Jothaz

31/07/2019

Nos campos do tipo textarea normalmente tem-se que definir rows e cols, tente:

Html.TextAreaFor(model => model.Descricao, new { @class = "resizer" })
Html.TextAreaFor(model => model.Descricao, 10, 40, null);
Html.TextAreaFor(model => model.Descricao, new { @class = "whatever-class", @cols = 10, @rows = 40 })

GOSTEI 1

Mais Respostas

Jothaz

Jothaz

30/07/2019

Normalmente este tipo erro acontece por não achar a referencia a tinymce ou pode ser até algum conflito com outra biblioteca.

Tente seguir os seguintes passos:

1 - Limpar o cache (CTRL + F5) ou mesmo limpar no browser.
2 - Garantir que tinymce.min.js ou algo assim esteja sendo referenciado.
3 - A melhor ferramenta para verificar o que foi carregado é o "Inspecionar" (CTRL + Shift + I) do próprio browser. Lá você consegue ver a alma da sua página.



GOSTEI 0
Stella Oliveira

Stella Oliveira

30/07/2019

Normalmente este tipo erro acontece por não achar a referencia a tinymce ou pode ser até algum conflito com outra biblioteca.
Tente seguir os seguintes passos:
1 - Limpar o cache (CTRL + F5) ou mesmo limpar no browser.
2 - Garantir que tinymce.min.js ou algo assim esteja sendo referenciado.
3 - A melhor ferramenta para verificar o que foi carregado é o "Inspecionar" (CTRL + Shift + I) do próprio browser. Lá você consegue ver a alma da sua página.



Nenhuma das soluções propostas houve exito.
GOSTEI 0
Jothaz

Jothaz

30/07/2019

Você conseguiu confirmar se a biblioteca do tinymce foi devidamente referenciada e carregada.

Veja pelo debug do browser se carregou, pelo erro apresentado pode ser isto.

Ou post o código, mesmo que sejam parte, pois facilita o auxilio.
GOSTEI 0
Stella Oliveira

Stella Oliveira

30/07/2019

Você conseguiu confirmar se a biblioteca do tinymce foi devidamente referenciada e carregada.

Veja pelo debug do browser se carregou, pelo erro apresentado pode ser isto.

Ou post o código, mesmo que sejam parte, pois facilita o auxilio.


- Conferi sim, estou fazendo de outo método agora, porém agora o meu TextAreaFor não está retornando valores para minha Controller..

Minha model:


 [AllowHtml]
        [Display(Name = "Descrição")]
        [Required(ErrorMessage = "Informe a Descrição", AllowEmptyStrings = false)]
        public string Descricao { get; set; }


Meu formulário na View (Create)


  <div class="form-group">
                    @Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label" })
                    @Html.TextAreaFor(model => model.Descricao, new { @class = "form-control" })
                    @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
                </div>


Quando mudo o "TextAreaFor" para TextBoxFor funciona, o que poderia ser?
GOSTEI 0
Stella Oliveira

Stella Oliveira

30/07/2019

Nos campos do tipo textarea normalmente tem-se que definir rows e cols, tente:

Html.TextAreaFor(model => model.Descricao, new { @class = "resizer" })
Html.TextAreaFor(model => model.Descricao, 10, 40, null);
Html.TextAreaFor(model => model.Descricao, new { @class = "whatever-class", @cols = 10, @rows = 40 })



Infelizmente ainda sem sucesso.
GOSTEI 0
Stella Oliveira

Stella Oliveira

30/07/2019

Nos campos do tipo textarea normalmente tem-se que definir rows e cols, tente:

Html.TextAreaFor(model => model.Descricao, new { @class = "resizer" })
Html.TextAreaFor(model => model.Descricao, 10, 40, null);
Html.TextAreaFor(model => model.Descricao, new { @class = "whatever-class", @cols = 10, @rows = 40 })



Infelizmente ainda sem sucesso.



Acabei de analisar o problema mais a fundo, e percebi que quando ele da um refresh na tela ele aparentemente carrega algo que anteriormente não carregou.. imagina o que pode ser?

Um Jquery da vida sei lá..
GOSTEI 0
Jothaz

Jothaz

30/07/2019

Pelo que me lembre deve-se inicializar e ligar o tinymce com o campo tipo:

<script>

tinymce.init({
selector: "#CAMPO"
});

</script>

Foi feito isto?

Só para termos certeza de que o tinymce esta disponível crie um controle textarea no html sem utilizar o razor e veja se funciona:

<textarea id="campo" name="campo"
          rows="5" cols="33"></textarea>

GOSTEI 0
Jothaz

Jothaz

30/07/2019

Normalmente este tipo de problema é questão de referenciar a bibliotecas, ordem de carregamento ou incompatibilidade entre a versão de algumas bibliotecas ussdas.

Você usa outra bibliotecas jacascritp?

O TyneMCe é simples de usar:

<!DOCTYPE html>
<html>
<head>
  <script src=''https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'' referrerpolicy="origin"></script>
  <script>
  tinymce.init({
    selector: ''#campo''
  });
  </script>
</head>

<body>
<h1>TinyMCE</h1>
  <form method="post">
    <textarea id="campo">Teste do TinyMCE</textarea>
  </form>
</body>
</html>


O exemplo acima é funcional, tente adaptá-lo ao seu contexto.
A principio use os controles do html e depois substitua pelo razor.





GOSTEI 1
Jothaz

Jothaz

30/07/2019

Não sei o porque o código ficou todo zuado, vou postar novamente:

<!DOCTYPE html>
<html>
<head>
  <script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js' referrerpolicy="origin"></script>
  <script>
  tinymce.init({
    selector: '#campo'
  });
  </script>
</head>

<body>
<h1>TinyMCE</h1>
  <form method="post">
    <textarea id="campo">Teste do TinyMCE</textarea>
  </form>
</body>
</html>
GOSTEI 1
Stella Oliveira

Stella Oliveira

30/07/2019

Não sei o porque o código ficou todo zuado, vou postar novamente:

<!DOCTYPE html>
<html>
<head>
  <script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js' referrerpolicy="origin"></script>
  <script>
  tinymce.init({
    selector: '#campo'
  });
  </script>
</head>

<body>
<h1>TinyMCE</h1>
  <form method="post">
    <textarea id="campo">Teste do TinyMCE</textarea>
  </form>
</body>
</html>


Cara, primeiramente agradeço profundamente o help que está me dando rs, mas aqui, o problema não é aparecer mais o bendito do TextArea e escrever no mesmo.

O erro é o seguinte:

Preencho o textarea do form e dou submit no formulario para enviar para a model/controller, o valor está indo null, ai a model retorna pra mim falando que não pode ser null (porque eu coloquei required dentro da model).

Ai preencho novamente o o TextAreaFor vai preenchido.. e tcharam tudo funciona.
Estou começando a achar que alguma coisa não está carregando, e não faço ideia do que..

Olhei até o meu Layout e não consegui identificar o erro.
GOSTEI 0
Jothaz

Jothaz

30/07/2019

Ajuda remota sem acesso ao ambiente é realmente complicado.

Posta o código do controller que recupera o valor do textarea.

O esquema básico seria:

View: 

@model TinyMCE.Controllers.Sua_Classe 
<!DOCTYPE html>  
<html>  
<head>  

    <script src="~/scripts/tinymce/tinymce.min.js"></script>

    <script type="text/javascript">
        tinyMCE.init({
            mode: "textareas"         
        });
    </script>
</head>  
<body>  
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        <div>
            @Html.TextAreaFor(model => model.HtmlContent)
            <input type="submit" value="" />
        </div>
    }
</body>  
</html>


Controller:


[HttpPost]
public ActionResult Index (Sua_Classe model){
	return view()
}
GOSTEI 1
Stella Oliveira

Stella Oliveira

30/07/2019

Ajuda remota sem acesso ao ambiente é realmente complicado.

Posta o código do controller que recupera o valor do textarea.

O esquema básico seria:

View: 

@model TinyMCE.Controllers.Sua_Classe 
<!DOCTYPE html>  
<html>  
<head>  

    <script src="~/scripts/tinymce/tinymce.min.js"></script>

    <script type="text/javascript">
        tinyMCE.init({
            mode: "textareas"         
        });
    </script>
</head>  
<body>  
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        <div>
            @Html.TextAreaFor(model => model.HtmlContent)
            <input type="submit" value="" />
        </div>
    }
</body>  
</html>


Controller:


[HttpPost]
public ActionResult Index (Sua_Classe model){
	return view()
}




Concordo com você , mas acho que o problema não tem haver com a minha Action, nem com a TextArea, o problema está no carregamento do JavaScript vou ter que investigar melhor.

De qualquer forma obrigada pela ajuda !
GOSTEI 0
Stella Oliveira

Stella Oliveira

30/07/2019

Jothaz, FINALMENTE encontrei uma solução..

Na verdade o SUBMIT não estava sendo capaz de enviar o campo "Descrição" no formulário, criei um submit diferente e tudo funcionou, ficou da seguinte forma:



MODEL:

        [AllowHtml]
        [UIHint("tinymce_full")]
        [Display(Name = "Descrição")]
        [DataType(DataType.MultilineText)]
        [Required(ErrorMessage = "Informe a Descrição", AllowEmptyStrings = false)]
        public string Descricao { get; set; }


VIEW:

<div class="form-group">
 @Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label" })
 @Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control input" } })
 @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
</div>


Novo Submit:

<div class="form-group flex justify-center align-center">
    <a class="btn-bmg bg-color-3 color-1" href="javascript:submitForm();">Salvar</a>
</div>


SCRIPT da VIEW:
<script language="Javascript">
        function submitForm() {
            tinyMCE.triggerSave();
            document.forms[0].submit();
        }
    </script>



Cara valeu pelo apoio, foi incrível sua participação !!!

Abraço
GOSTEI 0
Jothaz

Jothaz

30/07/2019

Stella Oliveira de nada, apesar de achar que a ajuda nem foi tão efetiva, mas acontece muito de você conversar com alguém sobre um problema no desenvolvimento e só de conversar você já acaba descobrindo a solução, sem a pessoa inferir.

Hoje em dia no desenvolvimento web temos vários contextos e escopos, pois normalmente usamos: html, css, javascrit, jquery, razor, angular, vue, react e ect, sem falar no back-end.
É uma sopa de letras infernal e tudo tem suas particularidades e muitas das vezes não é possível acompanhar o que acontece, pois de certa forma tudo esta encapsulado.

O conselho que possa dar, somente por vivência é aprender a utilizar a janela debug do borwser (opção inspecionar do menu de contexto). Principalmente do Chrome, pois você ira ver a alma da sua página. Inclusive todas os request e response. Além de ver a interpolação dos dados do seu banck-end com o fornt-end.

Hoje não consigo trabalhar sem ela, principalmente se for utilizar nodesjs.

Boa sorte!
GOSTEI 1
POSTAR