关于Ext.net结合ckeditor不通过隐藏域提交编辑器内容的问题!已解决

虽然很简单,但是浪费了我不少时间,作下笔记

隐藏域设置值:

         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>


    

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解 一、去http://cksource.com/下载这两个东西 二、去http://www.extjs.com/下载ext-2.3.0 三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4,取出解压后的文件夹,真接放到站点根目录,目录结构为: WEBROOT |--ckeditor |--finder |--ext-2.3.0 |--js |--css 修改ckeditor目录下的config.js如下: CKEDITOR.editorConfig = function( config ) { config.language = 'zh-cn'; //配置语言 config.uiColor = 'DFE8F6'; config.skin = 'office2003'; config.height = 320; config.width = '100%'; config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+ config.font_names ; config.filebrowserUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Flash'; config.filebrowserWindowWidth = '1000'; config.filebrowserWindowHeight = '700' }; 在js目录中加入ExtCkeditor.js: /**************************************************** * CKEditor Extension *****************************************************/ Ext.form.CKEditor = function(config){ this.config = config; Ext.form.CKEditor.superclass.constructor.call(this, config); }; Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, { onRender : function(ct, position){ if(!this.el){ this.defaultAutoCreate = { tag: "textarea", autocomplete: "off" }; } Ext.form.TextArea.superclass.onRender.call(this, ct, position); CKEDITOR.replace(this.id, this.config.CKConfig); }, setValue : function(value){ Ext.form.TextArea.superclass.setValue.apply(this,[value]); CKEDITOR.instances[this.id].setData( value ); }, getValue : function(){ CKEDITOR.instances[this.id].updateElement(); return Ext.form.TextArea.superclass.getValue(this); }, getRawValue : function(){ CKEDITOR.instances[this.id].updateElement();
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值