5

我提到了其他类似的讨论。这是该讨论的链接。

pre 中的代码在 IE8 上排成一行

外部 HTML 工作正常。但我的要求是内部 HTML。不使用外部 HTML 的原因是我使用的是 AngularJS，它对 HTML 本身有条件。所以我需要将内容添加到innerHTML。

这是HTML。

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p>

这是支持它的JS。

var elem = $(".pre.fileContent")[1];
if (elem.tagName == "P" && "innerHTML" in elem){
    elem.innerHTML = "<pre>" + elem.innerHTML + "</pre>";
}

我也尝试用"<pre>" + elem.innerHTML + "</pre>"范围变量替换导致"<pre>" + $scope.file.fileContent + "</pre>";

这是我在 IE8 上遇到的错误。

Error: Unknown runtime errorundefined

如果我<pre>从elem.innerHTML错误中删除，则不会发生。此外，对于 outerHTML，不会出现此错误。

我应该如何解决这个问题？

4

3 回答 3

2

看起来您只是想将内容包装在一个pre元素中？如果是这样，你可以这样做：

var pre = document.createElement('pre');
while(elem.firstChild) pre.appendChild(elem.firstChild);
elem.appendChild(pre);

这具有保留任何属性值和事件处理程序的额外好处。

或者，您可以将 CSS 应用于相关元素：

white-space:pre;
font-family:monospace;

编辑：CSS 解决方案可能会更好——我认为在标签<pre>内有一个块级元素是无效的。<p>

于 2013-05-09T04:54:29.033 回答
2

其实我自己找到了答案。当我使用AngularJS时，我使用了错误的指令ng-bind-html-unsafe。我切换ng-bind-html-unsafe到ng-bind，然后我的问题就解决了！

感谢大家帮助我！

于 2013-05-12T03:33:42.653 回答
1

抱歉，我对段落类选择器感到困惑，

<p ng-show="preview=='text' && !file.showUploadPanel && file.fileContent!='null' && file.fileContent!='undefined'" ng-bind-html-unsafe="file.fileContent" class="pre fileContent"></p>

上面的<p>标签同时包含类“.pre”和“.filecontent”，您是否尝试使用选择器 $(".pre.fileContent")，它在类“.pre”的元素中查找类“.fileContent”的元素” 。

我只是想确定它是正确还是错误输入。:)

解决方案：

获取文本区域或源容器内的内容，用“\n”分割字符串，并使用循环将<p>标签添加到所有数组元素。

var textVal = jQuery("#wmd-input").val();
textVal = textVal.split("\n");
var temp = "";
for (var i=0; i < textVal.length; i++) { 
  temp += "<p>" + textVal[i] + "</p>";
}

/* Assing the temp html in your target div or container*/
于 2013-05-10T05:51:42.157 回答