1. 程式人生 > >Ueditor 富文字操作

Ueditor 富文字操作

富文字操作:

 前端利用<textaere >標籤做載體:

<textaere  id=’mode’  ></texteare>

引入以下兩個檔案:ueditor.config.js   與 ueditor.all.min.js

<importfile="lib.js.ueditor_mcit.ueditor#config"/>

<importfile="lib.js.ueditor_mcit.ueditor#all"/>

設定要顯示的功能(toolbars裡面不需要的功能可以去掉):

<script type="text/javascript">

   var ue = UE.getEditor('mode', {

       toolbars: [

           [

                'anchor', //錨點

                'undo', //撤銷

                'redo', //重做

                'bold', //加粗

                'indent', //首行縮排

                'snapscreen', //截圖

                'italic', //斜體

                'underline', //下劃線

                'strikethrough', //刪除線

                'subscript', //下標

                'fontborder', //字元邊框

                'superscript', //上標

                'formatmatch', //格式刷

                'source', //原始碼

                'blockquote', //引用

                'pasteplain', //純文字貼上模式

                'selectall', //全選

                'print', //列印

                'preview', //預覽

                'horizontal', //分隔線

                'removeformat', //清除格式

                'time', //時間

                'date', //日期

                'unlink', //取消連結

                'insertrow', //前插入行

                'insertcol', //前插入列

                'mergeright', //右合併單元格

                'mergedown', //下合併單元格

                'deleterow', //刪除行

                'deletecol', //刪除列

                'splittorows', //拆分成行

                'splittocols', //拆分成列

                'splittocells', //完全拆分單元格

                'deletecaption', //刪除表格標題

                'inserttitle', //插入標題

                'mergecells', //合併多個單元格

                'deletetable', //刪除表格

                'cleardoc', //清空文件

                'insertparagraphbeforetable',//"表格前插入行"

                //'insertcode', //程式碼語言

               'fontfamily', //字型

                'fontsize', //字號

                'paragraph', //段落格式

                'simpleupload', //單圖上傳

                'insertimage', //多圖上傳

                'edittable', //表格屬性

                'edittd', //單元格屬性

                'link', //超連結

                //'emotion', //表情

                'spechars', //特殊字元

                'searchreplace', //查詢替換

                //'map', //Baidu地圖 'gmap',//Google地圖 'insertvideo', //視訊 'help', //幫助

                'justifyleft', //居左對齊

                'justifyright', //居右對齊

                'justifycenter', //居中對齊

                'justifyjustify', //兩端對齊

                'forecolor', //字型顏色

                'backcolor', //背景色

                'insertorderedlist', //有序列表

               'insertunorderedlist', //無序列表

                'fullscreen', //全屏

                'directionalityltr', //從左向右輸入

                'directionalityrtl', //從右向左輸入

                'rowspacingtop', //段前距

                'rowspacingbottom', //段後距

                //'pagebreak', //分頁'insertframe', //插入Iframe

                'imagenone', //預設

                'imageleft', //左浮動

                'imageright', //右浮動

                'attachment', //附件

                'imagecenter', //居中

                'wordimage', //圖片轉存

                'lineheight', //行間距

                'edittip ', //編輯提示

                'customstyle', //自定義標題

                'autotypeset', //自動排版

                'webapp', //百度應用

                'touppercase', //字母大寫

                'tolowercase', //字母小寫

                'background', //背景

                'template', //模板

                'scrawl', //塗鴉

                //'music', //音樂

                'inserttable', //插入表格

                //'drafts', // 從草稿箱載入

                'charts', // 圖表

           ]

       ]

   });

</script>

這樣就可以了,提交就與submit 一起提交了。

圖片及檔案上傳原理,在新增圖片或檔案時,富文字會自動先上傳到伺服器,再生成一個絕對地址,再用絕對地址及相關標籤佔在原來上傳檔案的地方。sub提交時,都是提交的是字串標籤。

後臺:

像正常的textaere 接收就行了。

注意:1.當從資料庫取出資料,如果不是放到textare 中,一定要用:htmlspecialchars_decode()進行預處理

        2.前臺如果要對富文字操作,如新增內容。一定要在載入完成後才能操作:(ue為建立富文字時的名字)

 ue.addListener("ready",function(){

全部在裡面操作。

})

3.可以借用百度富文字對存入資料庫的文字進行預處理。