The front page and JS are as follows:
<form class="layui-form" action="" > <textarea name="tweets" id="tweets" style="display: none;"></textarea> <script> layui.use('layedit', function(){ var layedit = layui.layedit; layedit.build('demo'); //Build editor }); </script> <div class="layui-from-item" style="margin-top: 15px;padding-bottom: 200px;"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="tweets_sub" >Submission</button> <button type="reset" class="layui-btn-primary layui-btn">Reset</button> </div> </div> </form> </body> <script type="text/javascript" src="__PLUGINS__/axios/axios.min.js"></script> <script> layui.use(['layedit','form'], function(){ var form=layui.form; var layedit = layui.layedit; var up_url="{:url('Upload/doup')}";//Upload image url layedit.set({ uploadImage: { url:up_url //Interface url ,type: 'post' //Default post } }); //Build editor var index=layedit.build('tweets'); form.on('submit(tweets_sub)', function(data){ //layer.msg(JSON.stringify(data.field)); //Get editor value var tweets_content=layedit.getContent(index); //ajax submission processing axios.post("{:url('Tweets/do_add')}",{"content":tweets_content}) .then(function(response){ console.log(response); if(response.data.code==1){ layer.alert(response.data.msg,{icon:6},function () { window.location.href="{:url('tweets/index')}" }); }else{ layer.alert(response.data.msg,{icon:5},function(){ window.location.reload(); }); } }) .catch(function(error){ console.log(error); }); return false; }); }); </script>
This is not the same as Baidu's Ueditor I used before. Here, you can upload pictures directly and process them
Var up ﹣ / / upload image url layedit.set({ uploadImage: { url: up uurl / / interface url , type: 'post' / / default post } });
The processing interface PHP file is as follows
<?php /** * Created by PhpStorm. * User: martinby * Date: 2018/3/5 * Time: 23:25 */ //Upload class of layui namespace app\admin\controller; use think\Controller; use think\Request; class Upload extends Controller{ public function doup(){ $file=Request::instance()->file('file'); if(empty($file)){ $result["code"] = "1"; $result["msg"] = "Please select a picture"; $result['data']["src"] = ''; }else{ // Move to the framework application root directory / public/uploads / $info = $file->move(ROOT_PATH . 'public/static' . DS . 'uploads' ); if($info){ $name_path =str_replace('\\',"/",$info->getSaveName()); //Get upload information after successful upload $result["code"] = '0'; $result["msg"] = "Upload success"; $result['data']["src"] ="/public/static/uploads/".$name_path; }else{ // Upload failed to get error information $result["code"] = "2"; $result["msg"] = "Upload error"; $result['data']["src"] =''; } } return json_encode($result); } }
I also copy this PHP processing file from the Internet and modify it
To upload a picture, you must create the uploads folder in the path specified in your code. Otherwise, the upload will fail. If there are already uploaded pictures under uploads, but the displayed pictures report errors, check whether the return path is correct