locked
bold, italic and underlined in @Html.EditorFor RRS feed

  • Question

  • User-733224187 posted

    Hello,
    How do I insert these functions into input type = "text using asp.net mvc 5 htmlhelper?
    As here on the forum we have these options using the shortcut keys or buttons

    Wednesday, July 8, 2020 7:59 PM

Answers

  • User1686398519 posted

    Hi ecocash,

    Are you using Bootstrap Modal? Because using Bootstrap modal will prevent anything else from gaining focus. You need to add a custom code.

    $('#myModal').on('shown.bs.modal', function () {
       $(document).off('focusin.modal');
    });

    For all your previous needs, please refer to the complete example I gave.

    Modal

        public class TestSample
        {
            public string Title { get; set; }
            [AllowHtml]
            public string Content { get; set; }
        }

    Controller

            public ActionResult Index()
            {
                return View();
            }
            [HttpPost]
            public ActionResult Index(TestSample test)
            {
                return View(test);
            }

    View

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Launch modal
    </button>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    @using (Html.BeginForm())
                    {
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-md-10">
                                    @Html.TextAreaFor(m => m.Content)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-10">
                                    @Html.DisplayTextFor(m => m.Content)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Create" class="btn btn-default" />
                                </div>
                            </div>
                        </div>
                    }
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    @section Scripts {
        <script src="~/Scripts/tinymce/tinymce.min.js"></script>
        <script src="~/Scripts/customizetinymce.js"></script>
        <script>
            $('#myModal').on('shown.bs.modal', function () {
                $(document).off('focusin.modal');
            });
        </script>
    }

    customizetinymce.js

    tinyMCE.init({
        selector: "textarea",
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount',
            'directionality'
        ],
        toolbar: 'bold | italic | underline | forecolor | media | Insert link',
        branding: false,
        statusbar: false,
    });

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 16, 2020 1:57 AM

All replies

  • User475983607 posted

    Use standard CSS.  Keep in mind, the EditorFor helper renders a template and you have not shared the template or even the type.

    .MyInput {
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
    }
    <input id="Text1" type="text" value="Test" class="MyInput"/>

    Or

     @Html.TextBoxFor(m => m.CatId, null, new { @class = "MyInput" })

    Wednesday, July 8, 2020 8:45 PM
  • User-733224187 posted

    Hello mgebhard, in my case my @ Html.EditorFor are the default.
    I wanted to make it the same as the forum message, example when I press Ctrl + B and type the text it will be in bold and when it is sent to the backend keep these features

    follow my @ Html.EditorFor:
    @ Html.EditorFor (model => model.comentario,
    new {htmlAttributes = new {@class = "form-control", @style = "min-height: 150px", id = "comment", name = "comment"}})

    Wednesday, July 8, 2020 8:52 PM
  • User-474980206 posted

    form text input does not support the input of any formatting information. 

    this forum input is a custom javascript component that stores a html string in a textarea. This forum uses TinyMCE

       https://www.tiny.cloud

     

    Wednesday, July 8, 2020 9:43 PM
  • User1686398519 posted

    Hi ecocash,

    You can use jquery and css to make different styles of text in input. It is not difficult to achieve such a requirement by yourself, but more code needs to be written. As bruce(sqlwork.com) said, TinyMCE is a great tool and many other rich text editors also can help you, saving time but has more functions.

    This is an example that can achieve bold, italic and underline styles.

    <div class="form-group">
        @Html.EditorFor(m => m.comment, new { htmlAttributes = new { @class = "form-control", @style = "min-height: 150px", id = "comment", name = "comment" } })
    </div>
    <div class="form-group">
        <button onclick="ToB()" class="btn btn-primary">Blod</button>
        <button onclick="ToI()" class="btn btn-primary">Italic</button>
        <button onclick="ToU()" class="btn btn-primary">Underlined</button>
    </div>
    @section scripts{
        <script type="text/javascript">
            function ToB() {
                if ($('#comment').css("font-weight") == 400) {
                    $('#comment').css({ "font-weight": "bold" });
                }
                else {
                    $('#comment').css({ "font-weight": "normal" });
                }
            }         
            function ToI() {
                if ($('#comment').css("font-style") == "normal") {
                    $('#comment').css({ "font-style": "italic" });
                } else {
                    $('#comment').css({ "font-style": "normal" });
                }
            }
            function ToU() {
                if ($('#comment').css("text-decoration") == "underline solid rgb(85, 85, 85)" || $('#comment').css("text-decoration") == "underline solid rgb(0, 0, 0)") {
                    $('#comment').css({ "text-decoration": "none" });
                } else {
                    $('#comment').css({ "text-decoration": "underline" });
                }
            }
        </script>
        }

    Here is the result.

    Best regards,

    YihuiSun

    Thursday, July 9, 2020 8:45 AM
  • User348806598 posted

    you can tryhttps://www.tiny.cloud/docs/demo/full-featured/

    Thursday, July 9, 2020 9:03 AM
  • User-733224187 posted

    Hello asteranup, I managed using this Tiny, but I need to adjust his css, because I'm using this text editor inside a modal, when I press to insert a link, the link dialog is behind the initial modal

    Monday, July 13, 2020 2:48 PM
  • User348806598 posted

    the link dialog is behind the initial modal

    This happens due to z-index issue. You can check details on how to use z-index-

    https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

    Monday, July 13, 2020 2:56 PM
  • User-733224187 posted

    Do you use this tool? I couldn't get him to pull my css, I managed to put his dialog in front of my modal, however the inputs don't work

    Monday, July 13, 2020 3:01 PM
  • User475983607 posted

    Please do not force the community to guess what mistakes you've made.  Share enough code that the community can run to reproduce this issue or consider debugging your code.  At this point, we have no idea what editor or modal you are using.  Also we have no idea what "inputs don't work" means.

    Monday, July 13, 2020 3:05 PM
  • User348806598 posted

    Debug z-index of HTML elements in question with developer tool. Or you deploy and share some URL so that community can see. 

    Monday, July 13, 2020 3:29 PM
  • User-733224187 posted

    Segue meus códigos

    @model mia.Models.Chamado
    
    @{
        ViewBag.Title = "Detalhes do Chamado";
        Layout = "~/Views/Shared/_Layout.cshtml";
        var db = new mia.Models.ApplicationDbContext();
        var usuario = db.Usuarios.Where(u => u.UsuarioNome == User.Identity.Name).FirstOrDefault();
        var usuario_criador = db.Usuarios.Find(Model.usuariocriacao);
        var usuario_responsavel = db.Usuarios.Find(Model.usuarioresponsavel);
        var usuario_logado = db.Usuarios.Where(u => u.UsuarioNome == User.Identity.Name).FirstOrDefault();
        List<mia.Models.ChamadoComentario> timeline = ViewBag.Timeline;
        var status = db.ChamadoStatus.ToList();
        var tarefas = Model.tarefas.ToList();
        tarefas = tarefas.OrderByDescending(t => t.id).ToList();
        var possui_permissao_especial_editar_comentarios_outras_pessoas = false;
        var contatos = db.MailingContatoes.Where(c => c.id_cliente == Model.cliente.id_cliente).ToList();
    
        var template_nome = ViewBag.TemplateNome;
        var template_campos = ViewBag.TemplateCampos;
    
        var eventos = ViewBag.Eventos;
    }
    
    @if (ViewBag.ReturnError == true)
    {
        <script type="text/javascript">
            @Html.Raw(ViewBag.SweetAlertShowMessage)
        </script>
    }
    
    @if (usuario_logado != null)
    {
        var perfil = db.Perfils.Find(usuario_logado.PerfilId);
    
        if (perfil != null)
        {
            var permissao_especial_id = db.Menus.Where(m => m.Action.Equals("PerEsp-EditarComentarioAdmin")).FirstOrDefault().Id;
    
            if (permissao_especial_id > 0)
            {
                if (perfil.MenusId.Where(m => m.Id == permissao_especial_id).FirstOrDefault() != null)
                {
                    possui_permissao_especial_editar_comentarios_outras_pessoas = true;
                }
                else
                {
                    possui_permissao_especial_editar_comentarios_outras_pessoas = false;
                }
            }
        }
    }
    
    
    <input type="text" id="id_chamado" value="@Model.id" hidden />
    
    <input type="text" id="view_local" value="Details" hidden />
    
    <div id="view" style="padding:20px; display:none; margin-top: -30px">
        <section id="header">
            <div class="row">
                <div class="col-11 padding_zero_left">
                    <h4>
                        <b>Chamado  @Model.id</b> (aberto em @Model.dataabertura.ToShortDateString())
                        @if (Model.arquivado)
                        {
                            <span> | </span><span class="badge badge-pill badge-secondary">arquivado</span>
                        }
                        <spam> | </spam>
                        <strong><spam style="font-size:14px;">Cliente: </strong><spam style="font-size:14px;">@Model.cliente.nome <span class="cnpj-busca-cliente">@Model.cliente.cpf_cnpj</span></spam>
                    </h4>
                    @if (Model.solicitante != null)
                    {
                        <h6>
                            <span><strong>Solicitante:</strong> @Model.solicitante.nome (@Model.solicitante.cargo) | <strong>Telefone: </strong>@Model.solicitante.telefone | <strong>E-mail: </strong>@Model.solicitante.email</span>
                        </h6>
                    }
                    <h6>
                        <b>Registrado por:</b> @usuario_criador.Nome <span> | </span>
    
                        @if (usuario_responsavel != null)
                        {
                            <span><b>Responsável: </b>@usuario_responsavel.Nome (<a style="cursor:pointer" onclick="openAddConsultor(event)">editar</a>)</span>
                        }
                        else
                        {
                            <span><b>Responsável: </b>Nenhum (<a style="cursor:pointer" onclick="openAddConsultor(event)">incluir</a>)</span>
    
                        }
                        <span> | </span>
                        <span><strong>Status:</strong> @Model.status.descricao</span>
                        (<a style="cursor:pointer" onclick="openAddStatus(event)">editar</a>)
                    </h6>
                </div>
                <div class="col-1">
                    <i data-feather="share-2" style="cursor:pointer; float:right" onclick="openAddCompartilharLink(@Model.id)" title="Compartilhar Chamado"></i>
                </div>
            </div>
    
            <div class="row">
                <div class="col padding_zero_left">
                    <button class="btn btn-sm btn-primary" onclick="novoComentario(@Model.id,'Novo');">Novo Comentário</button>
                    <button class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#nova-tarefa-modal">Nova Tarefa</button>
                    <button class="btn btn-sm btn-outline-primary" onclick="window.location.href='/Chamados/Edit/@Model.id'">Editar Chamado</button>
                    @if (Model.status.descricao.Equals("Finalizado"))
                    {
                        <button class="btn btn-sm btn-outline-secondary" onclick="alteraArquivado(@Model.id)">Arquivar/Reabrir</button>
                    }
    
                    @if (template_nome != "")
                    {
                        <button class="btn btn-sm btn-outline-success pulsate" onclick="abreModalTemplate()">Ver Template</button>
                    }
                </div>
            </div>
        </section>
    
        <hr />
    
        <div class="row">
            <div class="col padding_zero_left padding_zero_right">
                <div class="jumbotron" style="padding-top:10px; padding-bottom:1px; margin-bottom:10px;">
                    <h6><strong>Título: </strong>@Model.titulo</h6>
                </div>
            </div>
        </div>
    
        <div class="jumbotron" style="padding-top:10px; padding-bottom:10px">
            <div class="row">
                <div class="col-12 padding_zero_left">
                    <span id="hide_not_minhas_tarefas"><i data-feather="circle" onclick="hideTarefasAlheias()" style="margin-top:-3px;"></i> Ver somente minhas tarefas</span>
                    <span id="show_not_minhas_tarefas" style="display:none;" onclick="showTarefasAlheias()"><i data-feather="check-circle" style="margin-top:-3px;"></i> Ver somente minhas tarefas</span>
                </div>
            </div>
            <hr />
            @foreach (var item in eventos)
            {
                //Definindo a classe para esconder/mostrar minhas tarefas
                var type = item.Key.GetType();
                var minha_tarefa = "not_minha_tarefa";
                if (type.Name.Contains("Tarefa"))
                {
                    var tarefa = item.Key as mia.Models.Tarefa;
                    minha_tarefa = tarefa.usuario.UsuarioId == usuario.UsuarioId ? "minha_tarefa" : "not_minha_tarefa";
                }
    
                <div class="row @minha_tarefa">
                    @{
                        if (type.Name.Contains("Tarefa"))
                        {
                            var tarefa = item.Key as mia.Models.Tarefa;
                            var usuariodecriacao = db.Usuarios.Where(u => u.UsuarioId == tarefa.id_usuario_criacao).FirstOrDefault();
                            var id_usuario_tarefa = tarefa.usuario.UsuarioId;
    
                            <div class="col-8 padding_zero_left">
                                @if (tarefa.status)
                                {
                                    <span><i data-feather="calendar"></i> <strong>@tarefa.descricao</strong> <span style="font-size:12px">(@tarefa.data_hora) - <span class="badge badge-pill badge-success">concluído</span></span></span>
                                }
                                else
                                {
                                    if (tarefa.data_hora > DateTime.Now)
                                    {
                                        <span><i data-feather="calendar"></i> <strong>@tarefa.descricao</strong> <span style="font-size:12px">(@tarefa.data_hora) - <span class="badge badge-pill badge-warning">pendente</span></span></span>
                                    }
                                    else
                                    {
                                        <span><i data-feather="calendar"></i> <strong>@tarefa.descricao</strong> <span style="font-size:12px">(@tarefa.data_hora) - <span class="badge badge-pill badge-danger">atrasado</span></span></span>
                                    }
                                }
    
                            </div>
                            <div class="col-4 padding_zero_right">
    
                                @{
                                    var descricao = tarefa.descricao;
                                    var data = tarefa.data_hora.ToShortDateString();
                                    var hora = tarefa.data_hora.ToShortTimeString();
    
                                    if (usuario == usuariodecriacao || usuario.UsuarioId == tarefa.usuario.UsuarioId || possui_permissao_especial_editar_comentarios_outras_pessoas)
                                    {
                                        <span style="float:right; cursor:pointer" title="editar"><i id="edit_tarefa_@tarefa.id" data-feather="edit-2" onclick="openEditaTarefa(this.id, '@descricao', '@data', '@hora', 'edita','@id_usuario_tarefa');"></i></span>
                                    }
                                }
    
                                @if (usuario.UsuarioId == tarefa.usuario.UsuarioId)
                                {
                                    if (tarefa.status)
                                    {
                                        <span style="float:right; cursor:pointer" title="clique para reabrir"><i id="uncheck_@tarefa.id" data-feather="check-circle" style="margin-right:20px;" onclick="changeStatusTarefa(this.id)"></i></span>
                                    }
                                    else
                                    {
                                        <span style="float:right; cursor:pointer" title="clique para baixar"><i id="uncheck_@tarefa.id" data-feather="circle" style="margin-right:20px;" onclick="changeStatusTarefa(this.id)"></i></span>
                                    }
                                }
                            </div>
                            <br />
                            <div class="row">
                                <div class="col-12 padding_zero_left">
                                    @{
    
                                        if (usuario.UsuarioId == tarefa.usuario.UsuarioId && usuario.UsuarioId == tarefa.id_usuario_criacao)
                                        {
                                            <span style="font-size:12px"> @tarefa.usuario.Nome</span>
                                        }
                                        else if (tarefa.usuario.UsuarioId == tarefa.id_usuario_criacao)
                                        {
                                            <span style="font-size:12px"> @tarefa.usuario.Nome</span>
                                        }
                                        else if (tarefa.usuario.UsuarioId != tarefa.id_usuario_criacao)
                                        {
                                            <span style="font-size:12px">
                                                @usuariodecriacao.Nome
                                            </span>
    
                                            <span style="font-size:12px">
                                                <i data-feather="arrow-right"></i>   @tarefa.usuario.Nome
                                            </span>
                                        }
                                    }
                                </div>
                            </div>
                        }
                        else
                        {
                            var estagio = item.Key as mia.Models.ChamadoComentario;
                            var usuario_comentario = db.Usuarios.Where(u => u.UsuarioId == estagio.usuarioresponsavel).FirstOrDefault();
                            var anexos = db.Anexos.Where(a => a.chamado_fk.id == estagio.FK_chamado.id && a.chamadocomentario_fk.id == estagio.id).ToList();
    
                            <div class="col-8 padding_zero_left">
                                <span><i data-feather="flag"></i> <strong>@estagio.origem_comentario</strong> <span style="font-size:12px">(@estagio.data)</span></span>
                            </div>
                            <div class="col-4 padding_zero_right">
                                @if (usuario == usuario_comentario || possui_permissao_especial_editar_comentarios_outras_pessoas)
                                {
                                    <span style="float:right; cursor:pointer" title="editar"><i id="ocorrencia_@estagio.id" onclick="editComentario(@estagio.id,'Editar');" data-feather="edit-2"></i></span>
                                }
                            </div>
                            <br />
                            <br />
                            <div class="col-11 padding_zero_left" id="comentario_container_@estagio.id">
                                <p id="p_comentario_@estagio.id" style=" white-space: pre-line;">@Html.Raw(estagio.descricao)</p>
                            </div>
                            <br />
                            <div class="row">
                                @if (estagio.Anexo != null)
                                {
                                    <p width="50px">
                                        @{
                                            var base64 = Convert.ToBase64String(estagio.Anexo);
    
                                            if (estagio.AnexoContentType.Contains("/png") || estagio.AnexoContentType.Contains("/jpg") || estagio.AnexoContentType.Contains("/jpeg")
                                                || estagio.AnexoContentType.Contains("/PNG") || estagio.AnexoContentType.Contains("/JPG") || estagio.AnexoContentType.Contains("/JPEG"))
                                            {
                                                var imgSrc = String.Format("data:{0};base64,{1}", estagio.AnexoContentType, base64);
                                                <img class="img-fluid" src='@imgSrc' style="cursor:pointer;; width:80%;" onclick="OpenAnexo(this)" data-toggle="modal" data-target=".modalComprovante" />
                                            }
                                            else
                                            {
                                                if (estagio.AnexoContentType.Contains("/ogg") || estagio.AnexoContentType.Contains("/mpeg3") || estagio.AnexoContentType.Contains("/x-mpeg3"))
                                                {
                                                    var audioSrc = String.Format("data:{0};base64,{1}", item.AnexoContentType, base64);
                                                    <audio controls>
                                                        <source src="@audioSrc" type="@estagio.AnexoContentType">
                                                    </audio>
                                                }
                                                else
                                                {
    
                                                    var tipoarquivo = estagio.AnexoFileName.Split('.')[1];
    
                                                    <a href='@Url.Action("DownloadAnexo", "Chamados", new { id = estagio.id, anexo_id = 0 })' title="Visualizar Anexo" class="btn btn-outline-primary btn-sm " , target="_blank">
                                                        <i class="fa fa-paperclip fa"> @tipoarquivo.ToUpper()</i>
                                                    </a>
                                                }
                                            }
                                        }
                                    </p>
                                }
                            </div>
                            if (anexos.Count() > 0)
                            {
                                <div class="col-12 padding_zero_left">
                                    <p width="50px">
                                        <button class="btn btn-outline-primary btn-sm" onclick="OpenMultiAnexos(@estagio.FK_chamado.id, @estagio.id)" data-toggle="modal" data-target=".Anexos-view-modal">Anexos: @anexos.Count()</button>
                                    </p>
                                </div>
                            }
                            <br />
                            <div class="col-12 padding_zero_left">
                                @if (estagio.usuarioresponsavel != 0)
                                {
                                    <span style="font-size:12px">@usuario_comentario.Nome</span>
    
                                }
                                else
                                {
                                    <span style="font-size:12px">Esta anotação não possui responsável</span>
                                }
                            </div>
                        }
                    }
                </div>
    
                <hr class="@minha_tarefa" />
            }
        </div>
    
        <a id="to-begin" class="to-begin" title="ir para início">
            <i data-feather="arrow-down" class="my-float"></i>
        </a>
    
        <!--Nova Tarefa Modal-->
        <div class="modal fade" id="nova-tarefa-modal" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content" style="box-shadow: 0 0 1em black; border:solid 1px">
                    <div class="modal-header">
                        <h5 class="modal-title" id="TituloModalCentralizado">Nova Tarefa</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="partinal_container" class="modal-body">
    
                        <label class="col-form-label">Tarefa</label>
                        <input id="descricao_tarefa" type="text" name="name" value="" class="form-control" />
    
                        <div class="row">
    
                            <div class="btn-group-sm" role="group" aria-label="Basic example" style="display:block; width:100%">
                                <input type="button" class="btn btn-outline-primary btn-block" onclick="setDescricaoTarefa(this.value);" value="Ligar para o cliente" />
                                <input type="button" class="btn btn-outline-primary btn-block" onclick="setDescricaoTarefa(this.value);" value="Visitar o cliente" />
                            </div>
    
                        </div>
    
                        <div class="row">
                            <div class="col" style="padding:0px;">
                                <label class="col-form-label">Data Agendamento</label>
                                <input type="date" name="data_tarefa" id="data_tarefa" class="form-control" />
                            </div>
                        </div>
    
                        <div class="row">
    
                            <div class="btn-group-sm" role="group" aria-label="Basic example" style="display:block; width:100%">
                                <input type="button" class="btn btn-outline-primary" style="width:32%; margin:0px" value="Hoje" onclick="setDataTarefa(this.value);" />
                                <input type="button" class="btn btn-outline-primary" style="width:33%; margin:0px" value="Amanhã" onclick="setDataTarefa(this.value);" />
                                <input type="button" class="btn btn-outline-primary" style="width:33%; margin:0px" value="Daqui 1 mês" onclick="setDataTarefa(this.value);" />
                            </div>
    
                        </div>
                        <div class="row">
                            <div class="col" style="padding:0px;">
                                <label class="col-form-label">Hora Agendamento</label>
                                <input id="hora_tarefa" type="datetime" name="name" value="" class="form-control time" />
    
                            </div>
                        </div>
    
                        <div class="row">
    
                            <div class="btn-group-sm" role="group" aria-label="Basic example" style="display:block; width:100%">
                                <input type="button" class="btn btn-outline-primary" style="width:24%; margin:0px" value="09:00" onclick="setHoraTarefa(this.value)" />
                                <input type="button" class="btn btn-outline-primary" style="width:24%; margin:0px" value="13:00" onclick="setHoraTarefa(this.value)" />
                                <input type="button" class="btn btn-outline-primary" style="width:24%; margin:0px" value="15:00" onclick="setHoraTarefa(this.value)" />
                                <input type="button" class="btn btn-outline-primary" style="width:25%; margin:0px" value="17:00" onclick="setHoraTarefa(this.value)" />
                            </div>
    
                        </div>
                        <br />
                        <div class="row" d="atribuir_colaborador_label" style="margin-top:10px;">
                            <div class="col-4" style="margin-left:0; padding-left:0px">
                                <span>Atribuir para mim</span>
                            </div>
                            <div class="col-5">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="radio_atribuir_sim" onclick="addColaboradorTarefaFunction()" value="option1" checked style="transform: scale(2);">
                                    <h6 class="form-check-label" for="inlineRadio1">Sim</h6>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="radio_atribuir_nao" onclick="addColaboradorTarefaFunction()" value="option2" style="transform: scale(2);">
                                    <h6 class="form-check-label" for="inlineRadio2">Não</h6>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row" id="hidelistacolaborador" style="display:none">
                            <select id="add_colaborador_tarefa" class="form-control" data-val="true" name="addcolaboradortarefa">
                                <option value="0">[Selecione...]</option>
                                @foreach (var item in ViewBag.Colaboradores)
                                {
                                    <option value="@item.UsuarioId">@item.NomeCompleto</option>
                                }
                            </select>
                        </div>
    
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button id="btn_salva_tarefa" type="button" class="btn btn-primary" onclick="salvaTarefa();">Salvar</button>
                    </div>
                </div>
            </div>
        </div>
    
        @* Modal Novo Comentário *@
        <div id="novo-comentario-modal"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 id="titulo_comentario_modal" class="modal-title">Novo Comentário</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="conteiner_comentario">
    
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="btn_salvar_anotacao" onclick="createAnotacao();">Salvar</button>
                        <button type="button" class="btn btn-secondary " data-dismiss="modal">Fechar</button>
                    </div>
                </div>
            </div>
        </div>
    
        @* Modal para exibir o anexo em tela *@
        <div class="modal fade modalComprovante" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Anexo Comentário</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div>
                            <center><img id="AnexoImg" src="" style="  max-width:450px;" /></center>
                        </div>
                    </div>
    
                </div>
            </div>
        </div>
    
        <!--AddConsutlorResponsavel  Modal-->
        <div class="modal fade" id="AddConsutlorResponsavel" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content" style="box-shadow: 0 0 1em black; border:solid 1px">
                    <div class="modal-header">
                        <h5 class="modal-title" id="TituloModalCentralizado">Selecione o Técino Responsável</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="partinal_container" class="modal-body">
    
                        <div class="row">
                            <select id="consultor" class="form-control" data-val="true" name="consultor">
                                <option value="0">[Selecione...]</option>
                                @foreach (var item in ViewBag.usuarioresponsavel)
                                {
                                    <option value="@item.UsuarioId">@item.NomeCompleto</option>
                                }
                            </select>
                        </div>
                        <div class="row">
                            <label class="col-form-label">Justificativa</label>
                            <textarea id="justificativaconsultor" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button type="button" class="btn btn-primary" id="btn_salvar_consultor" onclick="AddConsultor()">Salvar</button>
                    </div>
                </div>
            </div>
        </div>
    
        <!--AddCompartilharLink  Modal-->
        <div class="modal fade" id="AddCompartilharLink" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content" style="box-shadow: 0 0 1em black; border:solid 1px; width:800px">
                    <div class="modal-header">
                        <h5 class="modal-title" id="TituloModalCentralizado">Compartilhar Chamado</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="partinal_container" class="modal-body">
    
                        <div class="row">
                            <input type="text" id="linktxt" readonly style="width:100%" />
                        </div>
    
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="CopyMessage()">Copiar Link</button>
                    </div>
                </div>
            </div>
        </div>
    
        <!--AlterarStatus  Modal-->
        <div class="modal fade" id="AlterarStatus" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content" style="box-shadow: 0 0 1em black; border:solid 1px">
                    <div class="modal-header">
                        <h5 class="modal-title" id="TituloModalCentralizado">Selecione o Status do Chamado</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="partinal_container" class="modal-body">
    
                        <div class="row">
    
                            <select id="altstatus" class="form-control" data-val="true" name="altstatus">
                                @foreach (var item2 in status)
                                {
                                    <option value="@item2.id">@item2.descricao</option>
                                }
                            </select>
                        </div>
                        <div class="row">
                            <label class="col-form-label">Comentário</label>
                            <textarea id="justificativaStatus" class="form-control"></textarea>
                        </div>
                        <br />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        <button type="button" class="btn btn-primary" id="btn_salvar_status" onclick="SalvarStatus()">Salvar</button>
                    </div>
                </div>
            </div>
        </div>
    
        @*Template Modal*@
        <div class="modal fade" id="TemplateModal" tabindex="-1" role="dialog" aria-labelledby="TemplateModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document" style="width:650px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="TituloModalCentralizado">Campos do Template</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="campos-container" class="container" style="padding:20px; border: solid #ff6a00 2px; border-radius:10px; margin-bottom:5px">
    
                        </div>
                    </div>
    
                    <br />
    
                    <div class="col-2">
                        <button id="salvar-template" class="btn btn-outline-primary" onclick="camposTemplateToJson()">Salvar</button>
                    </div>
    
                    <br />
                </div>
            </div>
        </div>
    
        @* Modal Abrir Anexos *@
        <div id="Anexos-view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Lista de Anexos</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body" id="conteiner_anexos">
    
                        </div>
                    </div>
                </div>
            </div>
            <br />
        </div>
    
        @section Scripts
    {
            <script src="~/Scripts/mia.chamados/configuracao.js" type="text/javascript"></script>
            <script src="~/Scripts/mia.chamados/comentarios.js" type="text/javascript"></script>
            <script src="~/Scripts/mia.chamados/tarefas.js"></script>
            <script src="~/Scripts/mia.marcadores/marcadores.js"></script>
            <script src="~/Scripts/Trumbowyng/trumbowyg.min.js"></script>
            <script type="text/javascript" src="~/Scripts/TabletoJson/jquery.tabletojson.js"></script>
            <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
            <script src="~/Content/sweetalert/"></script>
    
           
    
            @* Script para mostrar e esconder minhas tarefas *@
            <script>
                function hideTarefasAlheias() {
                    $('.not_minha_tarefa').hide("fast");
                    $('#hide_not_minhas_tarefas').hide();
                    $('#show_not_minhas_tarefas').show();
                }
    
                function showTarefasAlheias() {
                    $('.not_minha_tarefa').show("fast");
                    $('#hide_not_minhas_tarefas').show();
                    $('#show_not_minhas_tarefas').hide();
                }
            </script>
    
            @* Script para transformar os campos do template em json *@
            <script>
            function camposTemplateToJson() {
    
                let campos = [];
    
                $('.campo-template').each(function () {
    
                    if ($(this).hasClass('money')) {
    
                        //Formatando o campo moeda para melhor se enquadrar no sql server
                        $(this).val($(this).val().replace('.', ''));
                        $(this).val($(this).val().replace('.', ''));
                        $(this).val($(this).val().replace('.', ''));
                        $(this).val($(this).val().replace(',','.'));
    
                    }
    
                    var campo = { campo: $(this).attr('nomecampo'), valor: $(this).val(), template: $(this).attr('template')};
    
                    campos.push(campo);
                });
    
                let json_template_campos = JSON.stringify(campos);
    
                $.ajax({
                    url: '@Url.Action("UpdateTemplate", "Chamados")',
                    data: {
                        json_campos: json_template_campos,
                        chamado_id: '@Model.id',
                    },
                    success: function (data) {
    
                        if (data.mensagem.includes("sucesso")) {
                            Swal.fire({
                                title: 'Pronto!',
                                text: data.mensagem,
                                icon: 'success',
                            }).then((result) => {
                                location.reload();
                            })
                        }
                        else {
                            Swal.fire({
                                title: 'Ops...',
                                text: data.mensagem,
                                icon: 'error',
                            }).then((result) => {
                            })
                        }
    
    
                    },
                    type: 'POST',
                });
            }
            </script>
    
            @* Script para abrir modal de template *@
            <script>
            function abreModalTemplate() {
    
                $.ajax({
                    url: '@Url.Action("_PartialCamposTemplate", "Chamados")',
                    data: {
                        nome_template: '@template_nome',
                        chamado_id: '@Model.id'
                    },
                    type: 'POST',
                    success: function (data) {
                        $('#campos-container').html(data);
                        $('#TemplateModal').modal('toggle');
                    }
                });
            }
            </script>
    
            @* Script para exibir/retrair mais informacoes *@
            <script>
                function showMaisInformacoes() {
    
                    if ($('#mais-informacoes').css('display') == 'none') {
                        $('#mais-informacoes').show('fast');
                        $('#text-mais-informacoes').html('<i id="icon-mais-informacoes" class="fa fa-angle-up" style="margin-right:15px"></i>Menos Informações');
                    } else {
                        $('#mais-informacoes').hide('fast');
                        $('#text-mais-informacoes').html('<i id="icon-mais-informacoes" class="fa fa-angle-down" style="margin-right:15px"></i>Mais Informações');
                    }
                }
            </script>
    
            @* Script para abrir a tarefa primária do projeto *@
            <script>
            $(document).ready(function () {
                $('#view').css('display', 'block');
                $('#main_div_ever').addClass('container-fluid').removeClass('container');
    
                if ('@ViewBag.CriaTarefaPrimaria' == 'True') {
    
                    Swal.fire({
                        title: 'Devo abrir uma tarefa?',
                        text: 'Devo abrir uma tarefa para o responsável pelo chamado?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        cancelButtonText: 'Não',
                        confirmButtonText: 'Sim'
                    }).then((result) => {
    
                        if (result.value) {
    
                            let chamado_id = '@Model.id';
                            let responsavel_id = '@Model.usuarioresponsavel';
    
                            $.ajax({
                                url: '@Url.Action("CriaTarefaPrimaria", "Chamados")',
                                data: {
                                    chamado_id: chamado_id,
                                    responsavel_id: responsavel_id
                                },
                                type: 'POST',
                                success: function (data) {
                                    window.location.href = "/Chamados/Details/" + chamado_id;
                                }
                            });
    
                        }
                    })
    
                }
            });
            </script>
    
            @* Script para abrir imagem no modal *@
            <script>
    
                function OpenAnexo(imgPath) {
    
                    var path = $(imgPath).attr('src');
    
                    $("#AnexoImg").attr('src', path);
    
                    $("#AnexoImg").click(function () {
    
                        $("#AnexoImg").modal("show");
    
                    });
                }
    
            </script>
    
            @*script para abril o model de anexos*@
            <script>
                function OpenMultiAnexos(id, comentario_id) {
                    let view = "Modal";
                    $.ajax({
    
                        url: '/Chamados/_PartialMultiAnexos',
                        data: {
                            chamado_id: id,
                            comentario_id: comentario_id,
                            view: view
                        },
                        type: 'GET',
                        success: function (data) {
    
                            $("#conteiner_anexos").html(data);
    
                            $('#Anexos-view-modal').modal('toggle');
                        }
                    });
                }
            </script>
    
    
            <script>
                function ExcluirAnexos(id, id_comentetario) {
                    $.ajax({
    
                        url: '/Chamados/ExcluirAnexo',
                        data: {
                            anexo_id: id,
                        },
                        type: 'GET',
                        success: function (data) {
    
                            refreshLocal(@Model.id,id_comentetario);
                        }
                    });
                }
    
                function refreshLocal(chamado_id,id_comentetario) {
                    VerAnexos(chamado_id,id_comentetario);
                }
    
    
                function VerAnexos(id, comentario_id) {
    
    
                        $('#list_anexos').html("<div class='text-center col'><div class='spinner-border' role ='status'><span class='sr-only'>Loading...</span></div></div>");
    
                        $.ajax({
    
                            url: '/Chamados/_PartialMultiAnexos',
                            data: {
                                chamado_id: id,
                                comentario_id: comentario_id,
                            },
                            type: 'GET',
                            success: function (data) {
    
                                $("#list_anexos").html(data);
    
    
                            }
                        });
    
    
                }
    
                function NovosAnexos() {
    
                    $("#list_anexos").hide();
                    $('#anexopost').val('').show();
                }
            </script>
        }
    

    Partial_view

    @{
        var db = new mia.Models.ApplicationDbContext();
    
        var anexos = TempData["Anexos"] as List<mia.Models.Anexos>;
    }
    
    <div class="container" style="border:solid 1px #ff6a00; max-width:600px; padding:10px; border-radius:5px">
        <form id="frm" enctype="multipart/form-data">
    
            @if (ViewBag.Comando == "Editar")
            {
                <input type="text" id="id_chamado_comentario" value="@ViewBag.id_comentario" hidden />
                <input type="text" id="excluir_anexo_name" value="" hidden />
                <input type="text" id="excluir_anexo_type" value="" hidden />
            }
            else
            {
                <input type="text" id="id_chamado" value="@ViewBag.id_chamado" hidden />
    
            }
            <label class="col-form-label">Título</label>
            <input id="titulo_anotacao" type="text" class="form-control" value="@ViewBag.Titulo" />
    
            <label class="col-form-label">Anotação</label>
            <textarea id="anotacao">@ViewBag.Anotacao</textarea>
            <br />
    
            @if (ViewBag.Comando == "Editar")
            {
    
                if (ViewBag.Anexo != null)
                {
                    <p id="viewanexo" width="50px" height="80px">
                        @{
                            var base64 = Convert.ToBase64String(ViewBag.Anexo);
    
    
    
                            if (ViewBag.AnexoType.Contains("/png") || ViewBag.AnexoType.Contains("/jpg") || ViewBag.AnexoType.Contains("/jpeg"))
                            {
                                var imgSrc = String.Format("data:{0};base64,{1}", ViewBag.AnexoType, base64);
                                <img class="img-fluid" src='@imgSrc' style="cursor:pointer;; width:80%;" onclick="OpenAnexo(this)" data-toggle="modal" data-target=".modalComprovante" />
                            }
                            else
                            {
                                var tipoarquivo = ViewBag.AnexoName.Split('.')[1];
    
                                <a href='@Url.Action("DownloadAnexo", "Chamados", new { id = ViewBag.id })' title="Visualizar Anexo" class="btn btn-outline-primary btn-sm " , target="_blank">
                                    <i class="fa fa-paperclip fa-2x"> @tipoarquivo.ToUpper()</i>
                                </a>
                            }
    
                        }
                        <button id="BtnExcluir" class="btn btn-sm btn-outline-danger" type="button" onclick="ExcluirAnexo()"><span class="fa fa fa-trash"></span></button>
                    </p>
    
                    <input type="file" id="anexopost" name="anexopost" multiple class="form-control" style="display:none" onchange="ValidateFile(this)">
                    <button id="BtnLimpar" class="btn btn-sm btn-outline-danger" style="display:none" type="button" onclick="LimparAnexo()"><span class="fa fa-times-circle"></span></button>
                }
                else if (anexos.Count() > 0)
                {
                    <div id="list_anexos" style="border:solid 1px #ff6a00; max-width:600px; padding:10px; border-radius:5px">
    
                    </div>
    
                    <input type="file" id="anexopost" name="anexopost" multiple class="form-control" style="display:none" onchange="ValidateFile(this)">
                    <button id="BtnLimpar" class="btn btn-sm btn-outline-danger" style="display:none" type="button" onclick="LimparAnexo()"><span class="fa fa-times-circle"></span></button>
                }
                else
                {
                    <input type="file" id="anexopost" name="anexopost" multiple class="form-control" onchange="ValidateFile(this)">
                    <button id="BtnLimpar" class="btn btn-sm btn-outline-danger" style="display:none" type="button" onclick="LimparAnexo()"><span class="fa fa-times-circle"></span></button>
                }
            }
            @if (ViewBag.Comando == "Novo")
            {
                <input type="file" id="anexopost" name="anexopost" multiple class="form-control" onchange="ValidateFile(this)">
                <button id="BtnLimpar" class="btn btn-sm btn-outline-danger" style="display:none" type="button" onclick="LimparAnexo()"><span class="fa fa-times-circle"></span></button>
            }
    
        </form>
    </div>
    
    
    
    <script src="~/Scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
    <script src="~/Scripts/tinymce/langs/pt_BR.js" type="text/javascript"></script>
    <link href="~/Scripts/tinymce/skins/ui/oxide/skin.css">
    <link href="~/Scripts/tinymce/skins/ui/oxide/content.css">
    
    <script>
    
            $(document).ready(function ()
            {
                //Javascript para inserir o layout de html no texto
                tinyMCE.init({
                    selector: "#anotacao",
                    height: 200,
                    menubar: false,
                    plugins: 'link, media',
                    toolbar: 'bold | italic | underline | forecolor | media | Insert link',
                    language: 'pt_BR',
                    branding: false,
                    statusbar: false,
    
                });
    
                VerAnexos(@ViewBag.fk_chamado, @ViewBag.id_comentario)
    
            });
    
    
    </script>
    
    <style>
        .tox-tinymce-aux {
    
            z-index: 999999999999999999;
        }
    
      
    </style>
    
    

    script

    function ltrim(str) {
        if (!str) return str;
        return str.replace(/^\s+/g, '');
    }
    
    
    //Validador de arquivos no Anexo
    let validExt = ['image/png', 'image/jpeg', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'text/css', 'text/csv', 'application/msword', 'audio/ogg', 'video/ogg', 'application/pdf', 'audio/wave', 'audio/wav', 'audio/x-wav', 'audio/x-pn-wav',
        'audio/mpeg3', 'audio/x-mpeg-3', 'application/plain', 'application/excel', 'application/x-excel', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        'text/plain', 'application/x-rar-compressed', 'application/octet-stream', 'application/zip', 'application/octet-stream', 'application/x-zip-compressed', 'multipart/x-zip']
    
    function ValidateFile(file) {
    
        var extension = file.files[0].type;
        
        if (validExt.indexOf(extension) == -1) {
    
            Swal.fire({
                title: 'Arquivo Invalido',
                text: "O Anexo só permite os seguintes tipos jpg, jpeg, png, docx, xlsx, word, xls, csv, pdf, mp3, ogg, txt, zip",
                icon: 'error',
            })
    
            $("#BtnLimpar").addClass('col-1').show();
            $("#anexopost").addClass('col-11').prop("disabled", true);
            $('#btn_salvar_anotacao').prop("disabled", true);
            $('#btn_editar_chamado').prop("disabled", true);
            $('#btn_novo_chamado').prop("disabled", true);
    
        }
       
    }
    
    //Botão para limpar anexos errados
    function LimparAnexo() {
       
        $('#btn_salvar_anotacao').prop("disabled", false);
        $('#btn_editar_chamado').prop("disabled", false);
        $('#btn_novo_chamado').prop("disabled", false);
        $('#anexopost').val('').show().addClass('col-12').prop("disabled", false);
    
        $('#BtnLimpar').hide();
    };
    
    //Botão para excluir anexo no editar
    function ExcluirAnexo() {
    
        $('#viewanexo').hide();
        $('#anexopost').val('').show().addClass('col-12');
        $('#excluir_anexo_name').val('excluir');
        $('#excluir_anexo_type').val('excluir');
    
        $('#BtnExcluir').hide();
    };
    
    
    
    
    //criar anotação com arquivos, nesse item é obrigatório usar o form na tela e formData
    function createAnotacao() {
    
        var type_action = $('#btn_salvar_anotacao').text();
        $('#btn_salvar_anotacao').prop("disabled", true);
         //Adicionar loading no botão
        $('#btn_salvar_anotacao').html(
            '<span id="loading_anotacao" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
        );
    
       
    
        if (type_action == 'Salvar') {
    
            tinyMCE.triggerSave();  
            var formData = new FormData();
    
            var files = $('#anexopost').get(0).files;
    
            for (let i = 0; i < files.length; i++) {
                formData.append("anotacao_anexo", files[i])
            }
    
            formData.append("titulo_anotacao", $('#titulo_anotacao').val());
            formData.append("anotacao_texto", $('#anotacao').val());
            formData.append("chamados", $('#id_chamado').val());
           
    
            $.ajax({
                url: '/Chamados/CreateAnotacao',
                type: 'POST',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
    
                    location.reload();
                },
                error: function (data) {
                    $('#btn_salvar_anotacao').prop("disabled", false).text("Salvar");
                    $('#loading_anotacao').remove();
                    swal({ title: 'Ops!', text: 'Houve um erro ao tentar salvar o contéudo. Por favor, contate minha equipe de suporte.', icon: 'error', timer: 10000, button: 'OK!' });
                }
            });
        }
        else {
                var formData = new FormData();
    
                var files = $('#anexopost').get(0).files;
    
                for (let i = 0; i < files.length; i++) {
                    formData.append("anotacao_anexo", files[i])
                }
    
                formData.append("titulo_anotacao", $('#titulo_anotacao').val());
                formData.append("anotacao_texto", $('#anotacao').val());
                formData.append("chamadoscomentario", $('#id_chamado_comentario').val());
                formData.append("excluiranexoname", $('#excluir_anexo_name').val());
                formData.append("excluiranexotype", $('#excluir_anexo_type').val());
               
    
                $.ajax({
                    url: '/Chamados/EditaComentario',
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (response) {
    
                        location.reload();
                    },
                    error: function (data) {
                        $('#btn_salvar_anotacao').prop("disabled", false).text("Salvar");
                        $('#loading_anotacao').remove();
                        swal({ title: 'Ops!', text: 'Houve um erro ao tentar salvar o contéudo. Por favor, contate minha equipe de suporte.', icon: 'error', timer: 10000, button: 'OK!' });
                    }
                });
        }
    
    }
    
    //Abrir modal comentario
    function novoComentario(id, novo) {
        $('#btn_salvar_anotacao').text("Salvar");
        $('#titulo_comentario_modal').text("Novo Comentário");
        $.ajax({
    
            url: '/Chamados/_PartialComentarios',
            data: {
                id: id,
                comando: novo
            },
            type: 'GET',
            success: function (data) {
    
                $("#conteiner_comentario").html(data);
    
                $('#novo-comentario-modal').modal('toggle');
            }
        });
    }
    
    function editComentario(id, editar) {
        $('#btn_salvar_anotacao').text("Editar");
        $('#titulo_comentario_modal').text("Editar Comentário");
        $.ajax({
    
            url: '/Chamados/_PartialComentarios',
            data: {
                id: id,
                comando: editar
            },
            type: 'GET',
            success: function (data) {
               
                $("#conteiner_comentario").html(data);
                $("#titulo_anotacao").prop("disabled", true);
                $('#novo-comentario-modal').modal('toggle');
            }
        });
    }
    
    //Seleciona multiplos anexos
    
    function validateData() {
        if ($('[type="checkbox"]').is(':checked')) {
    
            return true;
        }
        else if ($('[type="checkbox"]').not(':checked')) {
    
    
            Swal.fire({
                title: "Ops!",
                text: "Selecione pelo menos um anexo",
                icon: 'error',
            })
    
            return false;
        }
        else {
    
            return false;
        }
    }
    
    //Futuro desenvolvimento de DropZone anexo
    //var dropZoneId = "drop-zone";
    //var buttonId = "clickHere";
    //var mouseOverClass = "mouse-over";
    //var dropZone = $("#" + dropZoneId);
    //var inputFile = dropZone.find("input");
    //var finalFiles = [];
    
    //$(function ativarDrop() {
    
    
    //    var ooleft = dropZone.offset().left;
    //    var ooright = dropZone.outerWidth() + ooleft;
    //    var ootop = dropZone.offset().top;
    //    var oobottom = dropZone.outerHeight() + ootop;
    
    //    document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
    //        e.preventDefault();
    //        e.stopPropagation();
    //        dropZone.addClass(mouseOverClass);
    //        var x = e.pageX;
    //        var y = e.pageY;
    
    //        if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
    //            inputFile.offset({
    //                top: y - 15,
    //                left: x - 100
    //            });
    //        } else {
    //            inputFile.offset({
    //                top: -400,
    //                left: -400
    //            });
    //        }
    
    //    }, true);
    
    //    if (buttonId != "") {
    //        var clickZone = $("#" + buttonId);
    
    //        var oleft = clickZone.offset().left;
    //        var oright = clickZone.outerWidth() + oleft;
    //        var otop = clickZone.offset().top;
    //        var obottom = clickZone.outerHeight() + otop;
    
    //        $("#" + buttonId).mousemove(function (e) {
    //            var x = e.pageX;
    //            var y = e.pageY;
    //            if (!(x < oleft || x > oright || y < otop || y > obottom)) {
    //                inputFile.offset({
    //                    top: y - 15,
    //                    left: x - 100
    //                });
    //            } else {
    //                inputFile.offset({
    //                    top: -400,
    //                    left: -400
    //                });
    //            }
    //        });
    //    }
    
    //    document.getElementById(dropZoneId).addEventListener("drop", function (e) {
    //        $("#" + dropZoneId).removeClass(mouseOverClass);
    //    }, true);
    
    
    //    inputFile.on('change', function (e) {
    //        finalFiles = [];
    //        $('#filename').html("");
    //        var fileNum = this.files.length,
    //            initial = 0,
    //            counter = 0;
    
    //        var formData = new FormData();
    
    //        var files = inputFile.get(0).files;
    
    //        for (let i = 0; i < files.length; i++) {
    //            formData.append("anotacao_anexo", files[i])
    //        }
    
    //        $.ajax({
    //            url: '/Chamados/createpach',
    //            type: 'POST',
    //            data: formData,
    //            cache: false,
    //            contentType: false,
    //            processData: false,
    //            success: function (response) {
    
    //                location.reload();
    //            },
    //            error: function (data) {
    //                $('#btn_salvar_anotacao').prop("disabled", false).text("Salvar");
    //                $('#loading_anotacao').remove();
    //                swal({ title: 'Ops!', text: 'Houve um erro ao tentar salvar o contéudo. Por favor, contate minha equipe de suporte.', icon: 'error', timer: 10000, button: 'OK!' });
    //            }
    //        });
    
    //        $.each(this.files, function (idx, elm) {
    //            finalFiles.push(elm);
    //        });
    
    //        for (initial; initial < fileNum; initial++) {
    //            counter = counter + 1;
    //            $('#filename').append('<div id="anexopost_' + initial + '"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + '&nbsp;&nbsp;<span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
    //        }
    //    });
    
    
    
    //})
    
    //function removeLine(obj) {
    
        
       
    
    //    var jqObj = $(obj);
    //    var container = jqObj.closest('div');
    //    var index = container.attr("id").split('_')[1];
    
       
    
    //    container.remove();
    
    //    finalFiles.indexOf(index);
    //    if (index > -1) {
    //        finalFiles.splice(index, 1);
    //    }
    
    
    //    $('#anexopost').push(finalFiles.get(0).files);
       
    
    
    //    //console.log(finalFiles);
    //}

    Monday, July 13, 2020 4:29 PM
  • User-733224187 posted

    I'm using TinyMCE as an editor

    Monday, July 13, 2020 4:30 PM
  • User-733224187 posted

    follows the link of the video where the error occurs

    https://drive.google.com/file/d/1fsQCCsU9AQM3nU_ucKkFomFTlS3fJCp7/view?usp=sharing

    Monday, July 13, 2020 4:38 PM
  • User-733224187 posted

    Hello Bruce, do you have link with examples using this tinycme tool?

    Monday, July 13, 2020 4:39 PM
  • User475983607 posted

    Rather than dumping all your code on the forum, take the time to write sample code that the community can run and accurately reproduce the issue.   There is no logical reason to have so much code to test a modal and TinyMCE.  It indicates you are not debugging your code.  Anyway, I created a sample and cannot reproduce your results.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post">
                    <div class="modal-body">
                        <textarea id="mytextarea" name="tinyMce">Hello, World!</textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Save changes" />
                    </div>
                </form>
    
            </div>
        </div>
    </div>
    
    
    @section scripts
    {
        <script>
            tinymce.init({
                selector: '#mytextarea'
            });
        </script>
    }
        public class GeneralController : Controller
        {
            // GET: General
            [HttpGet]
            public ActionResult Index()
            {
                return View();
            }
    
            [HttpPost]
            public ActionResult Index(string tinyMce)
            {
                return Ok(tinyMce);
            }
    
        }

    Sample results

    <p><em><strong>Hello, World!</strong></em></p>

    Monday, July 13, 2020 5:36 PM
  • User-733224187 posted

    Hello mgebhard, as you can see in the video I posted the error is in the dialog of the tinymce plugin, when I insert the z-index to stay on my main modal I can't insert the links, since the rest of inserting rich text is working perfectly and I put the entire code in because it was a modification of a software in production,
    and I started using tinymce due to the indication of bruce and asteranup

    Monday, July 13, 2020 5:49 PM
  • User475983607 posted

    ecocash

    Hello mgebhard, as you can see in the video I posted the error is in the dialog of the tinymce plugin, when I insert the z-index to stay on my main modal I can't insert the links, since the rest of inserting rich text is working perfectly and I put the entire code in because it was a modification of a software in production,
    and I started using tinymce due to the indication of bruce and asteranup

    The first step in debugging is reproducing the problem.  The next step is isolating the problem.  If you notice there's no z-index in my example code.  I'm not sure why you needed to go in this direction.   If you want help from the community then it is up to you provide a code sample the community can run which reproduces the issue.  It is not the community's responsibility to guess how to build the code to reproduce this issue. Sharing a video only shows the unwanted results.  Feel free to modify my code above. 

    By the way, I added link to my example code and I can see the dialog for inserting a link.  Perhaps spend a bit more time troubleshooting your code.

    Monday, July 13, 2020 6:14 PM
  • User-733224187 posted

    Hi mgebhard, first I apologize if we are having difficulties in our comminution,
    as they are not very English, I am Brazilian, but now let's go, as in the video I am using a toolbar, I am not having any difficulties post it back-end because this is working correctly, I had to use the z-
    index in the modal of inserting link and media of tinymce itself, because if I don't insert it it is behind my modal "Novo Comentario".

    However, I don't know if you noticed when I open the modal of an additional media, which in this case is a tinymce plugin, it doesn't allow me to insert a video link.

    By the way, I'm using the standard Asp.Net (I don't know if that's how you name it outside Brazil) and not Core

    Follow your example using the toolbar

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post">
                    <div class="modal-body">
                        <textarea id="anotacao" >Hello, World!</textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <input type="submit" class="btn btn-primary" value="Save changes" />
                    </div>
                </form>
    
            </div>
        </div>
    </div>
    
    
    @section scripts
    {
        <script src="~/Scripts/tinymce/tinymce.min.js" type="text/javascript"></script>
    
        <script >
            $(document).ready(function ()
            {
            //Javascript para inserir o layout de html no texto
            tinyMCE.init({
            selector: "#anotacao",
            height: 200,
            menubar: false,
                plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount',
                    'directionality'
                ],
            toolbar: 'bold | italic | underline | forecolor | media | Insert link',
          
            branding: false,
            statusbar: false,
    
            });
    
    
            });
        </script>
    }

    the controller is the same as you are using, One more piece of information I downloaded his nuget in NuGet's Package Manager and it's in the latest version.

    Thanks for the help of bruce and asteranup, because I was lost in this subject and had never heard of TinyMCE, if one of you know examples of the usual TinyMCE or have a link showing how I can customize it would be of great help

    Monday, July 13, 2020 8:53 PM
  • User1686398519 posted

    Hi ecocash,

    Are you using Bootstrap Modal? Because using Bootstrap modal will prevent anything else from gaining focus. You need to add a custom code.

    $('#myModal').on('shown.bs.modal', function () {
       $(document).off('focusin.modal');
    });

    For all your previous needs, please refer to the complete example I gave.

    Modal

        public class TestSample
        {
            public string Title { get; set; }
            [AllowHtml]
            public string Content { get; set; }
        }

    Controller

            public ActionResult Index()
            {
                return View();
            }
            [HttpPost]
            public ActionResult Index(TestSample test)
            {
                return View(test);
            }

    View

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Launch modal
    </button>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body">
                    @using (Html.BeginForm())
                    {
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="col-md-10">
                                    @Html.TextAreaFor(m => m.Content)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-10">
                                    @Html.DisplayTextFor(m => m.Content)
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <input type="submit" value="Create" class="btn btn-default" />
                                </div>
                            </div>
                        </div>
                    }
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    @section Scripts {
        <script src="~/Scripts/tinymce/tinymce.min.js"></script>
        <script src="~/Scripts/customizetinymce.js"></script>
        <script>
            $('#myModal').on('shown.bs.modal', function () {
                $(document).off('focusin.modal');
            });
        </script>
    }

    customizetinymce.js

    tinyMCE.init({
        selector: "textarea",
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount',
            'directionality'
        ],
        toolbar: 'bold | italic | underline | forecolor | media | Insert link',
        branding: false,
        statusbar: false,
    });

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 16, 2020 1:57 AM
  • User-733224187 posted

    Hello YihuiSun, that's exactly what I needed, thanks for the help

    Thursday, July 16, 2020 12:29 PM