数据库存储html代码-云存储的数据存储在哪里的

在上面两篇文章中，我们主要记录了wangEditor编辑器的基本使用和上传图片的部分。 如果对前两篇文章感兴趣，可以参考链接：

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

1、数据库中存放的html代码的显示问题

一、遇到的问题

这是非常不友好的。 本来我们使用富文本编辑器是为了能够有一定的风格。 html标签中的换行和蹄子的显示都是必须的。 结果这里显示不了数据库存储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）这里第一步是从一个隐藏的输入框中获取服务器传过来的值，然后就相当于做了一个转换。

2）发布下面的html代码。

//这里最外围的info1是编辑器
//info2是通过js赋值的部分。这里不能直接把数据库的值通过innerHTML赋值给编辑器，不然的话，编辑器会显示不出来，所以这里就新建了一个空的div，用来存放解析数据库的html代码
   <div id="info1" class="text" > 
             <div id="info2">
              div>

    div>
//这是我规定的一个隐藏域。用来获取服务器传过来的数据，并且通过js，把服务器传过来的数据显示在页面上
 <input class="input-xlarge focused" style="float:left;" name="content" type="hidden" id="content1" value="{{$arr->content}}" >

(4) 正态分析

2.修改图文内容并提交表单

1.编辑器重新编辑后，需要将编辑后的内容提交到表单

//这里的edit是表单提交的按钮

document.getElementById('edit').addEventListener('click', function () {
    // 读取 html
    var info = editor1.txt.html();
    document.getElementById("content1").value=info;
  }, false);

这部分的意思是当点击按钮提交表单时数据库存储html代码，JS会在编辑器中获取html代码，并将这个值赋值给隐藏的输入选项框。 然后在提交的时候，将新修改的内容通过隐藏输入提交给表单。

这里有点乱。 最重要的是通过JS获取编辑器中的内容，通过JS的innerHTML解析图形信息。 还有输入法的隐藏字段，真的很好用。 他默默地做了很多事情，将自己的功绩和名声深藏不露。

结尾