1. 程式人生 > >關於UEditor外掛的使用以及UEditor資料回顯問題,資料庫儲存標籤程式碼前臺頁面如何解析問題小結

關於UEditor外掛的使用以及UEditor資料回顯問題,資料庫儲存標籤程式碼前臺頁面如何解析問題小結

我們就直入主題,今天介紹的是百度的UEditor富文字編輯器的一些基本使用介紹:

1.專案當中匯入外掛(個人愚見:選擇那個基於原生js開發的外掛,避免和自己專案的jquery起衝突,當然實在不想找,可以加入下面的學習群,裡面有一些外掛檔案


2.頁面當中uediter的渲染主要是靠帶有id屬性的div

<divid="editor"type="text/plain"></div>

3.頁面js程式碼如下:
$(document).ready(function() {
UE.delEditor('editor');//初始化之前刪除這個id下的富文字
varue =UE.getEditor

('editor',{
toolbars: [[//自定義富文字編輯器的工具欄(在核心配置js裡面ueditor.config.js
//'fontfamily', //字型
//'fontsize', //字號
'bold',//加粗
'italic',//斜體
'underline',//下劃線
'forecolor'//字型顏色
]],
//focus時自動清空初始化時的內容
autoClearinitialContent:true,
//關閉字數統計
wordCount:false,
//關閉elementPath
elementPathEnabled:false,
//預設的編輯區域高度
initialFrameHeight:300

//更多其他引數,請參考ueditor.config.js中的配置項

});

4.直接開啟頁面就渲染出一個‘漂亮的’富文字編輯器,如何獲取輸入內容呢,ueditor自帶很多種方法


5.我選擇的是“獲取內容”這個按鈕,因為這樣儲存的資料帶有字型顏色,加粗等樣式我是通過表單提交把獲取的輸入內容作為隱藏域的值傳遞到後臺(回顯資料的話就把資料返回到頁面的隱藏域當中,先初始化富文字編輯器然後通過ue.setContent(值)把資料填充到編輯器裡面)

<input type="hidden" id="answer" name="answer"/>
var va = UE.getEditor('editor').getContent();
$("#answer").val(va);
6.如果你從資料庫把這些資料查詢出來再頁面展示的時候會發現沒有一點樣式,而且帶有標籤都沒有解析,破解方法是你依然吧值先傳到一個隱藏域當中,然後在頁面想要展示的地方寫一個div ,通過這個div的id 在js中為這個div的.html()方法填充隱藏域裡面的值即可。或者用標籤拼接隱藏域的值在放到頁面當中即可。
return '<div style="width:100%;height:100%;">'+row.answer+'</div>';
如果有什麼好的建議或者有什麼問題歡迎我們一起探討