none
Estoy con una web de ASP.NET Core 3.1 y no sé como utilizar quilljs como editor porque me parece mejor que el que usaba el del curso RRS feed

  • Pregunta

  • Hola muy buenas a ver ando intentando poner en la página el editor de quilljs aquí os paso el código:

    @model BlogCore.Models.ViewModels.ArticuloVM
    @{
        ViewData["Title"] = "Create";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <br />
    <br />
    <h3 class="text-center">Crear una nuevo artículo</h3>
    <!--enctype"multipart/form-data" muy importante para que nos deje subir el archivo de una imagen por ejemplo-->
    <form method="post" asp-action="Create" enctype="multipart/form-data">
        <div class="row px-2 mx-2 border">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="col-10 offset-1 mt-4">
                <div class="form-group row">
                    <div class="col-4">
                        <label asp-for="Articulo.Nombre"></label>
                    </div>
                    <div class="col-8">
                        <input asp-for="Articulo.Nombre" class="form-control" />
                        <span asp-validation-for="Articulo.Nombre" class="text-danger"></span>
                    </div>
                </div>


                <div class="form-group row">
                    <div class="col-4">
                        <label asp-for="Articulo.Descripcion"></label>
                    </div>
                    <div class="col-8">
                        <!--<textarea id="editor" asp-for="Articulo.Descripcion" class="form-control" style="height: 300px"></textarea>-->
                        <div id="toolbar">

                        </div>
                        <input asp-for="Articulo.Descripcion" name="Description" type="hidden" class="form-control" />
                        <div id="editor" name="editor"></div>
                        <!--<div id="editor" asp-for="Articulo.Descripcion" style="height: 300px"></div>
                        <span asp-validation-for="Articulo.Descripcion" class="text-danger"></span>
                        -->
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-4">
                    <label asp-for="Articulo.CategoriaId"></label>
                </div>
                <div class="col-8">
                    @Html.DropDownListFor(m => m.Articulo.CategoriaId, Model.ListaCategorias,
                   "-Por favor selecciona una categoría-", new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group row">
                <div class="col-4">
                    <label asp-for="Articulo.UrlImagen"></label>
                </div>
                <div class="col-8">
                    <input type="file" name="archivos" id="subidaArchivo" class="form-control" />
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group row">
                    <div class="col-8 offset-4">
                        <partial name="_VistaCrearVolver" />
                    </div>
                </div>
            </div>
        </div>
    </form>
    @section Scripts {
        
        <script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
        <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
        <script>
            var container = document.getElementById('editor');
            var editor = new Quill(container);

            var options = {
                debug: 'info',
                modules: {
                    toolbar: '#toolbar'
                },
                placeholder: 'Compose an epic...',
                readOnly: true,
                theme: 'snow'
            };
            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],

                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction

                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],

                ['clean']                                         // remove formatting button
            ];
        </script>
        <script>
            var editor = new Quill('#editor', options);
            var editor1 = new Quill('#editor', {
                modules: {
                    toolbar: toolbarOptions
                },
                theme: 'snow'
            });
            var divInput = document.querySelector('editor');
            divInput.onsubmit = function () {
                // Populate hidden form on submit
                var description = document.querySelector('input[name=Description]');
                description.value = quill.getContents();
            };
            quill.keyboard.addBinding({ key: Keyboard.keys.BACKSPACE }, {
                collapsed: true,
                format: ['blockquote', 'list'],
                offset: 0
            }, function (range, context) {
                if (context.format.list) {
                    this.quill.format('list', false);
                } else {
                    this.quill.format('blockquote', false);
                }
            });
        </script>
    }
    y en el _layout.cshtml he puesto la linea de css que necesita ¿cómo podria implementar este editor? quilljs gracias.

    domingo, 9 de agosto de 2020 12:05

Todas las respuestas

  • Hola  techcomputerworld,

      

    Gracias por levantar tu consulta en los foros de MSDN. Con respecto a la misma en la documentacion de quilljs ahi viene un ejemplo de como empezar con el mismo te dejo el link. quilljs

    Gracias por usar los foros de MSDN. 

      

    Andres Aguilar 

     ____________________________ 

      

    Por favor recuerde "Marcar como respuesta" las respuestas que hayan resuelto su problema, es una forma común de reconocer a aquellos que han ayudado, y hace que sea más fácil para los otros visitantes encontrar la solución más tarde.

    Si tiene algún cumplido o reclamo sobre el soporte de MSDN sientase en la libertad de contactar  MSDNFSF@microsoft.com. 

    lunes, 10 de agosto de 2020 17:03
  • si lol he probado, pero no me funciona, por eso he probado a preguntar aquí. No me funciona solo poner el texto en el editor de texto, ni borrar ni tampoco poner texto de color ni nada, a parte de que sobre un

    <div id="editor"> </div>

    no es un input y no puedo convertirlo en un campo donde voy a tener un editor o algo asi según ASP.NET Core 3.1 el framework un saludo.


    martes, 11 de agosto de 2020 9:15
  • Hola  techcomputerworld

      

    Gracias por levantar tu consulta en los foros de MSDN. Con respecto a la misma, te comparto el siguiente enlace que contiene un documento con información sobre el caso que reportas usar quill en asp.net

      


    Gracias por usar los foros de MSDN. 

      

    Andres Aguilar 

     ____________________________ 

    martes, 11 de agosto de 2020 18:03