laravel wangEditor 的封装使用问题
利用laravel5.7+wangEditor3.1做文章内容发布.
添加文章部分的js代码,wangEditor3之后提交数据用了ajax的方式,对这种方式很不适应
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var E = window.wangEditor;
var editor = new E('#div1');
// editor.customConfig.debug = true;
// 配置服务器端地址
editor.customConfig.uploadImgServer = '/article/upimg';
// 设置文件的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: '/article/add',
method: 'POST',
dataType: "json",
data: {
'content': res,
'title': title
},
success: function (data) {
console.log(data.status);
if (data.status == 'ok') {
alert(' 操作成功');
window.location.href = '/article/list';
}
}
});
}, false);
附html代码:
<div class="form-group">
<label>标题</label>
<input name="title" type="text" class="form-control" placeholder="这里是标题" value="{{$data->title}}">
</div>
<div class="form-group">
<label>内容</label>
<div id="div1" class="toolbar">
{!! $data->content !!}
</div>
</div>
<button type="button" class="btn btn-default">提交</button>
在上面的基础上做文章编辑,数据发送部分有一些疑惑
laravel中的编辑路由定义为
Route::put('/edit/{article}',"AdminArticleController@edit");
第一个问题: url 部分需要获取文章的id值并以参数传递过去,form表单的形式很方便,
<form action="/article/edit/{{$data->id}}" method="POST">
但是在ajax中我该怎么办,另外ajax支持put吗.
第二个问题:我该怎么封装编辑和添加的方法了,每次写这么一大堆真是头疼, js真不知道该怎么封装了.
document.getElementById('btn').addEventListener('click', function () {
var res = editor.txt.html();
var title = $("input[name=title]").val();
$.ajax({
url:,
method: 'POST',
dataType: "json",
data: {
'content': res,
'title': title
},
success: function (data) {
console.log(data.status);
if (data.status == 'ok') {
alert(' 操作成功');
window.location.href = '/article/list';
}
},
error:function(data){
.......
}
});
}, false);
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论