8

Estaba buscando un editor, algo sencillo y me encontré con la siguiente pregunta:

El mismo lo estoy usando adaptando a mi sistema de administración.

Pero existen algunos problemas, entre ellos lo siguiente:

  • En cada tabulación que se proporciona, el código se genera con un div tipo contenedor y los párrafos en br de esta manera:

enter image description here

  • Y, por otra parte, cada vez que se copia y pega algo en el editor, copia el formato desde donde lo haya copiado.

enter image description here

Entonces, ¿Cómo evitar el uso de div como contenedor y, evitar los párrafos en br? En lugar de ellos, que sean reemplazados, solo por p y de manera organizada, por ejemplo:

enter image description here

¿Cómo puedo corregir estos defectos del editor?

Código completo:

$(function() {
  $('#editControls a').click(function(e) {
    switch($(this).data('role')) {
      case 'p':
        document.execCommand('formatBlock', false, $(this).data('role'));
        break;
      //Specific control for the code button.
      case 'code':
        //enable / disable code mode
        codeMode = !codeMode;
        if(codeMode) {
          // ON: show the code in text mode
          htmlDiv.text(htmlDiv.html());
          //
          var editor = $("#editor")
          editor.addClass("black-bg-colr codeMode")
        } else {
          // OFF: reinterpret the code
          htmlDiv.html(htmlDiv.text());
          var editor = $("#editor")
          editor.removeClass("black-bg-colr codeMode")
        }
        break;
      default:
        document.execCommand($(this).data('role'), false, null);
      break;
    }
  });

  //code mode control
  let codeMode = false;
  let htmlDiv = $("#editor");

  //input -> NOT keyup
  htmlDiv.on("input", function(e) {
  //htmlDiv.on("keyup", function(e) {
    $(".editor-preview").val(htmlDiv.html());
    //$("#textarea").html(htmlDiv.html());
    $(".editor-preview").keyup();
    //$(".editor-preview").html(htmlDiv.html());
  });
  //$("#textarea").html(htmlDiv.html());

  $('.editor-preview').keyup(function(){
    //var value = $(this).val();
    var contentAttr = $(this).attr( 'class' );
    if (!codeMode) {
      var value = $(this).val();
      //$( '.' + contentAttr + '' ).html(value);
      $( '.' + contentAttr).html(value);
    } else {
      //$( '.' + contentAttr + '' ).html(htmlDiv.text());
      $( '.' + contentAttr).html(htmlDiv.text());
    }
  });
});
#editControls {
    overflow: auto;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-color: silver;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: .5em 1em .5em 1em;
    background-color: #fbfbfb;
    margin: 0 auto;
    width: 100%; /*90*/
}
#editor {
    resize: vertical;
    overflow: auto;
    border: 1px solid silver;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    min-height: 100px;
    padding: 1em;
    background: white;
    margin: 0 auto;
    width: 100%;/*90*/
}
#editor:focus { 
    outline: none !important;
    box-shadow: inset 0 0 2px silver;
}
.codeMode {
    font-family:Courier New,Source Code Pro Light,Medium,Source Code Pro ExtraLight,Menlo,Consola,Monaco Linux,Consola Regular,Fira Code Regular,DejaVu Sans Mono;
    /*font-family: inherit;*/
    /*font-family: 'Courier New';*/
    border: 0px;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    line-height: inherit;
    vertical-align: baseline;
    box-sizing: inherit;
    color: #fff;
}
.black-bg-colr {
  background-color: #000 !important;
}
.btn-group {
    position: relative;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.btn-group+.btn-group {
    margin-left: 5px;
}
.btn-group a {
    text-decoration: none;
}
.btn-editor {
    height: 30px;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    border: 1px solid transparent;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-group>.btn-editor:first-child {
    margin-left: 0;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px;
}
.btn-group>.btn-editor+.btn-editor {
    margin-left: -1px !important;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-not-space{
    position: relative;
    float: left;
    margin-left: 0 !important;
    border-radius: inherit;
    border: 1px solid transparent;
    border-color: #ccc;
}
.btn-editor.btn-not-space:hover {
    background-color: rgba(230, 230, 230, 0.32);
}
#preview {
    padding: 1em;
    margin: 0 auto;
    width: 97%;
    border-top: 1px dotted #c8ccd0;
    border-bottom: 1px dotted #c8ccd0;
    clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="editor-wrapper">
  <div id="editControls">
    <div class="btn-group">
      <a class="btn-editor btn-not-space" data-role="bold" data-ref="#"><b>Bold</b></a>
      <a class="btn-editor btn-not-space" data-role="italic" data-ref="#"><em>Italic</em></a>
      <a class="btn-editor btn-not-space" data-role="underline" data-ref="#"><u><b>U</b></u></a>
      <a class="btn-editor btn-not-space" data-role="strikeThrough" data-ref="#"><strike>abc</strike></a>
    </div>
    <div class="btn-group">
      <a class="btn-editor btn-not-space" data-role="code" data-ref="#"><code>&lt;/&gt;</code></a>
    </div>
  </div>
  <div id="editor" contenteditable></div>
  <textarea id="textarea" name="detail" class="editor-preview" style="display: none;"></textarea>
  <div id="preview" class="editor-preview"></div>
</div>

4
  • 1
    Advertencia:El uso de execCommand está desaconsejado Commented el 17 feb. 2020 a las 14:47
  • 3
    Está funcionalidad dentro de los navegadores es muy limitada y no mejorará con el tiempo (de hecho, es posible que desaparezca). Aconsejaría usar alguna librería para editar textos enriquecidos. Commented el 17 feb. 2020 a las 14:49
  • Te fijate en TinyMCE? tiny.cloud
    – Juan
    Commented el 17 feb. 2020 a las 23:57
  • @PabloLozano En el caso de esta pregunta, aunque no lo usan para copiar texto al portapapeles, tengo entendido que no hay otra manera de copiar al portapapeles que obligatoriamente usar execCommand. De manera que no es totalmente desaconsejable.
    – user13558
    Commented el 22 feb. 2020 a las 3:06

2 respuestas 2

4

Quizás te pueda interesar CKEditor.

Prueba insertando este código en tu proyecto. No funciona aquí si lo agrego como snippet.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CKEditor</title>
  <script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
</head>
<body>
  <textarea name="editor1"></textarea>
  <script>
    CKEDITOR.replace('editor1');
  </script>
</body>
</html>

Es un editor de texto enriquecido HTML altamente conocido y de uso gratuito (o de pago si deseas mejores características).

introducir la descripción de la imagen aquí

Al activar el botón Fuente HTML tendrás una vista limpia del código...

introducir la descripción de la imagen aquí

Si copias información de otros sitios se verá así...

introducir la descripción de la imagen aquí

Y su respectivo código se verá así...

introducir la descripción de la imagen aquí

2
  • 2
    La mejor opción es usar una librería externa como esta, la opción mencionada por el OP por ahora es experimental y es probable que no sea desarrollada más de lo que está.
    – Vlady
    Commented el 21 feb. 2020 a las 22:00
  • @Lou Este editor ha sido usado intensivamente en Drupal 6 y 7 (No se en otras versiones porque no las uso) y es excelente para el propósito que manifiestas
    – quevedo
    Commented el 22 feb. 2020 a las 4:08
2
+300

Ya se menciono, se recomendó que está funcionalidad dentro de los navegadores es muy limitada y no mejorará con el tiempo (de hecho, es posible que desaparezca), sin embargo pueda que sea como se decía anteriormente de Java, pero aquí la solución:

  • Formatee el código HTML en Code Toggle antes de mostrarlo.
  • Detecta la tecla Enter y aplica el <p> formato; de lo contrario, aplica el mismo formato.
  • En Clipboard Paste, intercepte el comportamiento predeterminado de pegado del portapapeles y luego inserte texto plano en la posición actual del cursor del editor.

$(function () {
    var aceEditor = ace.edit("ace-editor");
    aceEditor.setTheme("ace/theme/eclipse");
    aceEditor.session.setMode("ace/mode/html");

    $('#editControls a').click(function (e) {
        switch ($(this).data('role')) {
            case 'p':
                document.execCommand('formatBlock', false, $(this).data('role'));
                break;
            //Specific control for the code button.
            case 'code':
                //enable / disable code mode
                codeMode = !codeMode;
                if (codeMode) {
                    // ON: show the code in text mode
                    var editor = $("#editor");
                    var $aceEditor = $("#ace-editor");

                    var formattedHtml = html_beautify(htmlDiv.html());

                    aceEditor.setValue(formattedHtml, -1);

                    editor.css("display", "none");
                    $aceEditor.css("display", "block");

                } else {
                    // OFF: reinterpret the code
                    htmlDiv.html(htmlDiv.text().replace(/\r?\n|\r/g, ""));
                    var editor = $("#editor");
                    var $aceEditor = $("#ace-editor");

                    editor.css("display", "block");
                    $aceEditor.css("display", "none");

                    htmlDiv.html(aceEditor.getValue().replace(/\r?\n|\r/g, ""));
                }
                break;
            default:
                document.execCommand($(this).data('role'), false, null);
                break;
        }
    });

    //code mode control
    let codeMode = false;
    let htmlDiv = $("#editor");

    htmlDiv.on("paste", function (e) {
        e.preventDefault();

        var text = (e.originalEvent || e).clipboardData.getData('text/plain');

        document.execCommand('formatBlock', false, 'p');
        document.execCommand('insertText', false, text);
    });

    //input -> NOT keyup
    htmlDiv.on("input", function (e) {
        document.execCommand('formatBlock', false, 'p');
        //htmlDiv.on("keyup", function(e) {
        $(".editor-preview").val(htmlDiv.html());
        //$("#textarea").html(htmlDiv.html());
        $(".editor-preview").keyup();
        //$(".editor-preview").html(htmlDiv.html());
    });
    //$("#textarea").html(htmlDiv.html());

    aceEditor.getSession().on('change', function () {
        $('.editor-preview').html(aceEditor.getValue().replace(/\r?\n|\r/g, ""));
    });

    $('.editor-preview').keyup(function () {
        //var value = $(this).val();
        var contentAttr = $(this).attr('class');
        if (!codeMode) {
            var value = $(this).val();
            //$( '.' + contentAttr + '' ).html(value);
            $('.' + contentAttr).html(value);
        } else {
            //$( '.' + contentAttr + '' ).html(htmlDiv.text());
            $('.' + contentAttr).html(htmlDiv.text());
        }
    });
});
#editControls {
  overflow: auto;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-color: silver;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: .5em 1em .5em 1em;
  background-color: #fbfbfb;
  margin: 0 auto;
  width: 100%;
  /*90*/
}

#editor {
  resize: vertical;
  overflow: auto;
  border: 1px solid silver;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  min-height: 100px;
  padding: 1em;
  background: white;
  margin: 0 auto;
  width: 100%;
  /*90*/
}

#editor:focus {
  outline: none !important;
  box-shadow: inset 0 0 2px silver;
}

.codeMode {
  font-family: Courier New, Source Code Pro Light, Medium, Source Code Pro ExtraLight, Menlo, Consola, Monaco Linux, Consola Regular, Fira Code Regular, DejaVu Sans Mono;
  /*font-family: inherit;*/
  /*font-family: 'Courier New';*/
  border: 0px;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  font-stretch: inherit;
  line-height: inherit;
  vertical-align: baseline;
  box-sizing: inherit;
  color: #fff;
}

.black-bg-colr {
  background-color: #000 !important;
}

.btn-group {
  position: relative;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
  white-space: nowrap;
}

.btn-group+.btn-group {
  margin-left: 5px;
}

.btn-group a {
  text-decoration: none;
}

.btn-editor {
  height: 30px;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 11px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-group>.btn-editor:first-child {
  margin-left: 0;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-left-radius: 4px;
}

.btn-group>.btn-editor+.btn-editor {
  margin-left: -1px !important;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.btn-not-space {
  position: relative;
  float: left;
  margin-left: 0 !important;
  border-radius: inherit;
  border: 1px solid transparent;
  border-color: #ccc;
}

.btn-editor.btn-not-space:hover {
  background-color: rgba(230, 230, 230, 0.32);
}

#preview {
  padding: 1em;
  margin: 0 auto;
  width: 97%;
  border-top: 1px dotted #c8ccd0;
  border-bottom: 1px dotted #c8ccd0;
  clear: both;
}

#ace-editor {
  resize: vertical;
  overflow: auto;
  border: 1px solid silver;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  min-height: 100px;
  padding: 1em;
  margin: 0 auto;
  width: 100%;
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WYSIWYG</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.7/ext-beautify.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.3/beautify-html.min.js"></script>
</head>

<body>
  <div class="editor-wrapper">
    <div id="editControls">
      <div class="btn-group">
        <a class="btn-editor btn-not-space" data-role="bold" data-ref="#"><b>Bold</b></a>
        <a class="btn-editor btn-not-space" data-role="italic" data-ref="#"><em>Italic</em></a>
        <a class="btn-editor btn-not-space" data-role="underline" data-ref="#"><u><b>U</b></u></a>
        <a class="btn-editor btn-not-space" data-role="strikeThrough" data-ref="#"><strike>abc</strike></a>
      </div>
      <div class="btn-group">
        <a class="btn-editor btn-not-space" data-role="code" data-ref="#"><code>&lt;/&gt;</code></a>
      </div>
    </div>
    <div id="editor" contenteditable></div>
    <div id="ace-editor"></div>
    <textarea id="textarea" name="detail" class="editor-preview" style="display: none;"></textarea>
    <div id="preview" class="editor-preview"></div>
  </div>

</body>

</html>

Con el aporte de:

Javascript: ¿Cómo corregir la sangría en una cadena HTML?

1
  • ¿Podrías editar tu respuesta corrigiendo los errores? Cada vez que escribo una letra en el textarea aparece un error, podrías detectarlos con un try catch.
    – user13558
    Commented el 22 feb. 2020 a las 3:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.