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
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"}})
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.
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
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
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.
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.
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
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.
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
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
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
19 Points
89 Posts
bold, italic and underlined in @Html.EditorFor
Jul 08, 2020 07:59 PM|ecocash|LINK
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
All-Star
52971 Points
23574 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 08, 2020 08:45 PM|mgebhard|LINK
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; }Or
@Html.TextBoxFor(m => m.CatId, null, new { @class = "MyInput" })Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 08, 2020 08:52 PM|ecocash|LINK
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"}})
All-Star
58124 Points
15641 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 08, 2020 09:43 PM|bruce (sqlwork.com)|LINK
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
Contributor
2690 Points
771 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 09, 2020 08:45 AM|YihuiSun|LINK
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
All-Star
20953 Points
4984 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 09, 2020 09:03 AM|asteranup|LINK
you can tryhttps://www.tiny.cloud/docs/demo/full-featured/
Anup Das Gupta
Visit My Blog
You can also connect with me in LinkedIn
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 02:48 PM|ecocash|LINK
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
All-Star
20953 Points
4984 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 02:56 PM|asteranup|LINK
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
Anup Das Gupta
Visit My Blog
You can also connect with me in LinkedIn
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 03:01 PM|ecocash|LINK
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
All-Star
52971 Points
23574 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 03:05 PM|mgebhard|LINK
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.
All-Star
20953 Points
4984 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 03:29 PM|asteranup|LINK
Debug z-index of HTML elements in question with developer tool. Or you deploy and share some URL so that community can see.
Anup Das Gupta
Visit My Blog
You can also connect with me in LinkedIn
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 04:29 PM|ecocash|LINK
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;position:relative; 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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</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;position:relative; 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 + ' <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); //}Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 04:30 PM|ecocash|LINK
I'm using TinyMCE as an editor
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 04:38 PM|ecocash|LINK
follows the link of the video where the error occurs
https://drive.google.com/file/d/1fsQCCsU9AQM3nU_ucKkFomFTlS3fJCp7/view?usp=sharing
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 04:39 PM|ecocash|LINK
Hello Bruce, do you have link with examples using this tinycme tool?
All-Star
52971 Points
23574 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 05:36 PM|mgebhard|LINK
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">×</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
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 05:49 PM|ecocash|LINK
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
All-Star
52971 Points
23574 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 06:14 PM|mgebhard|LINK
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.
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 13, 2020 08:53 PM|ecocash|LINK
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">×</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
Contributor
2690 Points
771 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 16, 2020 01:57 AM|YihuiSun|LINK
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">×</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
Member
19 Points
89 Posts
Re: bold, italic and underlined in @Html.EditorFor
Jul 16, 2020 12:29 PM|ecocash|LINK
Hello YihuiSun, that's exactly what I needed, thanks for the help