• 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串的话,那将是场灾难。

    
    
    
    


  • 相关阅读:
    61. 最长不含重复字符的子字符串
    60. 礼物的最大价值 (未理解)
    59. 把数字翻译成字符串
    58. 把数组排成最小的数
    57. 数字序列中某一位的数字 (不懂)
    spring data jpa 官方文档
    idea 编译报错 源发行版 1.8 需要目标发行版 1.8
    idea maven 依赖报错 invalid classes root
    solr
    spring boot 官方文档
  • 原文地址:https://www.cnblogs.com/qiu2841/p/9036936.html
Copyright © 2020-2023  润新知