wangeditor ajax,laravel 中 wangEditor 富文本编辑器使用指南
在本课程中,老师使用的富文本编辑器是 2.0 的版本,且输入区域使用的 textarea,但是在新的 3.0 版本中(新版本富文本编辑器只需要引用一个js文件即可),开发者不建议使用 textarea ,而采用输入区域 div元素。所以前后端交互也从原来的form 表单提交变成了ajax POST 请求提交,这样会导致两个问题:
1 前后端交互,如何实现表单验证的页面错误提示;
2 图片如何上传及回填富文本编辑器。
一 实现表单验证的错误提示
本课程中,我们使用的是 larvel 提供的 error 对象,并在页面加载时将 error 信息渲染到页面上,但由于在 3.x 版本的富文本编辑器中,请求方式变更为 ajax POST 请求,所以我们需要 laravel 给客户端的ajax程序响应一个包含错误信息的 json 数据,这样客户端的 ajax 回调函数接收并解析 json 数据,拼接 DOM 元素并将验证错误信息动态添加到页面上,完成前后端验证交互。
二 图片上传及图片回填到富文本编辑器
本课程中,图片上传的 name 值 为 “wangEditorH5File”,在新版本中,这个值需要自己手动设置,具体操作请看如下源代码。
js文件内容
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var E = window.wangEditor;
var editor = new E('#div1', '#div2');
// 配置服务器端地址
editor.customConfig.uploadImgServer = '/posts/image/upload';
// 设置文件的name值
editor.customConfig.uploadFileName = 'wangEditorH5File';
// 设置 headers(举例)
editor.customConfig.uploadImgHeaders = {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
};
// 上传文件监听
editor.customConfig.uploadImgHooks = {
customInsert: function (insertImg, result, editor) {
var url = result.data;
//上传图片回填富文本编辑器
insertImg(url);
}
};
editor.create();
document.getElementById('btn').addEventListener('click', function () {
var res = editor.txt.html();
var title = $("input[name=title]").val();
$.ajax({
url: '/posts',
method: 'POST',
dataType: "json",
data: {
'content': res,
'title': title
},
success: function (data) {
if (data.error != 0) {
return;
}
//js 跳转
window.location.href = '/posts';
}, error: function (data) {
var json = JSON.parse(data.responseText);
// 动态在页面添加错误提示信息
str = '
$.each(json, function (i, n) {
str += '
' + n[0] + '';
});
str += '
';
$(".alert").remove();
$("#btn").before(str);
}
});
}, false);
html文件内容
标题
内容
提交
PostController.php文件
...
class PostController extends Controller
{
....
//上传图片
public function imageUpload(Request $request)
{
$path = $request->file('wangEditorH5File')->storePublicly(md5(time()));
$data = asset('storage/' . $path);
echo json_encode(array(
"error" => 0,
"data" => $data,
));
}
...
}
filesystems.php文件
...
'default' => 'public',
...
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app'),
],
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL').'/storage',
'visibility' => 'public',
],
's3' => [
'driver' => 's3',
'key' => env('AWS_KEY'),
'secret' => env('AWS_SECRET'),
'region' => env('AWS_REGION'),
'bucket' => env('AWS_BUCKET'),
],
],
...
路由设置
//图片上传
Route::post('/posts/image/upload', '\App\Http\Controllers\PostController@imageUpload');
注意,还需要设置上传文件的软链接,因为上传的图片无法访问除 public 以外的目录。
php artisan storage:link
wangeditor ajax,laravel 中 wangEditor 富文本编辑器使用指南相关推荐
- kind富文本编辑器_在项目中集成富文本编辑器
前 言 现在学程序的都离不开 Markdown 语法了吧,Markdown 已经成为典型的转换为HTML的非正式规范和参考实现,现在市场上也出现了许多Markdown实现,在基本语法之上额外增加了 ...
- php中html富文本编辑器,php + wangEditor 富文本编辑器的配置
小编最近做了一个项目,在用户发表文章的模块上,考虑到用户编写文章时的排版需求.要借助富文本编辑器.搜索发现,现在有很多免费的编辑器插件.例如:百度的Ueditor.Summernote .但是这几个插 ...
- 项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择? 先看看市面上都有哪些可用的富文本编辑器: TinyMCE(插件式的,支持 Vue,React,Angular 框架) ...
- 在前端网页中加入富文本编辑器
UEditor Docs这是UEditor官方网站,网站里有官方使用教程. 1.先把富文本编辑器的压缩包下载到本地,在我发布的资源里下载(不要积分) 解压之后主要是这个东西 2.把这个解压文件拖动到e ...
- TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
- 浏览器中插入富文本编辑器
常用的富文本编辑器有CKEditor.UEEditor.TinyEditor.KindEditor等.以下以kindeditor编辑器的使用为例. 1.官网下载KindEditor编辑器http:// ...
- Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .
首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317 这篇文章中的做法 ...
- Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件 先安装一下: npm i vue-quill-editor -s 下载之后 去components文件夹中新建一个文件夹 KEditor,然 ...
- Django中summernote富文本编辑器完整前后端
summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 Summernote ...
最新文章
- 微信小程序开发视频教程新鲜出炉
- Oracle在linux下使用小技巧
- 关于你,关于我. 你好 5G
- openshift命令_使用命令行工具创建WildFly OpenShift应用程序
- 【C语言】不能使用	while(fgetc(fp)!=EOF)进行文件复制
- jsp校园二手交易平台的设计答辩PPT模板
- Python: 组合管理与蒙特卡洛方法实现
- spring扩展点一:BeanDefinitionRegistryPostProcessor
- 【第七篇】Vue实战综合案例
- VmPlayer上设置主机和windows虚拟机文件夹共享
- Pandoc 安装与使用
- detectron中的blobs
- jq输出html 单引号引号转义符,jQuery.parseJSON由于JSON中的单引号转义而引发“无效JSON”错误...
- 一百元的钞票能拍卖出多少钱?
- PPP over Ethernet(PPPoE)协议
- android studio计时器怎么用,android - Android Studio:启动倒数计时器时应用崩溃
- C/C++宏的基本使用方法附例子讲解
- Matrix Profile介绍
- 数学图形(1.8) 圆外旋轮线
- Prometheus+Alertmanager+webhook-dingtalk实现钉钉告警
热门文章
- Arcgis系列——gis读取ascii文件头格式
- 行为识别论文笔记|I3D S3D R(2+1)D P3D CSN
- 【成功案例】风起亚洲助力,创业比赛夺冠
- C# 4 中的 Dynamic 关键字
- 输入水的夸脱数,求水分子
- 计算机模拟盘实验流程,精馏过程的计算机模拟实验.pdf
- ASP.NET 使用RegularExpressionValidator控件(数据输入格式验证)
- 三个小故事,读懂印章的“前世今生”
- python if语句格式
- 【推荐算法】从零开始做推荐(二)——TopK推荐的评价指标,计算原理与样例