HTML富文本编辑器wangEditor的使用
官网
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>
<!-- 引入全屏 CSS，如不需要全屏功能可注释掉 -->
<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>
<!--全屏使用 JS，如不需要全屏功能可注释掉-->
<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
window.wangEditor.fullscreen = {
// editor create之后调用
init: function(editorSelector) {
//添加查看全屏按钮
$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_fullscreen" href="###" οnclick="window.wangEditor.fullscreen.toggleFullscreen(\'' + editorSelector + '\')">全屏</a></div>');
//添加查看源码按钮
$(editorSelector + " .w-e-toolbar").append('<div class="w-e-menu"><a class="_wangEditor_btn_SourceCode" href="###" οnclick="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());
}
};
这两个是直接使用的CDN
-
jquery.min.js -
wangEditor.min.js
效果
作者：不敲代码的攻城狮
出处：https://www.cnblogs.com/leigq/
任何傻瓜都能写出计算机可以理解的代码。好的程序员能写出人能读懂的代码。
