Question

这是我的代码，我尝试构建实时html编辑器。在javascript中我从textarea获取文本，其中id = pure然后在document.body.onkeyup函数中我将值传递给具有id =的textarea编译。它根本不起作用。我想知道问题是关于open-writeln-close还是其他语法？

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>

Answer 1

在查看代码后，不是100％确定你的内容。

但如果你所有的后面都有一个TextArea你可以放HTML标记，然后看预览。以下是一个例子..

＆＃13;

var h = document.getElementById("pure");
var compiled = document.getElementById("compiled");
h.onkeyup = function() {
  compiled.innerHTML = h.value;
  pure.classList.toggle("error",
    compiled.innerHTML !== h.value); 
};
h.onkeyup();

＆＃13;

.error {
 background-color: red;
 color: white;
}

＆＃13;

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

＆＃13;

Answer 2

<!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>

使用Javascript的实时Html编辑器

2 个答案: