使用百度富文本編輯器

插件下載地址：http://ueditor.baidu.com/website/download.html

具體引用：

把下載的文件徹底的額引入到你的項目中，而後編輯頁面內容：

<!--加載編輯器的容器-->
<script id="container" style="height: 700px" type="text/plain">
           初始化內容
</script>
<!--配置文件-->
<script type="text/javascript" src="../UEditor/utf8-net/ueditor.config.js" charset="utf-8"></script>
<!--編輯器源碼文件-->
<script type="text/javascript" src="../UEditor/utf8-net/ueditor.all.min.js" charset="utf-8"></script>
<!--實例化編輯器-->
<script type="text/javascript">

var ue = UE.getEditor('container');

//var ue = UE.getEditor('container', {
// toolbars: [
// [
// 'undo',//撤銷
// 'bold',//粗體
// 'italic',//斜體
// 'underline',//下劃線
// 'strikethrough',//刪除線
// 'formatmatch',//格式刷
// 'selectall',//全選
// 'print',//打印
// 'link',//超連接
// 'unlink',//取消連接
// 'fontfamily',//字體
// 'fontsize',//字號
// 'simpleupload',//單圖上傳
// 'insertimage',//多圖上傳
// 'help',//幫助
// 'justifyleft',//居左對齊
// 'justifyright',//居右對齊
// 'justifycenter',//居中對齊
// 'justifyjustify',//兩端對齊
// 'forecolor',//字體顏色
// 'backcolor',//背景色
// 'touppercase',//字母大寫
// 'tolowercase',//字母小寫
// ]
// ],
// initialFrameHeight: 320,

//autoHeightEnabled: false,//設置滾動條
//enableAutoSave: false,//不顯示默認的「本地保存成功」的提示

//});

</script>

如此即可以再頁面上顯示一個富文本編輯器，註釋掉的部分是我簡化的一個富文本編輯器。

詳細內容:http://ueditor.baidu.com/website/onlinedemo.html

 

遇到的一些問題：

1.獲取富文本編輯框的內容

var content = UE.getEditor('container').getPlainTxt();

2.編輯器內容過長不能自動換行

pre { white-space:pre-wrap; word-wrap:break-word;}