如何将 append html 标记从一个 div 到另一个 div？

Question

Is it possible to append html tags from a content-editable div to another div? I wanted to make an html editor, and I wanted to make automatic preview.

Here is the jsfiddle code: https://jsfiddle.net/eqw8L4to/12/

And here is the js code where I tried getting html tags from.html, and tried appending it to.result:

$(document).ready(function() {
    $(".html").keydown(function(event) {
        var x = event.keyCode
        if (x == 27 && event.ctrlKey) {
            $(".result").html("")
            var y = $(".html").html()
            $(".result").append(y)
        }
    })
})

Answer 1

https://jsfiddle.net/cse_tushar/68na2mrq/8/

Get the text from contenteditable div and replace place in the result HTML

$(document).ready(function() {
  const el = $("div.html");
  const result = $(".result");
  el.keydown(function(event) {
    if (event.keyCode === 27 && event.ctrlKey) {
      result.html(el.text());
    }
  })
})

Answer 2

You're pretty close. Use the .html method to provide the html instead.

Try this snippet and add the following to the test box and you'll see it is working.

<div class='rendered'>blue text</div>

 $(document).ready(function() { $(".html").keydown(function(event) { var x = event.keyCode if (x == 27 && event.ctrlKey) { $(".result").html("") var y = $(".html").text() $(".result").html(y) } }) })

 body{ margin:0; }.html{ color: white; height:50vh; width:100vw; background-color:#1a1a1a; }.result{ height:50vh; width:100vw; background-color:#f5ff5; }.rendered { color: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="html" contenteditable="true"> </div> <div class="result"> </div>

Answer 3

You have to know which element your editor are using, but if div.html is the element that you want to get the text to preview, you just gotta remove double quotes and you'll get the content of element.

Thy this:

$(document).ready(function() {
    $(".html").keydown(function(event) {
        var x = event.keyCode;
        if (x == 27 && event.ctrlKey) {
            $(".result").html();
            var y = $(".html").html();
            $(".result").append(y);
        }
    })
})

Answer 4

Well, as you've mentioned that you need an HTML editor with automatic preview, I tried it by reading the contenteditable div's input as text and then convert it to HTML using object.src = "data:text/html" with a default charset: UTF-8, and show it as the src of an iframe on keyup.

I've read your code, but I am not very well-versed in JQuery...

So, in standard the JavaScript it would be something like this:

const editor = document.querySelector(".editable-div");
const result = document.querySelector("iframe");

editor.addEventListener("keyup", () => {
  var html = editor.textContent;
  iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);

Here's an example snippet:

 const editor = document.querySelector(".editor"); const result = document.querySelector("iframe"); editor.addEventListener("keyup", () => { var html = editor.textContent; result.src = "data:text/html;charset=utf-8," + encodeURI(html); }); /*a paste function just as extra info*/ editor.addEventListener("paste", function(e) { e.preventDefault(); var text = e.clipboardData.getData("text/plain"); document.execCommand("insertText", false, text); });

 /* all CSS is for demo snippet */.editor { background-color: #000; height: 100px; width: 80vw; color: white; font: monospace; overflow-y: auto; white-space: pre; outline: none; }.result { background-color: rgb(255, 255, 255); width: 80vw; height: 100px; overflow-y: scroll; }

 <div class="editor" contenteditable>WriteCode</div> <iframe class="result"></iframe>

Here's an image of it working:

---

Hope I could help.