在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="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>