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

时间:2023-03-09 06:32:41
在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][];
var extAttr = upAttrs[i][]; if ($this.attr(urlAttr)) {
op[urlAttr] = $this.attr(urlAttr);
op[extAttr] = $this.attr(extAttr) || upAttrs[i][];
}
}); $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, , function () {
self.sync();
K('form[name=example]')[].submit();
});
KindEditor.ctrl(self.edit.doc, , function () {
self.sync();
KindEditor('form[name=example]')[].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>