Question

我正在编写一个使者，我的目标是添加一个插入代码的机会，并在Stack Overflow上完成它。我正在使用谷歌的美化图书馆。这是html部分：

<div id="test" style="margin-left: auto; margin-right: auto; overflow-y: scroll;" contenteditable="true"
                 placeholder="Type your message" name="message" ng-model="message">
            </div>

和js功能：

$scope.pasteHtmlAtCaret = function () {
            document.getElementById('test').focus();
            var sel, range;
            if (window.getSelection) {
                // IE9 and non-IE
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = sel.getRangeAt(0);

                    // Range.createContextualFragment() would be useful here but is
                    // only relatively recently standardized and is not supported in
                    // some browsers (IE9, for one)
                    var el = document.createElement("div");
                    //var el = document.getElementById('test');

                    /*var text = sel.toString().replace(/</g, "&lt;");
                    text = text.replace(/>/g, "&gt;");
                    text = text.replace(/&/g, "&amp;");*/

                    el.innerHTML = "<pre class=prettyprint linenums><code>" + sel.toString() + '</code></pre></br>';

                    range.deleteContents();

                    var frag = document.createDocumentFragment(), node, lastNode;
                    while ((node = el.firstChild)) {
                        lastNode = frag.appendChild(node);
                    }
                    var firstNode = frag.firstChild;
                    range.insertNode(frag);
                    prettyPrint();
                    // Preserve the selection
                    if (lastNode) {
                        range = range.cloneRange();
                        range.setStartAfter(lastNode);
                        range.setStartBefore(firstNode);

                        sel.removeAllRanges();
                        sel.addRange(range);
                    }
                }
            } else if ((sel = document.selection) && sel.type != "Control") {
                var originalRange = sel.createRange();
                originalRange.collapse(true);
                sel.createRange().pasteHTML(html);

                range = sel.createRange();
                range.setEndPoint("StartToStart", originalRange);
                range.select();
            }
        }

正如您所看到的，我已尝试将<（在评论中）和其他符号放在＆lt;，＆gt;，＆amp;符号。但是，它们显示为js代码，而不是符号。你能告诉我，我怎么能在我的div块（或者可能是另一个容器）中插入美化的html代码。

可能，你也可以告诉我，如何制作美化显示行号，因为它们现在没有显示（它们被视为另一个类别）

Answer 1

Afaict，你正在创建一个<pre class=prettyprint>，但美化图书馆实际上从未被调用过。

我认为您可以使用PR.prettyPrintOne并传入HTML源代码。您已经确定应首先逃离&，<和>，因为它需要HTML，而不是普通的源代码。

加载PR.prettyPrintOne时

<script src=".../prettify.js"></script>可用，但加载<script src=".../run_prettify.js"></script>时则不行。

/*var text = sel.toString().replace(/</g, "&lt;");
text = text.replace(/>/g, "&gt;");
text = text.replace(/&/g, "&amp;");*/

这里有一个错误。您应首先执行.replace(/&/g, "&")，因为

"<".replace(/</g, "&lt;").replace(/&/g, "&amp;") === "&amp;lt;"

，而

"<".replace(/&/g, "&amp;").replace(/</g, "&lt;") === "&lt;"

当某些替换字符串也匹配模式时，替换订单事项：）

function htmlEscape(s) {
  return (String(s).replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;"));
}

JS，HTML。谷歌美化。如何动态地将美化的html代码插入html页面中的contenteditable div

1 个答案: