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.可以借用百度富文字對存入資料庫的文字進行預處理。