Escolha uma Página
(Last Updated On: 10/01/2021)

Usando editor HTML no Core MVC, com Bootstrap e Summernote

por | dez 27, 2020 | Desenvolvimento de Aplicações | 0 Comentários

De todas as tentativas que já fiz, o uso do Summernote dentro do Core MVC é a solução mais simples para editar HTML em views, A solução é leve, funciona muito bem e é compatível com Bootstrap 4.

Para que eu uso o Editor de HTML

O editor é muito útil para mim para:

  • Montar páginas de Ajuda (help) para diversos pontos do meu sistema;
  • Guardar Mensagens padronizadas do sistema, para envio por e-mail.

A manutenção fica estremamaente simplificada.

O meu arquivo tem uma estrutura muito simples: identidade (id), assunto e mensagem.

Coloque na pasta Models:

Arquivo AjudasMensagens.cs na pasta Models.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace PoupaTempoDigital.Models
{
    public class AjudasMensagens
    {
        [Key]
        [Display(Name = "Id da Ajuda/Mensagem")]
        public int IdAjudaMensagem { get; set; }

        [Display(Name = "Assunto da Ajuda/Mensagem")]
        [MaxLength(200)]
        public string Assunto { get; set; }

        [Display(Name = "Corpo da Ajuda/Mensagem")]

        public string TextoAjudamensagem { get; set; }

    }
}

Dê Buidl/Rebuild Solution pelo menu superior.

Vá na pasta controller com o botão direito do mouse escolha Add->Add New Scafolded Item.

Escolha a opção MVC Controller with Views, using Entity Framework. Clicks ADD.

Escolha o modelo e o contexto, deixe ticadas as opçõesde layout.

Clicks em ADD para criar o arquivo controlador AjudasMensagensController.cs e as vies de Edicação, na pasta VIEWS/AjudasMensagens (index (listagem), create, update e delete (todas .cshtml).

Para gerar a tabela no seu banco de dados, na janela PM digite:

add-gration AjudasMensagens

update-database

Instalando o Summernote

Baixando o cógido fonte

Obtenha o último Summernote LESS e o código-fonte Javascript baixando-o diretamente do GitHub.  Coloque os arquivos debaixo da sua pasta WWW. Abra d pasta summernote e copie os arquivos que estão na pasta src do GitHub (contém icons, js and styles, ou seja, css).

O que o Summernote tem de bom?

O Summernote tem diversos recursos especiais:

  • Colar imagens diretamente da área de transferência
  • Salvar imagens diretamente no conteúdo do campo, usando codificação base64, para que você não precise implementar o manuseio de imagens em todas as interfaces de usuário
  • User Interface (UI) simples
  • Edição interativa WYSIWYG 
  • Integração facilitada com o servidor
  • Suporta Bootstrap 3 Bootstrap 4
  • Muitos plug-ins e conectores fornecidos juntos

Instalação e Dependências

 O Summernote depende do JQUERY. Os arquivos CSS e JS tem que ser instados depois dos arquivos de jquery e depois do bootstrap entre <HEAD> e </HEAD>. Requer HTML5 e, no caso Brasil, no arquivo Views?shared/_layout,cshtml, você tem que ter:

Cabecalho do Arquivo _layout.cshtm na pasta Views/Shared

<!DOCTYPE html>
<html lang="pt-BR">
...
</html>

O seu código no arquivo _layout.cshtml vai ficar algo parecido com isso (a sequência é muito importante):

Links do Cabecalho do Arquivo _layout.cshtm na pasta Views/Shared

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

Ou ainda, se não for CDN

Links do Cabecalho do Arquivo _layout.cshtm na pasta Views/Shared

<!-- include libraries(jQuery, bootstrap) -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.js"></script>

No meu caso, eu uso Bootstrap 4 – e não 3,. Não tente usar CDN no começo. Baixe o ZIP direto do site em https://summernote.org/getting-started/ e installe tudo no diretrório www/summernote.  (a vers]ao atual é o.82). Outra coisa: o exemplo do site esta ERRADO. pois no arquivo _layout.cshtml  o arquivo JQUERY fica no rodapé. Então, o arquivo js do summernote tem que ficar no RODAPE. Meu cabeçaho HTML ficou assim:

Links do Cabecalho do Arquivo _layout.cshtm na pasta Views/Shared

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - PoupaTempo Digital do Empreendedor MEI</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
    <link href="~/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />

    <!-- include summernote css/js -->
    <link href="~/summernote/summernote-bs4.css" rel="stylesheet" />
    

    <!-- Syncfusion Essential JS 2 Styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />

    <!-- Syncfusion Essential JS 2 Scripts -->
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
    <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />

    <link rel="stylesheet" href="~/css/site.css" />
</head>

Links do rodape do Arquivo _layout.cshtm na pasta Views/Shared

 </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/js/inputmask/jquery.inputmask.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/font-awesome/js/all.js"></script>

    <!-- include summernote css/js -->

    <script src="~/summernote/summernote-bs4.js"></script>


    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
    <!-- Syncfusion Essential JS 2 ScriptManager -->
    <ejs-scripts></ejs-scripts>
</body>
</html>

Inserindo o Editor de textos HTML

O Summernote pode ser usado com ou sem um formulário. Para usar sem um formulário, sugerimos usar um div no corpo; este elemento será então usado onde você deseja que o editor Summernote seja renderizado em sua página.

<div id = “summernote”> Olá Summernote </div>

Para usar com um formulário, é praticamente o mesmo que acima, mas em vez de usas uma div, recomendamos o uso de um elemento textarea dentro do formulário,

O textarea deve incluir um atributo de nome (ID) para que, quando o formulário for enviado, você possa usar esse nome para processar o dados dos editores em seu back-end.

Além disso, se estiver usando Summernote dentro de um formulário para definir o atributo method = “post” para permitir que o conteúdo do editor de tamanho maior analise para o back-end, se você não fizer isso, seus dados podem não ser analisados ou serão truncados.

<form method = “post”>

<textarea id = “summernote” name = “editordata”> </textarea>

</form>

Nota: se sua aplicação tiver mais que uma área de texto por view, pode usar summernote1, summernote2… etc. como IDs.

Rodando o Summernote

Quem roda o Summernote é o JQuery, quando o documento está pronto:

Quem roda o Summernote!

$(document).ready(function() {
  $('#summernote').summernote();
});

Para ter essa funcionalidade disponível em qualquer View, coloco este códico javasvript no final do arquivo _layout.cshtml.

Inclusive já preparando para páginas que possam ter até 3 visualizações do Summernote, o arquivo de _layout.cshtml é o que renderiza todas as páginas de visualização.

Os parâmetros de altura mínima e a altura parecem não funcionar mais, pois a versão em Bootstrap ficou esperta: abre a altura mínima e vai crescendo a altura à medida que o conteúdo vai crescendo. Bem inteligente.

A tradução em português, pt-BR, funciona bem nesta versão – e deve ser incluida depois do arquivo summernote.js., fo rodapé dapágina _layout.cshtml.

Final da pagina _layout.cshtml , em Views/Shared

....
</body>
</html>
<script>
$(document).ready(function () {


    if (typeof $("#Editar") !== "undefined") {
        $('#summernote').summernote({
            lang: 'pt-BR', // default: 'en-US'
            dialogsInBody: true,
            height: 600,                 // set editor height
            minHeight: 400,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: true                 // set focus to editable area after initializing summernote
          
        });
        console.log(document.title); // para ver se está rodando direitinho
    }
});

$(document).ready(function () {
    if (typeof $("#Editar") !== "undefined") {
        console.log(document.title);
        $('#summernote2').summernote({
            lang: 'pt-BR', // default: 'en-US'
            dialogsInBody: true,
            height: 600,                 // set editor height
            minHeight: 400,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: true                 // set focus to editable area after initializing summernote
        });
    }
});


$(document).ready(function () {
    if (typeof $("#Editar") !== "undefined") {
        console.log(document.title);
        $('#summernote3').summernote({
            lang: 'pt-BR', // default: 'en-US'
            dialogsInBody: true,
            height: 600,                 // set editor height
            minHeight: 400,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: true                // set focus to editable area after initializing summernote
        });
    }
});
</script>

Sequencia de inclusao de arquivos na pagina _layout.cshtml , em Views/Shared

<footer class="border-top footer text-muted">
        <div class="container">
            © 2021 - PoupaTempo Digital do Empreendedor MEI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Política de Privacidade</a> | <a asp-area="" asp-controller="Home" asp-action="TermosDeUso">Termos de Uso</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/js/inputmask/jquery.inputmask.js"></script>
   
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/font-awesome/js/all.js"></script>

    <!-- include summernote css/js -->
    <script src="~/summernote/summernote-bs4.js"></script>

    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
    <!-- Syncfusion Essential JS 2 ScriptManager -->
    <ejs-scripts></ejs-scripts>

    <!-- include pt-BR js ATENCAO!!!!! -->
    <script src="~/summernote/lang/summernote-pt-BR.min.js"></script>
</body>
</html>
<script>
....
</script>

Em todas as páginas que quero usar o Summernote acrescento uma “div” em vazio, logo no topo da página.

Para usar em toda e qualquer pagina de edicao ou de criacao que vai usar o Summernote

<div id="Editar" title="sim"></div>

Exemplo de página, no caso, de criação, no diretório Views/AjudasMensagens. Não exquece de trocar INPUT por TEXTAREA e colocar id=”summernote”

Aquivo Create.cshtml em Views/AjudasMensagens

@model PoupaTempoDigital.Models.AjudasMensagens

@{
    ViewData["Title"] = "Create";
}
<div id="Editar" title="sim"></div>
<h1>Create</h1>

<h4>AjudasMensagens</h4>
<hr />
<div class="row">
    <div class="col-md-8">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Assunto" class="control-label"></label>
                <input asp-for="Assunto" class="form-control" />
                <span asp-validation-for="Assunto" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="TextoAjudamensagem" class="control-label"></label>
                @*<input asp-for="TextoAjudamensagem" class="form-control" />*@
                <textarea asp-for="TextoAjudamensagem" id="summernote" rows="20 "class="form-control"></textarea>
                <span asp-validation-for="TextoAjudamensagem" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Referências:

  1. Summernote

Obrigado pela sua leitura. Continue visitando este blog e compartilhe artigos em sua rede de relacionamento. Por favor, se quiser, registre sugestões e comentários aqui no final da página.