What is a promise in Javascript?

Question

Lou

Asked: 2020-02-15 08:22:17 +0800 CST 2020-02-15 08:22:17 +0800 CST 2020-02-15 08:22:17 +0800 CST

How to change editor to paste only text and arrange HTML output?

772

I was looking for an editor, something simple and I came across the following question:

How to view/display and edit HTML code?

I am using the same adapting to my administration system.

But there are some problems , including the following:

In each tab that is provided, the code is generated with a divwrapper type and the paragraphs in brlike this:

And on the other hand, every time you copy and paste something into the editor, it copies the formatting from wherever you copied it.

So, how to avoid the use of divas a container and, avoid the paragraphs in br? Instead of them, let them be replaced, just by pand in an organized way, for example:

How can I fix these editor flaws?

A JSFiddle : https://jsfiddle.net/p87t0aqx/

Full code:

$(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>

2 Answers

Voted

DjCrazy · Answer 1 · 2020-02-19T09:51:03+08:00

DjCrazy

2020-02-19T09:51:03+08:002020-02-19T09:51:03+08:00

You may be interested in CKEditor .

Try inserting this code into your project. It doesn't work here if I add it as a 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>

HTMLIt is a highly popular and free to use (or paid if you want better features) rich text editor .

By activating the HTML Source button you will have a clean view of the code...

If you copy information from other sites it will look like this...

And your respective code will look like this...

4

Publisere.com · Answer 2 · 2020-02-22T13:37:00+08:00

It was already mentioned, it was recommended that this functionality within browsers is very limited and will not improve over time (in fact, it may disappear), however it may be as said before about Java, but here is the solution:

Format the code HTMLin Code Togglebefore displaying it.
Detect the key Enterand apply the <p>format; otherwise, it applies the same format.
In Clipboard Paste, intercept the default clipboard paste behavior and then insert plain text at the current editor cursor position.

$(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>

With input from:

Javascript: How to fix indentation in HTML string?

How to change editor to paste only text and arrange HTML output?

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?