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

      以上两篇，我们主要记录了wangEditor编辑器的基础使用方法，以及上传图片部分。如果对前两篇有兴趣的，可以参考链接：
http://blog.csdn.net/LJFPHP/article/details/78858596
http://blog.csdn.net/LJFPHP/article/details/78858797

这里主要是记录一下wangEditor编辑器显示存储的html代码问题。

一、数据库存储的html代码显示问题

1、碰到的问题

      这就很不友好了，本来我们用富文本编辑器也是为了能够带有一定的样式，html标签的换行，显示蹄片都是必须的。结果这里却显示不出来，有点无语。

2、哪里出错了

（1）打开F12，在浏览器上查案元素，看看为什么会出不来
（2）

这里可以发现，我们的html代码都成字符串了，也难怪不解析html代码。

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

（2）其次，我们是需要在页面加载完成后，直接就能在编辑器上看到图文信息。因此必须要使用js的页面加载函数onload()。OK，分析到这里就很明朗了。

（3）代码：

在页面的底部加上以下代码：

<script type="text/javascript">
  window.onload=function()
  {
  //第一步是先获取服务器传过来的图文信息值
    var info1 = document.getElementById("content1").value;
    //把图文信息的值通过innerHTML赋值给编辑器
    document.getElementById("info2").innerHTML=info1;
  }
</script>

解释：
1）这里的第一步，是从一个隐藏的input框中获取服务器传过来的值，然后相当于做一个转换。
2）下面贴出html的代码。

//这里最外围的info1是编辑器
//info2是通过js赋值的部分。这里不能直接把数据库的值通过innerHTML赋值给编辑器，不然的话，编辑器会显示不出来，所以这里就新建了一个空的div，用来存放解析数据库的html代码
   <div id="info1" class="text" > <!--可使用 min-height 实现编辑区域自动增加高度-->
             <div id="info2">
              </div>
    </div>
//这是我规定的一个隐藏域。用来获取服务器传过来的数据，并且通过js，把服务器传过来的数据显示在页面上
 <input class="input-xlarge focused" style="float:left;" name="content" type="hidden" id="content1" value="{{$arr->content}}" >

（4）正常的解析

二、修改图文内容，并提交表单

1、在编辑器重新编辑之后，需要把编辑的内容提交到表单

//这里的edit是表单提交的按钮
document.getElementById('edit').addEventListener('click', function () {
    // 读取 html
    var info = editor1.txt.html();

    document.getElementById("content1").value=info;

  }, false);

      这部分的意思是，当点击按钮提交表单的时候，JS会获取编辑器中的html代码，并且把这个值赋值给隐藏的input选项框。 然后提交的时候就通过隐藏的input把新修改的内容提交到表单了。

      这里写的有点乱。最主要的还是通过 JS来获取编辑器中的内容，以及通过JS的innerHTML解析图文信息。还有就是input的隐藏域，这个东东真的很好用。默默的做了很多事情，深藏功与名。

end