html5 - How to implement this code display function?

Question

I want to know how to create such a web page with html js on the left and display on the right?
What is its principle?

I downloaded wp fiddle and found that it cannot be used in my latest version of wordpress. I want to implement it myself.

When submitting the code, a submitTryit() function is triggered. This function is very simple

function submitTryit()
{
var t=document.getElementById("TestCode").value;
t=t.replace(/=/gi,"w3equalsign");
t=t.replace(/script/gi,"w3scrw3ipttag");
document.getElementById("code").value=t;
document.getElementById("tryitform").action="v.asp";
validateForm();
document.getElementById("tryitform").submit();
}
function validateForm()
{
var code=document.getElementById("code").value;
if (code.length>5000)
    {
    document.getElementById("code").value="<h1>Error</h1>";
    }
}

Answer 1

On the left is a form. When writing code, the right side is iframe, and the target of the code form on the left is set to the right iframe just

Answer 2

This page uses iframe, see the picture below

Answer 3

The left p#contenteditable, the right p.html(contenteditable.html())won’t work?