laravel wangEditor 的封装使用问题

发布于 2022-09-11 15:52:50 字数 3228 浏览 33 评论 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);

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文