Question

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

问题是我的编辑器显示了完整的行数，但只显示了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
         } 
    });
 });

我做错了什么？

Answer 1

现在，编辑器div中的代码被解析为HTML（大部分在此上下文中无效），因此，只显示文本部分。为了防止这种情况，你必须逃避所有HTML reserved characters。您可以使用在线编码器like this one，这将产生如下代码，然后您可以将其复制粘贴到编辑器div中：

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

如果你看一下Ace嵌入指南的源代码（提示：搜索第二次出现的单词 DOCTYPE ），你会看到同样的事情。

如何在ace编辑器中显示html网站的代码

1 个答案: