在DWZ框架中整合kindeditor复文本框控件

Posted 2020-07-01 天水一阶

今天上午在DWZ框架中整合kindeditor复文本框控件，发现上传图片是老是提示 “上传中，请稍候...”，上网查看别人说可能是文件路径问题，在想以前在其他项目中用这个控件一直没问题，到这里怎么会出现这个错误呢？

于是从源头一路查找过去， 找到上传配置 uploadJson: ‘/Scripts/kindeditor-4.1.4/asp.net/upload_json.ashx‘,于是打开上传文件的upload_json.ashx文件，发现context.Response.Write(JsonMapper.ToJson(result));这句中的JsonMapper命名空间找不到，由于打开以前其他项目，才发现原来少引用一个LitJSON.dll文件，所以在此记录一下分享给其他小伙伴，如果你也在DWZ框架中整合kindeditor控件的话，可按下面步骤进行：

 

(1).引用LitJSON.dll文件.

(2).在 dwz.ui.js文件中找到

 if ($.fn.xheditor) {
        $("textarea.editor", $p).each(function () {
            var $this = $(this);
            var op = { html5Upload: false, skin: ‘vista‘, tools: $this.attr("tools") || ‘full‘ };
            var upAttrs = [
                ["upLinkUrl", "upLinkExt", "zip,rar,txt"],
                ["upImgUrl", "upImgExt", "jpg,jpeg,gif,png"],
                ["upFlashUrl", "upFlashExt", "swf"],
                ["upMediaUrl", "upMediaExt", "avi"]
            ];

            $(upAttrs).each(function (i) {
                var urlAttr = upAttrs[i][0];
                var extAttr = upAttrs[i][1];

                if ($this.attr(urlAttr)) {
                    op[urlAttr] = $this.attr(urlAttr);
                    op[extAttr] = $this.attr(extAttr) || upAttrs[i][2];
                }
            });

            $this.xheditor(op);
        });
    }

在这个方法下面继续添加下面方法

 $("textarea.kindeditor", $p).each(function () {
        $.getScript(‘/Scripts/kindeditor-4.1.4/kindeditor-min.js‘, function () {
            KindEditor.basePath = ‘/Scripts/kindeditor-4.1.4/‘;
            var editor1 = KindEditor.create(‘#content‘, {
                cssPath: ‘/Scripts/kindeditor-4.1.4/plugins/code/prettify.css‘,
                uploadJson: ‘/Scripts/kindeditor-4.1.4/asp.net/upload_json.ashx‘,
                fileManagerJson: ‘/Scripts/kindeditor-4.1.4/asp.net/file_manager_json.ashx‘,
                allowFileManager: true,
                items: [
                            ‘preview‘, ‘|‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘, ‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘,
                            ‘removeformat‘, ‘lineheight‘, ‘strikethrough‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
                            ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘quickformat‘, ‘|‘, ‘image‘, ‘hr‘, ‘baidumap‘, ‘link‘, ‘|‘, ‘about‘],
                afterCreate: function () {
                    var self = this;
                    KindEditor.ctrl(document, 13, function () {
                        self.sync();
                        K(‘form[name=example]‘)[0].submit();
                    });
                    KindEditor.ctrl(self.edit.doc, 13, function () {
                        self.sync();
                        KindEditor(‘form[name=example]‘)[0].submit();
                    }); KindEditor(‘button[name=getHtml]‘).click(function (e) {
                        document.getElementById("NewsContentC").value = editor1.html();
                    });
                }
            });
            prettyPrint();
        });
    });

    if ($.fn.uploadify) {
        $(":file[uploader]", $p).each(function () {
            var $this = $(this);
            var options = {
                uploader: $this.attr("uploader"),
                script: $this.attr("script"),
                cancelImg: $this.attr("cancelImg"),
                fileDataName: $this.attr("fileDataName"),
                queueID: $this.attr("fileQueue") || "fileQueue",
                fileDesc: $this.attr("fileDesc") || "*.jpg;*.jpeg;*.gif;*.png;*.pdf",
                fileExt: $this.attr("fileExt") || "*.jpg;*.jpeg;*.gif;*.png;*.pdf",
                folder: $this.attr("folder"),
                auto: true,
                multi: true,
                onError: uploadifyError,
                onComplete: $this.attr("onComplete") || uploadifyComplete,
                onAllComplete: uploadifyAllComplete
            };
            if ($this.attr("onComplete")) {
                options.onComplete = DWZ.jsonEval($this.attr("onComplete"));
            }
            if ($this.attr("onAllComplete")) {
                options.onAllComplete = DWZ.jsonEval($this.attr("onAllComplete"));
            }
            if ($this.attr("scriptData")) {
                options.scriptData = DWZ.jsonEval($this.attr("scriptData"));
            }
            $this.uploadify(options);
        });
    }

（3）.在页面上添加

<!--kindeditor 开始-->
<link href="@Url.Content("~/Scripts/kindeditor-4.1.4/themes/default/default.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Scripts/kindeditor-4.1.4/plugins/code/prettify.css")" rel="stylesheet" type="text/css"/>

<script src="@Url.Content("~/Scripts/kindeditor-4.1.4/kindeditor.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kindeditor-4.1.4/lang/zh_CN.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kindeditor-4.1.4/plugins/code/prettify.js")" type="text/javascript"></script>
<!--kindeditor 开始-->

 

(4).在页面适合位置添加

<textarea id="content" name="content" tools="basic" style="width: 680px; height: 200px;" class="kindeditor">
</textarea>

 

另外，也可以定义一个公共变量，把kindeditor 配置中参数在页面上进行配置。

<script type="text/javascript">
    var GV = {}
    GV.kindeditor = { basePath: ‘/Scripts/kindeditor-4.1.4/‘, upload: ‘/Scripts/kindeditor-4.1.4/asp.net/upload_json.ashx‘, filemanager: ‘/Scripts/kindeditor-4.1.4/asp.net/file_manager_json.ashx‘ };
</script>