虽然很简单,但是浪费了我不少时间,作下笔记
隐藏域设置值:
Ext.getCmp("hidArticleContent").setValue(HTMLEncode(Ext.getCmp("PLCenter").getBody().CKEDITOR.instances.content.getData()));
hidArticleContent 是隐藏域ID
HTMLEncode 是一个html编码js函数
Ext.getCmp("PLCenter").getBody().CKEDITOR.instances.content.getData()) 这部分是取得PLCenter Panel中的 ckeditor的编辑内容
表单提交设置
<form id="form1" runat="server" enctype="multipart/form-data" method="post">就是因为这个地方!开始还以为是安全的问题阻止提交,经过多次尝试,原来是这个问题!大意了!主要也是没想到!
ckeditor的引用
<ext:Panel runat="server" ID="PLCenter" Layout="Absolute" Region="Center" Title="">
<AutoLoad Url="../Article/CKEditor.aspx" Mode="IFrame" ></AutoLoad>
</ext:Panel>
引用页CKEditor.aspx的内容 (修改了一个,添加了一个上传图片的按钮!)
<form id="form1" runat="server">
<div>
<script type="text/javascript">
//<![CDATA[
window.CKEDITOR_BASEPATH = '/ckeditor/';
//]]>
</script>
<script src="/ckeditor/ckeditor.js?t=C6HH5UF" type="text/javascript"></script>
<textarea cols="80" id="content" name="fileUpload"> </textarea>
<script type="text/javascript">
CKEDITOR.replace('content', addUploadButton(this));
function addUploadButton(editor) {
CKEDITOR.on('dialogDefinition', function (ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents('info');
infoTab.add({
type: 'button',
id: 'upload_image',
align: 'center',
label: '上传',
onClick: function (evt) {
var thisDialog = this.getDialog();
var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
var txtUrlId = txtUrlObj.getInputElement().$.id;
addUploadImage(txtUrlId);
}
}, 'browse'); //place front of the browser button
}
});
}
function addUploadImage(theURLElementId) {
var uploadUrl = "../Uploader.aspx"; //这是我自己的处理文件/图片上传的页面URL
var imgUrl = window.showModalDialog(uploadUrl);
//在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。
//更多window.showModalDialog的使用方法参考
var urlObj = document.getElementById(theURLElementId);
urlObj.value = imgUrl;
urlObj.fireEvent("onchange"); //触发url文本框的onchange事件,以便预览图片
}
</script>
</form>