1. 首页
  2. 文章中心
  3. 前端

HTML富文本编辑器wangEditor的使用

56 阅读 0 评论
我是靠谱客的博主 温暖自行车，最近开发中收集的这篇文章主要介绍HTML富文本编辑器wangEditor的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

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

官网

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

效果

在这里插入图片描述

最后

以上就是温暖自行车为你收集整理的HTML富文本编辑器wangEditor的使用的全部内容，希望文章能够帮你解决HTML富文本编辑器wangEditor的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(37)

相关文章

guns+WangEditor图片上传与数据过滤实现
guns+WangEditor图片上传与数据过滤实现
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
引入wangEditor或ueditor时工具栏部分无效问题
引入wangEditor或ueditor时工具栏部分无效问题
关于wangEditor3富文本编辑器的使用做一个简单的介绍
关于wangEditor3富文本编辑器的使用做一个简单的介绍
HTML富文本编辑器wangEditor的使用
HTML富文本编辑器wangEditor的使用
vue-cli使用
vue-cli使用
在vue中使用wangEditor富文本编辑器wangEditor编辑器 Vue基本配置项
在vue中使用wangEditor富文本编辑器wangEditor编辑器 Vue基本配置项
vue中使用wangEditor
vue中使用wangEditor

评论列表共有 0 条评论

立即
投稿
返回
顶部