wangeditor ajax,laravel wangEditor 的封装使用问题

利用laravel5.7+wangEditor3.1做文章内容发布.

添加文章部分的js代码,wangEditor3之后提交数据用了ajax的方式,对这种方式很不适应

$.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代码:

标题

内容

{!! $data->content !!}

提交

在上面的基础上做文章编辑,数据发送部分有一些疑惑

laravel中的编辑路由定义为

Route::put('/edit/{article}',"AdminArticleController@edit");

第一个问题: url 部分需要获取文章的id值并以参数传递过去,form表单的形式很方便,

但是在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);