這裡主要是記錄一下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