zoukankan      html  css  js  c++  java
  • 在DWZ框架中整合kindeditor复文本框控件

    今天上午在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=" 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>
  • 相关阅读:
    ubuntu下如何安装hg(mercurial)?
    vi启动时报错:YouCompleteMe unavailable: requires Vim 7.4.1578+如何处理?
    linux中如何配置vim的别名为vi?
    linux shell中如何让$就表示为$呢?
    redhat 7.6下如何更新YUM源(仓库)?
    redhat下如何查看red hat版本号?
    javascript快速入门11--正则表达式
    javascript快速入门10--运算符,语句
    javascript快速入门9--引用类型
    javascript快速入门7--ECMAScript语法基础
  • 原文地址:https://www.cnblogs.com/flyerca/p/5336654.html
Copyright © 2011-2022 走看看