html5 - 이 코드 표시 기능을 구현하는 방법은 무엇입니까?

Question

알고 싶습니다. 왼쪽은 html + js이고, 오른쪽은 어떻게 이런 웹 페이지를 만들 수 있나요?
원리는 무엇인가요?

wp fiddle을 다운로드했는데 최신 버전의 wordpress에서 사용할 수 없는 것을 발견했습니다. 직접 구현하고 싶습니다.

코드를 제출하면 submitTryit() 함수가 실행됩니다. 이 함수는 매우 간단합니다

으아악

Answer 1

왼쪽에는 양식이 있습니다. 코드를 작성하려면 오른쪽의 iframe，左边代码form的target设为右边iframe

Answer 2

이 페이지는 iframe을 사용합니다. 아래 그림을 참조하세요

Answer 3

왼쪽이p#contenteditable，右边p.html(contenteditable.html()) 아닌가요?