Laravel结合wangEditor3富文本编辑器实现文章发布、多图片上传

写在前面
①定义路由

Route::post('article/image/upload', 'ArticleController@imageUpload');

②修改配置文件config/filesystems.php，其他默认就好。

//    'default' => env('FILESYSTEM_DRIVER', 'local'),'default' => env('FILESYSTEM_DRIVER', 'public'),

③上传的图片无法访问除 public 以外的目录，所以要设置上传文件的软链接，控制台执行以下命令。

php artisan storage:link

官方文档地址

1、首先将资源文件引入，上方官方文档中已经有了，这里不再赘述，先放HTML代码。

html代码，head部分放csrf_token，页面上用form-group包裹只是为了样式，也可以通过margin等实现

如果将编辑器放在form中会出现“Uncaught TypeError: Cannot read property ‘type’ of undefined”和”Assertion failed: Input argument is not an HTMLInputElement“等错误。

    <meta name="csrf-token" content="{{csrf_token()}}">

@section('main')<div class="col-md-8 col-md-offset-2" style="margin-top: 20px;"><div class="form-group" id="title"><label>标题</label><input name="title" type="text" class="form-control" placeholder="这里是标题"></div><div class="form-group"><label>内容</label><div id="editor"></div></div><button type="button" class="btn btn-default pull-right" onclick="releaseArticle()">提交</button></div>
@endsection

2、JS代码

<script type="text/javascript">$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});var E = window.wangEditorvar editor = new E('#editor')// 配置服务器端地址editor.customConfig.uploadImgServer = "{{url('article/image/upload')}}";// 设置文件的name值editor.customConfig.uploadFileName = 'wangEditorImage[]';//设置headerseditor.customConfig.uploadImgHeaders = {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')};// 将图片大小限制为 3Meditor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024// 限制一次最多上传 5 张图片editor.customConfig.uploadImgMaxLength = 5//自定义处理editor.customConfig.uploadImgHooks = {success: function (xhr, editor, result) {console.log("上传成功");},fail: function (xhr, editor, 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 是服务器端返回的结果for (let i = 0; i < result.length; i++) {let url = result[i]insertImg(url)}}};editor.create()//发布文章function releaseArticle() {let title = $("input[name=title]").val();let article = editor.txt.html();$.ajax({url: " {{ url('article/add') }}",method: 'post',dataType: 'json',data: {'title': title,'article': article},success: function (data) {if (data.error != 0) {addErrorTips(data);return;}window.location.href = "/index";}, error: function (data) {addErrorTips(JSON.parse(data.responseText))}});}// 动态在页面添加错误提示信息function addErrorTips(data) {str = '<div class="alert alert-danger" role="alert">';str += '<li>' + data.message + '</li>';str += '</div>';$(".alert").remove();$("#title").before(str);}</script>

3、后台代码

//发布文章public function add(Request $request){if ($request->isMethod('post')) {$data = $request->all();$data['uid'] = $this->getCurrentUid();if (Article::create($data)) {return json_encode(array('error' => '0'));} else {return json_encode(array('message' => '文章发布失败'));}} else {return view('article/add');}}
//上传图片public function imageUpload(Request $request){$images = $request->file('wangEditorImage');if ($images != null && count($images) > 0) {$url = array();foreach ($images as $key => $val) {$url[] = asset('storage/' . $val->storePublicly(md5(time())));}}return json_encode($url);}

4、页面效果

Laravel结合wangEditor3富文本编辑器实现文章发布、多图片上传相关推荐

富文本编辑器CKeditor的配置和图片上传，看完不后悔
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...
egg.js开发文章发布接口(图片上传)(表单数据接口)
后台的代码: 在//app/config/config.default.js文件里: 添加crsf 这也是解决post请求时报403 foibidden的方法 //解决跨域config.secur ...
潭州课堂25班：Ph201805201 django 项目第三十九课后台文章发布，图片上传到 FastDFS后端实现七牛云讲解（课堂笔记）...
文章发布: # 1,从前台获取参数# 2,校验参数# 3,把数据保存到数据库# 4,返回执行结果到前台,(创建成功或失败) 自定义 froms.py 校验参数上传图片到七牛云注册 https:// ...
wangeditor ajax,laravel 中 wangEditor 富文本编辑器使用指南
在本课程中,老师使用的富文本编辑器是 2.0 的版本,且输入区域使用的 textarea,但是在新的 3.0 版本中(新版本富文本编辑器只需要引用一个js文件即可),开发者不建议使用 textarea ...
ssh 使用 wangeditor3 富文本编辑器上传图片方法
这段时间在搞一个小网站的项目,其中有个功能是可以网页上编辑文字和图片,能一起上传到数据库然后在页面上展现,当然还可以上传附件,不过我现在还没弄好,先把上传图片的功能记录一下. 说到这个wangedit ...
从web编辑器 UEditor 中单独提取图片上传，包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
富文本编辑器mavon-editor文章回显
继上篇安装使用mavon-editor,本篇讲述文章回显问题使用富文本编辑器就是为了实现发布帮助文档和公告新闻类的编辑功能,文章编辑完毕自然要在页面中展示出来.文章的排版和样式自然要同在编辑器中的一 ...
php从富文本中抓出图片url,富文本编辑器抓取秀米图片转存到七牛云
制作图文排版秀米是一个不错的平台,而百度的UEditor编辑器可以集成秀米的插件,两者结合使文章的排版变得更加的快捷方便. UEditor集成秀米教程 http://hgs.xiumi.us/uedi ...
富文本编辑器从word复制粘贴图片
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...

Laravel结合wangEditor3富文本编辑器实现文章发布、多图片上传

Laravel结合wangEditor3富文本编辑器实现文章发布、多图片上传相关推荐

最新文章

热门文章