HTML富文字編輯器wangEditor的使用
阿新 • • 發佈：2018-12-26
HTML富文字編輯器wangEditor的使用
官網
用法官方文件已經講得很清楚了，我這裡只貼出程式碼，方便以後自己貼上複製用
用到的CSS
- wangEditor-fullscreen-plugin.css
@CHARSET "UTF-8"; .w-e-toolbar { flex-wrap: wrap; -webkit-box-lines: multiple; } .w-e-toolbar .w-e-menu:hover{ z-index: 10002!important; } .w-e-menu a { text-decoration: none; } .fullscreen-editor { position: fixed !important; width: 100% !important; height: 100% !important; left: 0px !important; top: 0px !important; background-color: white; z-index: 9999; } .fullscreen-editor .w-e-text-container { width: 100% !important; height: 95% !important; } ._wangEditor_btn_fullscreen{ color: #999; } ._wangEditor_btn_SourceCode{ color: #999; }
這個css是給全屏顯示使用的，如果你不需要全屏效果，可以不使用這個css
用到的JS
- wangEditor-fullscreen-plugin.js
/** * */ window.wangEditor.fullscreen = { // editor create之後呼叫 init: function(editorSelector) { //新增檢視全屏按鈕 $(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" onclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</a></div>'); //新增檢視原始碼按鈕 $(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_SourceCode" href="###" onclick="window.wangEditor.fullscreen.toggleSourceCode(\'' + editorSelector + '\')">原始碼</a></div>'); }, toggleFullscreen: function(editorSelector) { $(editorSelector).toggleClass('fullscreen-editor'); if($(editorSelector + ' ._wangEditor_btn_fullscreen').text() == '全屏') { $(editorSelector + ' ._wangEditor_btn_fullscreen').text('退出全屏'); } else { $(editorSelector + ' ._wangEditor_btn_fullscreen').text('全屏'); } }, toggleSourceCode: function(editorSelector) { $('#code').text(editor.txt.html()); } };
上面是全屏使用的js
-
jquery.min.js -
wangEditor.min.js
這兩個是直接使用的CDN
最後完整程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--適配手機--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="shortcut icon" href="http://admin.zrstt.cn/group1/M00/00/00/rB_YCFsQ_OmAP6VFAAAQvtuENdk882.ico"> <title>富文字編輯器</title> <link rel="stylesheet" href="css/wangEditor-fullscreen-plugin.css" /> <style> /* table 樣式 */ table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } table td, table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px; } table th { border-bottom: 2px solid #ccc; text-align: center; } /* blockquote 樣式 */ blockquote { display: block; border-left: 8px solid #d0e5f2; padding: 5px 10px; margin: 10px 0; line-height: 1.4; font-size: 100%; background-color: #f1f1f1; } /* code 樣式 */ code { display: inline-block; *display: inline; *zoom: 1; background-color: #f1f1f1; border-radius: 3px; padding: 3px 5px; margin: 0 3px; } pre code { display: block; } /* ul ol 樣式 */ ul, ol { margin: 10px 0 10px 20px; } #editor .w-e-text-container{ height: 800px; } </style> </head> <body> <div id="editor"> </div> <div id="code"> </div> <!-- 注意， 只需要引用 JS，無需引用任何 CSS ！！！--> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script> <!--全屏使用--> <script type="text/javascript" src="js/wangEditor-fullscreen-plugin.js"></script> <script type="text/javascript"> var E = window.wangEditor; var editor = new E('#editor') //配置資訊 var config = editor.customConfig; // 自定義配置顏色（字型顏色、背景色） config.colors = [ '#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff' ] //lang配置項配置多語言 config.lang = { '設定標題': 'title', '正文': 'p', '連結文字': 'link text', '連結': 'link', '上傳圖片': 'upload image', '上傳': 'upload', '建立': 'init', '設定列表': 'set something' // 還可自定新增更多 } // 表情面板可以有多個 tab ，因此要配置成一個數組。陣列每個元素代表一個 tab 的配置 config.emotions = [{ // tab 的標題 title: '表情', // type -> 'emoji' / 'image' type: 'image', // content -> 陣列 content: [{ src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif", alt: "[草泥馬]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif", alt: "[神馬]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/fuyun_thumb.gif", alt: "[浮雲]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c9/geili_thumb.gif", alt: "[給力]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f2/wg_thumb.gif", alt: "[圍觀]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/vw_thumb.gif", alt: "[威武]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/panda_thumb.gif", alt: "[熊貓]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/81/rabbit_thumb.gif", alt: "[兔子]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/bc/otm_thumb.gif", alt: "[奧特曼]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif", alt: "[囧]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/hufen_thumb.gif", alt: "[互粉]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c4/liwu_thumb.gif", alt: "[禮物]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ac/smilea_thumb.gif", alt: "[呵呵]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0b/tootha_thumb.gif", alt: "[嘻嘻]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/laugh.gif", alt: "[哈哈]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/14/tza_thumb.gif", alt: "[可愛]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/kl_thumb.gif", alt: "[可憐]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a0/kbsa_thumb.gif", alt: "[挖鼻屎]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f4/cj_thumb.gif", alt: "[吃驚]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6e/shamea_thumb.gif", alt: "[害羞]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c3/zy_thumb.gif", alt: "[擠眼]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/29/bz_thumb.gif", alt: "[閉嘴]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/71/bs2_thumb.gif", alt: "[鄙視]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/lovea_thumb.gif", alt: "[愛你]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9d/sada_thumb.gif", alt: "[淚]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/19/heia_thumb.gif", alt: "[偷笑]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8f/qq_thumb.gif", alt: "[親親]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/b6/sb_thumb.gif", alt: "[生病]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/mb_thumb.gif", alt: "[太開心]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/17/ldln_thumb.gif", alt: "[懶得理你]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/98/yhh_thumb.gif", alt: "[右哼哼]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/zhh_thumb.gif", alt: "[左哼哼]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a6/x_thumb.gif", alt: "[噓]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/af/cry.gif", alt: "[衰]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/73/wq_thumb.gif", alt: "[委屈]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/9e/t_thumb.gif", alt: "[吐]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/f3/k_thumb.gif", alt: "[打哈欠]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/27/bba_thumb.gif", alt: "[抱抱]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7c/angrya_thumb.gif", alt: "[怒]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/5c/yw_thumb.gif", alt: "[疑問]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/a5/cza_thumb.gif", alt: "[饞嘴]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/70/88_thumb.gif", alt: "[拜拜]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/e9/sk_thumb.gif", alt: "[思考]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/24/sweata_thumb.gif", alt: "[汗]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7f/sleepya_thumb.gif", alt: "[困]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6b/sleepa_thumb.gif", alt: "[睡覺]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/90/money_thumb.gif", alt: "[錢]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/0c/sw_thumb.gif", alt: "[失望]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/cool_thumb.gif", alt: "[酷]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/8c/hsa_thumb.gif", alt: "[花心]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/49/hatea_thumb.gif", alt: "[哼]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/36/gza_thumb.gif", alt: "[鼓掌]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/dizzya_thumb.gif", alt: "[暈]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1a/bs_thumb.gif", alt: "[悲傷]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/62/crazya_thumb.gif", alt: "[抓狂]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/h_thumb.gif", alt: "[黑線]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6d/yx_thumb.gif", alt: "[陰險]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/89/nm_thumb.gif", alt: "[怒罵]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/hearta_thumb.gif", alt: "[心]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/ea/unheart.gif", alt: "[傷心]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/58/pig.gif", alt: "[豬頭]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d6/ok_thumb.gif", alt: "[ok]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d9/ye_thumb.gif", alt: "[耶]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/good_thumb.gif", alt: "[good]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/c7/no_thumb.gif", alt: "[不要]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d0/z2_thumb.gif", alt: "[贊]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/40/come_thumb.gif", alt: "[來]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d8/sad_thumb.gif", alt: "[弱]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/91/lazu_thumb.gif", alt: "[蠟燭]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/6a/cake.gif", alt: "[蛋糕]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/d3/clock_thumb.gif", alt: "[鍾]" }, { src: "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/1b/m_thumb.gif", alt: "[話筒]" }] }] editor.customConfig.onchange = function(html) { // html 即變化之後的內容 $('#code').text(html) } // 或者 var editor = new E( document.getElementById('editor') ) editor.create(); //富文字編輯器wangEditor的全屏外掛，適用於V3,在wangEditor的create方法呼叫後，再呼叫外掛的初始化方法 E.fullscreen.init('#editor'); </script> </body> </html>