1. 程式人生 > >百度富文本ueditor使用小結

百度富文本ueditor使用小結

不能 auto pan 否則 https div src ntp 目前

最近因工作需要使用了ueditor,根據自己的需求將開發使用時遇到的問題小結分享下。

1.可到官網根據自身情況下載最新版本,https://ueditor.baidu.com/website/

2.html頁面調用並引入js插件

<div>
<!-- 富文本 -->
<textarea name="content" id="myEditor" style="height:300px;"></textarea>

</div>

<!--script引入富文本-->
<!-- 配置文件,須首先引入 -->
<script src="__PUBLIC__/Home/ueditor/1.4.3/ueditor.config.js" type="text/javascript"></script>

<!-- 編輯器源碼文件 -->
<script src="__PUBLIC__/Home/ueditor/1.4.3/ueditor.all.js" type="text/javascript"></script>

<!-- 實例化編輯器,並設置要顯示的標簽等,這裏我需要的toolbar標簽就這些,自己可參考文檔自定義設置 -->
<script type="text/javascript">
UE.getEditor(‘myEditor‘,{
toolbars: [
[‘undo‘, ‘redo‘, ‘insertimage‘]
],
autoHeightEnabled: true, //是否自動長高,默認true
autoFloatEnabled: true, //是否保持toolbar的位置不動,默認true

elementPathEnabled: false //是否啟用元素路徑,默認是顯示
});
</script>

ok,如下圖:

技術分享圖片技術分享圖片?

PS-小結::::::

1.修改不顯示‘本地已保存’的提示(1.4.3版本中)

技術分享圖片技術分享圖片?

2.去掉元素路徑、字數統計等

技術分享圖片技術分享圖片?

3.因為我將上傳的信息進行處理,規避了一些特殊字符,所以存到數據庫時,出現了被轉義問題,並且頁面顯示出錯

技術分享圖片技術分享圖片?

4.上傳的圖片太大沒有自動縮放問題:可在富文本插件的根目錄下找到themes->iframe.css文件,並在其中敲入以下代碼,註意緩存

img {
max-width: 65%; /*圖片自適應寬度*/

max-height: 65%; /*圖片自適應高度*/
}
body {
overflow-y: scroll !important;
}
.view {
word-break: break-all;
}
.vote_area {
display: block;
}
.vote_iframe {

border: 0 none;
height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除點擊圖片後出現的拉伸邊框*/

前:::

技術分享圖片技術分享圖片?

後:::

技術分享圖片技術分享圖片?

5.上傳圖片提交後太後在頁面顯示的同樣太大,可在html頁面通過定位到對應的img,敲入style,如:img{max-width:100%;}

6.開發環境上傳圖片等可正常使用,但在運行環境卻不行,報錯如:後臺配置項返回格式出錯,上傳功能將不能正常使用!

原因/解決:php目錄下的controller文件中的date_default_timezone_set函數大小寫問題/改為date_default_timezone_set("Asia/Chongqing");即可

7.註意、註意、註意:引入富文本插件時,文件順序一定不能錯,否則無法引入!!!!!config文件在最前

以上就是目前遇到的問題,不足之處,多多指教,共同進步

百度富文本ueditor使用小結