wangEditer上传本地图片

最新推荐文章于 2025-06-12 10:21:10 发布

早起晨练啊

最新推荐文章于 2025-06-12 10:21:10 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/Lonely_Devil/article/details/89481813

js 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了富文本编辑器WangEditor的使用方法，包括如何配置菜单、上传图片、读取HTML和Text内容等核心功能，适合前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>发布文章</title>
		<script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
	</head>
	<body>
		<div id="div1"></div>
		<button id="btn1">获取html</button>
		<button id="btn2">获取text</button>
		
		<div id="">
			$content$
		</div>
		
		<script type="text/javascript">
		    var E = window.wangEditor;
		    var editor = new E('#div1');
		    
		    editor.customConfig.menus = [
	            'head',  // 标题
	            'bold' /** 粗体*/, 'fontSize' /** 字号 */, 'fontName' /** 字体 */,'italic' /** 斜体 */, 
	            'underline',  // 下划线
	            'strikeThrough',  // 删除线
	            'foreColor',  // 文字颜色
	            'backColor',  // 背景颜色
	            'link',  // 插入链接
	            'list',  // 列表
	            'justify',  // 对齐方式
	            'quote',  // 引用
	            'emoticon',  // 表情   打开后支持表情功能
	            'image',  // 插入图片
	            'table',  // 表格
	            'video',  // 插入视频
	            'code',  // 插入代码
	            'undo',  // 撤销
	            'redo'  // 重复
            ]

		    
		    // 配置服务器端地址
		    //本地配置
		    //ip路径需与访问ip一致,要么同为localhost ,要么同为ip地址，跨域需要服务端配置跨域
		    editor.customConfig.uploadImgServer = 'http://localhost:8080/app/uploadHeadPicture'
		    editor.customConfig.uploadFileName = 'file'
		 
			// 进行下文提到的其他配置
			// 将图片大小限制为 3M
		    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
			// 限制一次最多上传 5 张图片
		    editor.customConfig.uploadImgMaxLength = 5
		 
			 //自定义上传图片事件
	        editor.customConfig.uploadImgHooks = {
	            before: function(xhr, editor, files) {
	
	            },
	            success: function(xhr, editor, result) {
	                console.log("上传成功");
	            },
	            //此处失败是服务端返回有数据，但自动设置图片出错，一般是返回数据格式问题
	            fail: function(xhr, editor, result) {
	                console.log("上传失败,原因是" + result);
	                console.log(result);
	            },
	            error: function(xhr, editor) {
	                console.log("上传出错");
	            },
	            timeout: function(xhr, editor) {
	                console.log("上传超时");
	            },
	            
	            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
			    // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
			    customInsert: function (insertImg, result, editor) {
			        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
			        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
			
			        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
			       insertImg(result.data.url)
			
			        // result 必须是一个 JSON 格式字符串！！！否则报错
			    
			    }
	            
	        }
		    
		    editor.create();
		
		    document.getElementById('btn1').addEventListener('click', function () {
		        // 读取 html
		        alert(editor.txt.html())
		    }, false)
		
		    document.getElementById('btn2').addEventListener('click', function () {
		        // 读取 text
		        alert(editor.txt.text())
		    }, false)
		
		</script>
		
	</body>
</html>

心到抢票抢票软件 https://www.xdticket.com/