wangEditor编辑器中解析html图文信息问题

在JS中,有一种方法:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 
也就是说,我们可以利用这个属性,把字符串转换为html代码,这样就可以被解析了。

其次,我们是需要在页面加载完成后,直接就能在编辑器上看到图文信息。

<div id="editor">
<div id="info2">
</div>
</div>

<textarea id="Content" name="Content" style="display:none">
{{main.data.Content}}
</textarea>

js代码:

var E = window.wangEditor
var gEditor = new E('#editor')
// 个即可显示“上传图片”的tab
gEditor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
// 或者 var editor = new E( document.getElementById('editor') )
// 关闭粘贴样式的过滤
gEditor.customConfig.pasteFilterStyle = false
// 忽略粘贴内容中的图片
gEditor.customConfig.pasteIgnoreImg = false
gEditor.create()

//将后台获取的数据显示在编辑器内 以便于修改
var info1 = document.getElementById("Content").value;
document.getElementById("info2").innerHTML=info1;

总结:

html()、text()、innerhtml()、value()这四个各自的作用;

html():改变 HTML 内容;

语法:

$(selector).html(content)

html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。

实例:

$("p").html("W3School");
text():
实例:设置所有 <p> 元素的内容:
$(".btn1").click(function(){
  $("p").text("Hello <b>world</b>!");
});

定义和用法

text() 方法方法设置或返回被选元素的文本内容.

返回文本内容

当该方法用于返回一个值时,它会返回所有匹配元素的组合的文本内容(会删除 HTML 标记)。

语法

$(selector).text()
innerhtml():

定义和用法

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法

tablerowObject.innerHTML=HTML
value():

定义和用法

value 属性可设置或返回密码域的默认值。

出于安全考虑,一些浏览器可能阻止 JavaScript 代码读取 value 属性。

语法

passwordObject.value=text

 

InnerHtml() 与html( )的区别

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。

innerHTML 是从对象的起始位置到终止位置的全部内容,包括Html标签

我原本一直以为innerHTML和jquery里的html其实是完全一样的,jquery是多此一举了,直到我遇到一次问题

看个示例:

复制代码 代码如下:


var tbody=document.createElement('tbody'); 
tbody.innerHTML='<tr><td>IE下tbody的innerHTML是只读的</td></tr>'; //在IE下报错,目标对象错误



现在用jquery的html试试,

复制代码 代码如下:


$(tbody).html('<tr><td>IE下tbody的innerHTML是只读的</td></tr>');


发现IE下用jquery能正确显示了,没任何问题。 
后来查阅资料才知道,原来IE下tbody、tr这些的innerHTML都是只读的,不允许写入,而在其他浏览器下则没问题。 

而jquery里是用了try,catch来检测,如果报错则在catch里重新调用this.empty().append(value),是通过append来添加字符串的。 

jquery 如何使用innerHTML 

$("#responsediv") 是个Jquery对象,它Val()是对Value属性赋值对它无意义,Jquery没有innerHTML这个属性,应该这样写$("#responsediv")[0].innerHTML=msg 就可以获得这个Dom对象使用innerHTML。

IE里有些元素的innerHTML是只读的

在IE6,IE7,IE8,IE9里面 col, colGroup, frameSet, html, head, style,table, tBody, tFoot, tHead, title, tr 这几个的innerHTML属性是只读的,不可以赋值,赋值的话就脚本报错。IE10这些标签的innerHTML改成可写的了。

既然在IE6-IE9里这些标签的innerHTML属性是只读的,那么我们尽量避免对这些标签的innerHTML属性赋值,比如说对table的innerHTML可以改为对table父元素(假设是div)的innerHTML属性赋值。

html()函数的优点

看看innerHTML属性的缺点,就知道jQuery中html()函数的优点了,它是兼容所有浏览的,不存在html5标签不支持的问题,不存在href,src属性被转换的问题,不存在某些标签设置不了html串的问题,总之就是一句话,用它基本就万事无忧了,至少功能的实现上是这样。

html()函数的缺点

看来jQuery的html()函数似乎完美无限了,其实不然,它的完美只表现它的功能上,它兼容了所有浏览器,包括IE。但偏偏也是IE,尽管兼容了,性能并不乐观,如果使用html()函数设置大数据量的html串的话,那将是场灾难。





原文地址:https://www.cnblogs.com/qiu2841/p/9036936.html