html5 - このコード表示機能を実装するにはどうすればよいですか?

Question

左側に html js を使用してこのような Web ページを作成し、右側に表示する方法を知りたいですか?
その原理は何ですか?

wp fiddle をダウンロードしたところ、最新バージョンの wordpress では使用できないことがわかり、自分で実装したいと考えています。

コードを送信すると、submitTryit() 関数がトリガーされます。この関数は非常に単純です

リーリー

Answer 1

左側はフォームです。コードを記述するには、右側の iframe，左边代码form的target设为右边iframe をクリックしてください

Answer 2

このページは iframe を使用しています。下の画像を参照してください

Answer 3

左側p#contenteditable，右边p.html(contenteditable.html())は大丈夫じゃないですか？