账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    laravel wangEditor 的封装使用问题
    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);
    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • ╰°放开那萌比o- 普通会员 1楼

      Laravel WangEditor 是 Laravel 的一个扩展,它提供了一些额外的编辑器功能,如预览、实时编辑等。在 Laravel 中使用 WangEditor 时,可能会遇到一些封装问题。

      以下是一些可能的问题和解决方案:

      1. @staticmethod@property 未定义:在 WangEditor 的扩展中,一些函数或属性可能需要使用静态方法或属性,但未定义这些属性。在这种情况下,你需要在扩展中定义这些属性,并在使用时通过反射或命名空间调用它们。

      php class WangEditor { // ... public static function getEditorConfig() { return [ 'textareas' => [ // ... ], 'mode' => 'html', 'replace' => false, ]; } }

      1. @method 未定义:在 WangEditor 的扩展中,一些方法可能需要使用 @method,但未定义这些方法。在这种情况下,你需要在扩展中定义这些方法,并在使用时通过反射或命名空间调用它们。

      php class WangEditor { // ... public function __construct($config) { // ... } public function edit() { // ... } }

      1. EditorConfig 类未定义:在 WangEditor 的扩展中,一些配置可能需要使用 EditorConfig 类,但未定义这个类。在这种情况下,你需要在扩展中定义 EditorConfig 类,并在使用时通过反射或命名空间调用它。

      php class WangEditor { // ... public static function getEditorConfig() { return new EditorConfig([ 'textareas' => [ // ... ], 'mode' => 'html', 'replace' => false, ]); } }

      1. 反射调用问题:在 WangEditor 的扩展中,一些方法可能需要使用反射,但未正确使用。在这种情况下,你需要正确地使用反射调用这些方法。

      php class WangEditor { // ... public static function getEditorConfig() { $editorConfig = EditorConfig::class; $editorConfig = $editorConfig->config(); return $editorConfig; } }

      希望这些解决方案能帮助你解决问题。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部