使用Javascript的实时Html编辑器_Javascript_Html_Editor_Real Time

使用Javascript的实时Html编辑器

javascript html editor

使用Javascript的实时Html编辑器,javascript,html,editor,real-time,Javascript,Html,Editor,Real Time,下面是我试图构建实时html编辑器的代码。在javascript中，我从id=pure的textarea获取文本，然后在document.body.onkeyup函数中，我将值传递给id=compiled的textarea。它根本不起作用。我想知道问题是关于openwritelnclose还是其他语法 function compile() { var h = document.getElementById("pure"); var compiled = document.get

下面是我试图构建实时html编辑器的代码。在javascript中，我从id=pure的textarea获取文本，然后在document.body.onkeyup函数中，我将值传递给id=compiled的textarea。它根本不起作用。我想知道问题是关于openwritelnclose还是其他语法

function compile() {

    var h = document.getElementById("pure");
    var compiled = document.getElementById("compiled").contentWindow.document;

     document.body.onkeyup = function(){
        compiled.open();
        compiled.writeln(h.value);
        compiled.close();
      };
    }

compile();




<div class="form-group">
  <label for="html">Write your HTML here:</label>
  <textarea class="form-control" rows="3" id="pure"></textarea><br>
    <textarea class="form-control" rows="2" id="compiled"></textarea>
</div>

函数编译（）{
var h=document.getElementById（“纯”）；
var compiled=document.getElementById（“compiled”）.contentWindow.document；
document.body.onkeyup=函数（）{
compiled.open（）；
编译后的.写的n（h.值）；
compiled.close（）；
};
}
编译（）；
在此处编写您的HTML：


在输入框中输入一些内容：
姓名：

查看代码后，无法100%确定您的代码是什么

但是，如果您的所有内容都是文本区域，那么您可以放置HTML标记，然后查看预览。下面是一个例子

var h=document.getElementById（“纯”）；
var compiled=document.getElementById（“compiled”）；
h、 onkeyup=函数（）{
compiled.innerHTML=h.value；
pure.classList.toggle（“错误”，
compiled.innerHTML！==h.value）；
};
h、 onkeyup（）
。错误{
背景色：红色；
颜色：白色；
}
在此处编写HTML：


你好，世界


我很确定您指的是编译输出的
没有内容窗口实际上这是我一直在尝试的，但我有一个问题。当你写哈罗或哈罗时，你会得到同样的结果。如果纯html无效，是否可以在预览时获取它？如果你的意思是显示某种错误，你只需检查保存的html，看看它是否与文本区相同，如果有不同，你知道有错误。我已经更新了代码段，键入一些无效的HTML，文本区域将变为红色。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

</div>

</body>
</html>