WangEditor基本使用

最新推荐文章于 2025-06-29 13:11:40 发布

夏已微凉、

最新推荐文章于 2025-06-29 13:11:40 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： # 富文本编辑器文章标签： WangEditor

本文链接：https://blog.youkuaiyun.com/qq_36025814/article/details/90106263

富文本编辑器专栏收录该内容

21 篇文章

订阅专栏

WangEditor基本使用

效果图

1、使用到的API
创建一个编辑器 https://www.kancloud.cn/wangfupeng/wangeditor3/335769
获取内容 https://www.kancloud.cn/wangfupeng/wangeditor3/335775
使用textarea https://www.kancloud.cn/wangfupeng/wangeditor3/430149
上传图片到服务器 https://www.kancloud.cn/wangfupeng/wangeditor3/335782
2、步骤：
(1)、在富文本写内容，同步数据到textarea框，textarea框隐藏，后台获取textarea的数据
(2)、自定义图片上传路径，把返回的url渲染到富文本框，去除默认的alert()弹出框
3、代码

<html>
	<head>
		<title>WangEditor基本使用</title>
		<style>
		/*设置编辑框高度*/
		.w-e-text-container{
			height: 500px !important;
		}
		</style>
		<!-- 引入jquery -->
		<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
		<!-- 引入wangEditor插件 -->
		<script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
	</head>
	<body>
		<form id="form" method="post">
			<div id="contentDiv" style="width: 1000px;"></div>
			<textarea name="content" id="content" style="display:none" ></textarea>
		</form>
		<button id="btn1">获取富文本text内容</button>
		<button id="btn2">获取富文本html内容</button>
		<button id="btn3">获取表单信息</button>
		<button id="btn4">获取文本域内容</button>
	</body>
	<script>
		var E = window.wangEditor;
		var editor = new E('#contentDiv')
		var $text1 = $('#content');
		editor.customConfig.onchange = function (html) {
			// 监控变化，同步更新富文本内容到 textarea
			$text1.val(html);
		}
		editor.customConfig.uploadImgServer = '/index/public/upload?type=imgFile';	//自定义上传图片（改成自己写的图片上传方法的路径）
		editor.customConfig.uploadFileName = 'imgFile';	//自定义文件名 
		/* 这样的话PHP后台这样获取文件信息
		//将文件上传的信息取出赋给变量
        $name = $_FILES['imgFile']['name'];
        $tmp_name = $_FILES['imgFile']['tmp_name'];
        $size = $_FILES['imgFile']['size'];
        $error = $_FILES['imgFile']['error'];
		*/
		editor.customConfig.uploadImgHooks = {
			customInsert: function (insertImg, result, editor) {
				// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
				// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
		
				// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
				var url = result.url
				insertImg(url)
		
				// result 必须是一个 JSON 格式字符串！！！否则报错
			}
		}
		editor.customConfig.customAlert = function (info) {	//关闭默认提示信息
			// info 是需要提示的内容
			//alert('自定义提示：' + info)
		}
		// 或者 var editor = new E( document.getElementById('content') )
		editor.create();
		$text1.val(editor.txt.html());
		
		//获取内容
		$('#btn1').click(function(){
			alert(editor.txt.text());	// 读取 text
		});
		$('#btn2').click(function(){
			alert(editor.txt.html());	// 读取 html
		});
		$('#btn3').click(function(){
			var formData = new FormData($( "#form" )[0]);
			alert(formData);
		});
		$('#btn4').click(function(){
			alert($('#content').val());	// 读取 html
		});
	</script>
</html>

注意：设置富文本高度

.w-e-text-container{
            height: 500px !important;
}