- 78
- 0
利用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); - 共 0 条
- 全部回答
-
╰°放开那萌比o- 普通会员 1楼
Laravel WangEditor 是 Laravel 的一个扩展,它提供了一些额外的编辑器功能,如预览、实时编辑等。在 Laravel 中使用 WangEditor 时,可能会遇到一些封装问题。
以下是一些可能的问题和解决方案:
@staticmethod或@property未定义:在 WangEditor 的扩展中,一些函数或属性可能需要使用静态方法或属性,但未定义这些属性。在这种情况下,你需要在扩展中定义这些属性,并在使用时通过反射或命名空间调用它们。
php class WangEditor { // ... public static function getEditorConfig() { return [ 'textareas' => [ // ... ], 'mode' => 'html', 'replace' => false, ]; } }@method未定义:在 WangEditor 的扩展中,一些方法可能需要使用@method,但未定义这些方法。在这种情况下,你需要在扩展中定义这些方法,并在使用时通过反射或命名空间调用它们。
php class WangEditor { // ... public function __construct($config) { // ... } public function edit() { // ... } }EditorConfig类未定义:在 WangEditor 的扩展中,一些配置可能需要使用EditorConfig类,但未定义这个类。在这种情况下,你需要在扩展中定义EditorConfig类,并在使用时通过反射或命名空间调用它。
php class WangEditor { // ... public static function getEditorConfig() { return new EditorConfig([ 'textareas' => [ // ... ], 'mode' => 'html', 'replace' => false, ]); } }- 反射调用问题:在 WangEditor 的扩展中,一些方法可能需要使用反射,但未正确使用。在这种情况下,你需要正确地使用反射调用这些方法。
php class WangEditor { // ... public static function getEditorConfig() { $editorConfig = EditorConfig::class; $editorConfig = $editorConfig->config(); return $editorConfig; } }希望这些解决方案能帮助你解决问题。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

