2

我想在我的 ace 编辑器中显示整个 html dom，就像在 ace 编辑器网站上的“嵌入指南”中一样。

问题是我的编辑器显示了完整的行数，但只显示了 javascript 部分。

这是我的王牌代码：

<div id="editor">
<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="mostslider/themes/default/default.css">

    </head>
    <body>

        <div class="silder-wrapper default">
            <div id="slider">
                <img src="photo1.jpg" />
                <img src="photo1.jpg" />
                <img src="photo1.jpg" />
            </div>
        </div>

        <script src="js/vendor/jquery-1.10.1.min.js"></script>
        <script src="mostslider/slider.min.js"></script>

        <script>
            $(document).ready(function(){
                var slider = $("#slider").slider({
                   metrics: {
                       width: 800,
                       height: 600
                   } 
                });
            });
        </script>

    </body>
</html>
</div>

唯一显示的是：

$(document).ready(function(){
   var slider = $("#slider").slider({
         metrics: {
             width: 800,
             height: 600
         } 
    });
 });

我究竟做错了什么？

4

1 回答 1

3

现在，编辑器 div 中的代码被解析为 HTML（在这种情况下大部分是无效的），因此只显示文本部分。为了防止这种情况，您必须转义所有HTML 保留字符。您可以使用像这样的在线编码器，这将产生如下代码，然后您可以将其复制粘贴到编辑器 div 中：

&lt;div id=&quot;editor&quot;&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
...

如果您查看 Ace 嵌入指南的源代码（提示：搜索单词DOCTYPE的第二次出现），您会看到相同的内容。

于 2013-10-10T22:13:05.887 回答