百度富文字編輯器的使用
阿新 • • 發佈：2020-12-23
問題描述： 使用富文字時，需要做到使用公司自己的自定義表情，於是研究一番百度富文字，記錄一下百度富文字的使用方法（基於Vue）
（1）需要下載富文字外掛
vue-ueditor-wrap
（2）下載百度生成的壓縮包，git地址（https://github.com/fex-team/ueditor），我們用的是utf8-jsp 壓縮包，將其解壓在 public 檔案下，壓縮包地址如下圖（左），解壓包放置如下圖（右）
注：如果是 vue-cli2 則把檔案放在 status 資料夾下面
（3）在Vue 專案中使用：
import VueUeditorWrap from 'vue-ueditor-wrap'
<vue-ueditor-wrap :key="1" v-model="msg" :config="myConfig" editor-id="editor_one"></vue-ueditor-wrap>
msg: '你好啊', //獲取富文字中的資訊 以HTML 格式傳送
myConfig: {
autoHeightEnabled: false,
initialFrameHeight: 220,
initialFrameWidth: '100%',
UEDITOR_HOME_URL: '/ueditor/',
serverUrl: 'http://testnbbs.zhulong.com/process_f/controller.php?action=config&&noCache=1608278260191', // 這個為圖片上傳的地址 需要後臺進行配置 不然 圖片上傳不會成功
enableAutoSave: true // 開啟從草稿箱恢復功能需要手動設定固定的 editorId，否則元件會預設隨機一個，如果頁面重新整理，下次渲染的時候 editorId 會重新隨機，導致無法載入草稿箱資料
},
（4）基本上，到上面那一步，就能出線一個富文字編輯器了，但是可能你會用不到這麼多，所以可以自定義功能，具體檔案位置在 public\ueditor\ueditor.config
(5) 如果需要自定義表情，那麼只需要更改下面檔案就行：public\ueditor\dialogs\emotion
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="robots" content="noindex, nofollow"/>
<script type="text/javascript" src="../internal.js"></script>
<link rel="stylesheet" type="text/css" href="emotion.css">
</head>
<body>
<div id="tabPanel" class="wrapper">
<div id="tabHeads" class="tabhead">
<span><var id="lang_input_choice"></var></span>
<span><var id="lang_input_Tuzki"></var></span>
<!-- <span><var id="lang_input_lvdouwa"></var></span>
<span><var id="lang_input_BOBO"></var></span>
<span><var id="lang_input_babyCat"></var></span>
<span><var id="lang_input_bubble"></var></span>
<span><var id="lang_input_youa"></var></span> -->
</div>
<div id="tabBodys" class="tabbody">
<div id="tab0"></div>
<div id="tab1"></div>
<!-- <div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
<div id="tab6"></div> -->
</div>
</div>
<div id="tabIconReview">
<img id='faceReview' class='review' src="../../themes/default/images/spacer.gif"/>
</div>
<script type="text/javascript" src="emotion.js"></script>
<script type="text/javascript">
var emotion = {
// tabNum:7, //切換面板數量
// SmilmgName:{ tab0:['j_00', 84], tab1:['t_00', 40], tab2:['w_00', 52], tab3:['B_00', 63], tab4:['C_00', 20], tab5:['i_f', 50], tab6:['y_00', 40] }, //圖片字首名
// imageFolders:{ tab0:'jx2/', tab1:'tsj/', tab2:'ldw/', tab3:'bobo/', tab4:'babycat/', tab5:'face/', tab6:'youa/'}, //圖片對應資料夾路徑
// imageCss:{tab0:'jd', tab1:'tsj', tab2:'ldw', tab3:'bb', tab4:'cat', tab5:'pp', tab6:'youa'}, //圖片css類名
// imageCssOffset:{tab0:35, tab1:35, tab2:35, tab3:35, tab4:35, tab5:25, tab6:35}, //圖片偏移
// SmileyInfor:{
// tab0:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '頂', '抖胸', '88', '汗', '瞌睡', '魯拉', '拍磚', '揉臉', '生日快樂', '大笑', '瀑布汗~', '驚訝', '臭美', '傻笑', '拋媚眼', '發怒', '打醬油', '俯臥撐', '氣憤', '?', '吻', '怒', '勝利', 'HI', 'KISS', '不說', '不要', '扯花', '大心', '頂', '大驚', '飛吻', '鬼臉', '害羞', '口水', '狂哭', '來', '發財了', '吃西瓜', '套牢', '害羞', '慶祝', '我來了', '敲打', '暈了', '勝利', '臭美', '被打了', '貪吃', '迎接', '酷', '微笑', '親吻', '調皮', '驚恐', '耍酷', '發火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '暈倒', '開心', '偷笑', '大哭', '滴汗', '嘆氣', '超讚', '??', '飛吻', '天使', '撒花', '生氣', '被砸', '嚇傻', '隨意吐'],
// tab1:['Kiss', 'Love', 'Yeah', '啊！', '背扭', '頂', '抖胸', '88', '汗', '瞌睡', '魯拉', '拍磚', '揉臉', '生日快樂', '攤手', '睡覺', '癱坐', '無聊', '星星閃', '旋轉', '也不行', '鬱悶', '正Music', '抓牆', '撞牆至死', '歪頭', '戳眼', '飄過', '互相拍磚', '砍死你', '扔桌子', '少林寺', '什麼？', '轉頭', '我愛牛奶', '我踢', '搖晃', '暈厥', '在籠子裡', '震盪'],
// tab2:['大笑', '瀑布汗~', '驚訝', '臭美', '傻笑', '拋媚眼', '發怒', '我錯了', 'money', '氣憤', '挑逗', '吻', '怒', '勝利', '委屈', '受傷', '說啥呢？', '閉嘴', '不', '逗你玩兒', '飛吻', '眩暈', '魔法', '我來了', '睡了', '我打', '閉嘴', '打', '打暈了', '刷牙', '爆揍', '炸彈', '倒立', '刮鬍子', '邪惡的笑', '不要不要', '愛戀中', '放大仔細看', '偷窺', '超高興', '暈', '鬆口氣', '我跑', '享受', '修養', '哭', '汗', '啊~', '熱烈歡迎', '打醬油', '俯臥撐', '?'],
// tab3:['HI', 'KISS', '不說', '不要', '扯花', '大心', '頂', '大驚', '飛吻', '鬼臉', '害羞', '口水', '狂哭', '來', '淚眼', '流淚', '生氣', '吐舌', '喜歡', '旋轉', '再見', '抓狂', '汗', '鄙視', '拜', '吐血', '噓', '打人', '蹦跳', '變臉', '扯肉', '吃To', '吃花', '吹泡泡糖', '大變身', '飛天舞', '回眸', '可憐', '猛抽', '泡泡', '蘋果', '親', '', '騷舞', '燒香', '睡', '套娃娃', '捅捅', '舞倒', '西紅柿', '愛慕', '搖', '搖擺', '雜耍', '招財', '被毆', '被球悶', '大驚', '理想', '歐打', '嘔吐', '碎', '吐痰'],
// tab4:['發財了', '吃西瓜', '套牢', '害羞', '慶祝', '我來了', '敲打', '暈了', '勝利', '臭美', '被打了', '貪吃', '迎接', '酷', '頂', '幸運', '愛心', '躲', '送花', '選擇'],
// tab5:['微笑', '親吻', '調皮', '驚訝', '耍酷', '發火', '害羞', '汗水', '大哭', '得意', '鄙視', '困', '誇獎', '暈倒', '疑問', '媒婆', '狂吐', '青蛙', '發愁', '親吻', '', '愛心', '心碎', '玫瑰', '禮物', '哭', '奸笑', '可愛', '得意', '呲牙', '暴汗', '楚楚可憐', '困', '哭', '生氣', '驚訝', '口水', '彩虹', '夜空', '太陽', '錢錢', '燈泡', '咖啡', '蛋糕', '音樂', '愛', '勝利', '贊', '鄙視', 'OK'],
// tab6:['男兜', '女兜', '開心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '無奈', '滴汗', '嘆氣', '狂暈', '委屈', '超讚', '??', '疑問', '飛吻', '天使', '撒花', '生氣', '被砸', '口水', '淚奔', '嚇傻', '吐舌頭', '點頭', '隨意吐', '旋轉', '困困', '鄙視', '狂頂', '籃球', '再見', '歡迎光臨', '恭喜發財', '稍等', '我線上', '恕不議價', '庫房有貨', '貨在路上']
// }
tabNum:2, //切換面板數量
SmilmgName:{ tab0:['', 45], tab1:['', 45] }, //圖片字首名
imageFolders:{ tab0:'lan/', tab1:'red/'}, //圖片對應資料夾路徑
imageCss:{tab0:'lan', tab1:'red'}, //圖片css類名
imageCssOffset:{tab0:60, tab1:60}, //圖片偏移
SmileyInfor:{
tab0:["男-驚訝", "男-流淚", "男-害羞", "男-閉嘴", "男-睡", "男-發怒", "男-得意", "男-抓狂", "男-吐", "男-偷笑", "男-困", "男-流汗", "男-咒罵", "男-疑問", "男-噓", "男-暈", "男-衰", "男-再見", "男-豬頭", "男-擁抱", "男-愛心", "男-心碎", "男-強", "男-弱", "男-摳鼻", "男-鼓掌", "男-左哼哼", "男-右哼哼", "男-哈欠", "男-鄙視", "男-委屈", "男-陰險", "男-親親", "男-可憐", "男-勾引", "男-NO", "男-OK", "男-愛你", "男-蛋糕", "男-給力", "男-哈哈", "男-大哈哈", "男-蠟燭", "男-禮物", "男-勝利"],
tab1:["女-驚訝", "女-流淚", "女-害羞", "女-閉嘴", "女-睡", "女-發怒", "女-得意", "女-抓狂", "女-吐", "女-偷笑", "女-困", "女-流汗", "女-咒罵", "女-疑問", "女-噓", "女-暈", "女-衰", "女-再見", "女-豬頭", "女-擁抱", "女-愛心", "女-心碎", "女-強", "女-弱", "女-摳鼻", "女-鼓掌", "女-左哼哼", "女-右哼哼", "女-哈欠", "女-鄙視", "女-委屈", "女-陰險", "女-親親", "女-可憐", "女-勾引", "女-NO", "女-OK", "女-愛你", "女-蛋糕", "女-給力", "女-哈哈", "女-大哈哈", "女-蠟燭", "女-禮物", "女-勝利"]
}
};
</script>
</body>
</html>
（5）當然需要配置和自帶表情一樣格式的圖片：public\ueditor\dialogs\emotion/images
配置好之後，那麼就可以看到如下效果：