Integrando o TinyMCE editor html no ASP.NET MVC
30/07/2019
0
Stella Oliveira
Post mais votado
31/07/2019
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 })
Jothaz
Mais Posts
30/07/2019
Jothaz
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.
30/07/2019
Stella Oliveira
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.
31/07/2019
Jothaz
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.
31/07/2019
Stella Oliveira
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?
31/07/2019
Stella Oliveira
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.
31/07/2019
Stella Oliveira
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á..
31/07/2019
Jothaz
<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>31/07/2019
Jothaz
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.
31/07/2019
Jothaz
<!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>
31/07/2019
Stella Oliveira
<!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.
31/07/2019
Jothaz
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()
}
31/07/2019
Stella Oliveira
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 !
31/07/2019
Stella Oliveira
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
01/08/2019
Jothaz
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!
Clique aqui para fazer login e interagir na Comunidade :)