基于thinkphp5框架实现wangEditor富文本编辑器上传图片

<link href="/wangeditor/style.css" rel="stylesheet">  
		<style>
			body {
			    margin: 0;  
			    padding: 0;  
			}
			#editor—wrapper {
			  border: 1px solid #ccc;
			  /* width: 50%; */
			  /* float: left; */
			  height: 900px;
			  box-sizing: border-box; /* 包括边框和内边距在宽度内 */
			}
			#toolbar-container { border-bottom: 1px solid #ccc; }
			#editor-container { height: 700px; }
			#editor-content-view {
				/* float: left; */
				/* width: 50%; */
				height: 900px;
				background-color: #f5f5f5; /* 背景色为浅灰色 */
				border: 1px solid #ccc;
				border-radius: 5px; /* 边角圆润度为5px */
				box-sizing: border-box; /* 包括边框和内边距在宽度内 */ 
			    /* 当内容超出这个高度时,显示垂直滚动条 */
				overflow-y: auto;
			}
			.styled-div {  
            background-color: #f5f5f5; /* 浅灰色背景 */  
            border: 1px solid #ccc; /* 灰色边框 */  
            border-radius: 5px; /* 圆角 */  
            padding: 10px; /* 内边距 */  
            margin-top: 20px; /* 上外边距 */  
            width: 100%; /* 宽度为100% */  
            max-width: 600px; /* 最大宽度为600px */  
        }  
  
        .styled-div textarea {  
            width: 100%; /* 宽度为100% */  
            height: 100px; /* 高度为100px */  
            outline: none; /* 无轮廓 */  
            border: none; /* 无边框 */  
            resize: none; /* 禁止调整大小 */  
            background-color: transparent; /* 透明背景 */  
            font-family: Arial, sans-serif; /* 字体 */  
            font-size: 16px; /* 字体大小 */  
            color: #333; /* 字体颜色 */  
            padding: 5px; /* 内边距 */  
        } 
		</style>
	</head>
	<body>
	    <div id="editor—wrapper">  
	        <div id="toolbar-container"><!-- 工具栏 --></div>  
	        <div id="editor-container"><!-- 编辑器 --></div>  
	    </div>
		<!-- 页面显示 -->
		<h1>实时在线预览</h1>
		<div id="editor-content-view" class="editor-content-view"></div>  
		<!-- 服务器保存样式 -->
		<h1>实时代码产出预览</h1>
		<div class="styled-div">
			<textarea id="editor-content-textarea" readonly></textarea>
		</div> 
		
	    <script src="/wangeditor/index.js"></script>  
	    <script>  
	        const E = window.wangEditor;  
	  
	        // 切换语言  
	        const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN';  
	        E.i18nChangeLanguage(LANG);  
	  
	        // 创建编辑器实例  
	        const editor = E.createEditor({  
	            selector: '#editor-container',  
	            html: '<p>Ctrl&nbsp;+s&nbsp;进行保存</p><p>插入图片请注意换行</p><p>单张图片大小最高可为10M</p>',  
	            config: {
	                placeholder: 'Type here...',  
	                MENU_CONF: {  
	                    uploadImage: {  
							server: 'http://localhost/uploadimage',
	                        fieldName: 'first',
							// 设置最大图片尺寸为10M
							maxFileSize: 10 * 1024 * 1024, 
							// 5M 以下插入 base64
	                        // base64LimitSize: 5 * 1024 * 1024 ,
							onBeforeUpload(file) {
							console.log('onBeforeUpload', file)
							
							return file // will upload this file
							// return false // prevent upload
							  },
							  onProgress(progress) {
							console.log('onProgress', progress)
							  },
							  onSuccess(file, res) {
							console.log('onSuccess', file, res)
							  },
							  onFailed(file, res) {
							alert(res.message)
							console.log('onFailed', file, res)
							  },
							  onError(file, err, res) {
							alert(err.message)
							console.error('onError', file, err, res)
							  },
	                    }  
	                },  
	                onChange(editor) {  
	                    const html = editor.getHtml();  
	                    document.getElementById('editor-content-view').innerHTML = html;  
	                    document.getElementById('editor-content-textarea').value = html;  
	                    // console.log(html);  
	                }  
	            }  
	        });  
	  
	        // 创建工具栏实例  
	        const toolbar = E.createToolbar({  
	            editor,  
	            selector: '#toolbar-container',  
	            config: {}  
	        });  
</script>  
	</body>  

上述代码为前端代码

下述代码为服务端代码

路由请自己配置,并修改JS中的server
js中的filedName,与服务端获取文件对象名称一致
 

public function uploadImage()  
	{  
	    // 获取上传文件对象  
	    $file = request()->file('first');  
	  
	    // 检查是否有文件上传  
	    if (empty($file)) {  
	        return Response::create([  
	            "errno" => 1,  
	            "message" => 'No file uploaded'  
	        ], 'json', 400);  
	    }  
	  
	    // 获取文件名  
	    $fileName = $file->getInfo('name');  
	  
	    // 指定保存路径(确保目录存在并且有写入权限)  
	    $savePath = '/play/images/defult/' . $fileName;  
$info = $file->move(ROOT_PATH .'/public/play/images/defult/',$fileName,false);
	  
	    if (!$info) {  
	        // 上传失败获取错误信息  
	        return Response::create([  
	            "errno" => 1,  
	            "message" => $file->getError()  
	        ], 'json', 400);  
	    } else {  
	        // 上传成功 获取上传文件信息  
	        $filePath = $savePath; // 使用之前定义的保存路径  
	        return Response::create([  
	            "errno" => 0,  
	            "data" => [  
	                "url" => $filePath, // 图片 src ,必须  
	                "alt" => "Image Description", // 图片描述文字,非必须,可以根据需要进行修改  
	                "href" => $filePath // 图片的链接,必须,可以根据需要进行修改  
	            ]  
	        ], 'json', 200);  
	    }  
	}

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值