kindeditor在dialog弹出框中无法获得焦点

前几天遇到一个问题,当kindeditor在dialog中使用时,无法获得焦点。

使用的是最通用的kindeditor初始化代码和dialog弹出框代码,代码如下:

KindEditor.ready(function (K) {
            var editor1 = K.create('#solution', {
                resizeType: 2,
                resizeMode: 2,
                width: "600px",
                minWidth: "600px",
                height: "400px",
                allowPreviewEmoticons: false,
                allowImageUpload: false,
                afterBlur: function () {
                    this.sync();
                },
                items: [
'source', 'selectall', 'quickformat', '|', 'fontname', 'fontsize', '|', 'undo', 'redo', 'cut', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'lineheight', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'image', 'link']
            });
        });

        $(function () {
            //解决弹出框
            $(".solution").live('click', function () {
                $("#solutionDiv").dialog({
                    title: "解决bug",
                    autoOpen: false,
                    height: 350,
                    width: 800,
                    open: function () {
                            KindEditor.create('#solution', {
                                resizeType: 0,
                                allowPreviewEmoticons: false,
                                allowImageUpload: false,
                                afterBlur: function () {
                                    this.sync();
                                },
                                items: [
'source', 'selectall', 'quickformat', '|', 'fontname', 'fontsize', '|', 'undo', 'redo', 'cut', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'lineheight', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'image', 'link']
                            });
                    },
                    buttons: [
				        {
				            text: "确定",
				            click: function () {
				                //获得解决方案和bug的id
				                var id = $("#bugID").val();
				                var userID = $("#userID").val();
				                var solution = $("#solution").val();
				                $.ajax({
				                    type: "post",
				                    url: "solution.aspx/Update",
				                    data: "{'id':'" + id + "','solution':'" + solution + "','userID':'" + userID + "'}",
				                    dataType: "json",
				                    contentType: "application/json; charset=utf-8",
				                    success: function (data) {
				                        if (data.d == "1") {
				                            alert("成功提交解决方案!");
				                            location.reload();
				                        }
				                        else {
				                            alert("提交失败");
				                        }
				                    }
				                });
				                $(this).dialog("close");
				            }
				        },
				        {
				            text: "取消",
				            click: function () {
				                $(this).dialog("close");
				            }
				        }
			        ]
                });
                $("#solutionDiv").dialog("open");
            });

但这样写,有个问题,就是dialog弹出框中的kindeditor无法获得焦点,以及其他操作



后来查了一些资料,已经尝试了一些方法,最后发现,在dialog的open方法中初始化kindeditor,代码如下

$(".solution").live('click', function () {
                $("#solutionDiv").dialog({
                    title: "解决bug",
                    autoOpen: false,
                    height: 350,
                    width: 800,
                    open: function () {
                            KindEditor.create('#solution', {
                                resizeType: 0,
                                allowPreviewEmoticons: false,
                                allowImageUpload: false,
                                afterBlur: function () {
                                    this.sync();
                                },
                                items: [
'source', 'selectall', 'quickformat', '|', 'fontname', 'fontsize', '|', 'undo', 'redo', 'cut', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'lineheight', '|', 'justifyleft', 'justifycenter', 'justifyright', '|', 'image', 'link']
                            });
                    },
                    buttons: [
				        {
				            text: "确定",
				            click: function () {
				                //获得解决方案和bug的id
				                var id = $("#bugID").val();
				                var userID = $("#userID").val();
				                var solution = $("#solution").val();
				                $.ajax({
				                    type: "post",
				                    url: "solution.aspx/Update",
				                    data: "{'id':'" + id + "','solution':'" + solution + "','userID':'" + userID + "'}",
				                    dataType: "json",
				                    contentType: "application/json; charset=utf-8",
				                    success: function (data) {
				                        if (data.d == "1") {
				                            alert("成功提交解决方案!");
				                            location.reload();
				                        }
				                        else {
				                            alert("提交失败");
				                        }
				                    }
				                });
				                $(this).dialog("close");
				            }
				        },
				        {
				            text: "取消",
				            click: function () {
				                $(this).dialog("close");
				            }
				        }
			        ]
                });
                $("#solutionDiv").dialog("open");
            });


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
1. 首先,在 `application\extra` 目录下新建一个 `config.php` 文件,添加以下配置: ```php <?php return [ 'upload_path' => '/uploads/', //上传文件保存的路径 'upload_exts' => 'gif,jpg,jpeg,png,bmp', //允许上传的文件类型 ]; ``` 2. 在 `application\index\controller` 目录下新建一个 `Upload.php` 控制器,添加以下代码: ```php <?php namespace app\index\controller; use think\Controller; use think\Request; class Upload extends Controller { public function uploadImage() { $file = request()->file('imgFile'); $info = $file->validate(['ext' => config('upload_exts')])->move(ROOT_PATH . 'public' . config('upload_path')); if ($info) { $image_url = config('upload_path') . $info->getSaveName(); return json(['error' => 0, 'url' => $image_url]); } else { return json(['error' => 1, 'message' => $file->getError()]); } } } ``` 3. 在 `application\index\view` 目录下新建一个 `upload_image.html` 文件,添加以下代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传图片</title> </head> <body> <form action="<?php echo url('upload/uploadImage'); ?>" enctype="multipart/form-data" method="post"> <input type="file" name="imgFile"> <input type="submit" value="上传"> </form> </body> </html> ``` 4. 修改 `kindeditor` 配置文件 `public\static\kindeditor\config.js`,添加以下代码: ```javascript //上传图片配置 imageUploadJson = '<?php echo url("upload/uploadImage"); ?>'; ``` 5. 在 `public\static\kindeditor\plugins` 目录下新建一个 `image.php` 文件,添加以下代码: ```php <?php //获取上传文件保存的路径 $save_path = $_SERVER['DOCUMENT_ROOT'] . $_POST['save_path']; //获取要上传的文件 $file = $_FILES['imgFile']; //上传文件 if (move_uploaded_file($file['tmp_name'], $save_path . $file['name'])) { $image_url = $_POST['base_url'] . $_POST['save_path'] . $file['name']; //返回上传结果 echo json_encode(['error' => 0, 'url' => $image_url]); } else { echo json_encode(['error' => 1, 'message' => '上传失败']); } ``` 6. 修改 `kindeditor` 的 `php` 上传文件处理程序 `public\static\kindeditor\php\upload_json.php`,添加以下代码: ```php //获取要保存的文件路径和文件名 $save_path = $_SERVER['DOCUMENT_ROOT'] . $_POST['save_path']; $file_name = uniqid() . strrchr($_FILES['imgFile']['name'], '.'); //上传文件 if (move_uploaded_file($_FILES['imgFile']['tmp_name'], $save_path . $file_name)) { $image_url = $_POST['base_url'] . $_POST['save_path'] . $file_name; //返回上传结果 echo json_encode(['error' => 0, 'url' => $image_url]); } else { echo json_encode(['error' => 1, 'message' => '上传失败']); } ``` 7. 在浏览器中访问 `http://localhost/index/upload_image.html`,上传一张图片测试。如果上传成功,会返回图片的 URL 地址。在 `kindeditor` 中也可以正常上传图片了。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值