HTML富文本编辑器wangEditor的使用

叁歲伎倆 2022-04-03 05:45 414阅读 0赞

### 文章目录 ###

*   *  官网
     *  项目结构
     *  源码
     *  全屏插件
     *   *  CSS
         *  JS
     *  效果

## 官网 ##

[http://www.wangeditor.com/][http_www.wangeditor.com]  
**法官方文档已经讲得很清楚了，我这里只贴出代码，方便以后自己粘贴复制用，有兴趣的可以去看看官网。**

## 项目结构 ##

│  rich_text.html
    │
    ├─css
    │      wangEditor-fullscreen-plugin.css
    │
    └─js
            wangEditor-fullscreen-plugin.js

## 源码 ##

代码很简单，注释也很详细，直接看就好了。

<!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">
    	<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>
    
    	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    	<script type="text/javascript" src="https://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>

## 全屏插件 ##

### 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;
    }

### JS ###

**wangEditor-fullscreen-plugin.js**

这两个是直接使用的CDN

*  **`jquery.min.js`**
 *  **`wangEditor.min.js`**

## 效果 ##

![在这里插入图片描述][2019072915264796.gif]

[http_www.wangeditor.com]: http://www.wangeditor.com/
[2019072915264796.gif]: /images/20220403/fa8fcee171384c6395326c1ceffbbb9c.png