`

extjs4与FCKeditor整合

阅读更多
   EXTJS4与FCKeditor整合:
  1.自定义CKeditor控件,继承自textArea

Ext.define('Ext.ux.form.CkEditor', {

    extend: 'Ext.form.field.TextArea',

    alias: 'widget.ckeditor',

    onRender : function(ct, position){
        if(!this.el){
            this.defaultAutoCreate = {
                tag: "textarea",
                autocomplete: "off"
            };
        }
        this.callParent(arguments);
        this.editor = CKEDITOR.replace(this.inputEl.id, this.CKConfig);
    },

    setValue: function(value) {
        if(this.editor){
            this.editor.setData(value);
        }
        this.callParent(arguments);
    },

    getValue: function() {
        if (this.editor) {
            this.editor.updateElement();
            return this.editor.getData();
        } else {
            return '';
        }
    },

    getRawValue: function() {
        if (this.editor) {
            this.editor.updateElement();
            return this.editor.getData();
        } else {
            return '';
        }
    }
});


2,像其他控件一样使用
var items = [
            hiddenId,
            {
                xtype:'textfield',
                name:'title',
                layout:'form',
                fieldLabel:'title',
                labelWidth:50,
                columnWidth:.2,
                labelAlign:'right'
            },
            {
                xtype: 'ckeditor',
                fieldLabel: 'content',
                labelAlign: 'left',
                name: 'content',
                allowBlank: true,
                CKConfig: {
                    height: '300',
                    //如果选择字体样式等的弹出窗口被当前window挡住,就设置这个为一个较大的值
                    baseFloatZIndex: 99999,
                    //图片和flash都上传到这里
                    filebrowserUploadUrl: '/upload'
                }
            }
        ];

3,取值和以前一样取法,request.getPrameter("content");
   设置值也和其他的一样,
        this.down('ckeditor').setValue(jsonObj.content);
分享到:
评论

相关推荐

    FCKeditor结合extjs实例

    标题 "FCKeditor结合extjs实例" 描述的是一个实际项目中使用的技术组合,涉及到的主要是两个前端富文本编辑器库:FCKeditor 和 ExtJS。这个实例表明在开发企业级网站时,如何将这两者有效地整合以实现复杂的用户界面...

    extjs + fckeditor 的结合源码

    extjs + fckeditor 的结合源码 这个demo讲的是extjs + fckeditor 的结合 测试环境vs2008+xp+extjs2.2+fckeditor 2.x 大家运行Default.aspx就可以看到效果了

    Extjs结合fckeditor+c#实现新闻发布

    【标题】:“Extjs结合fckeditor+c#实现新闻发布”是一个基于Web的应用开发示例,它展示了如何使用Extjs作为前端框架,与富文本编辑器fckeditor集成,并利用C#后端语言来处理新闻发布功能。这一组合可以创建一个交互...

    Django1.6与extjs4整合

    **标题:“Django1.6与ExtJS4整合”** **描述:** 本文将深入探讨如何将Django 1.6这一Python的Web框架与ExtJS 4这一强大的JavaScript前端框架进行集成,以构建功能丰富的Web应用。Django以其优秀的MVT(Model-View...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    ssh+extjs4整合开发

    在IT行业中,SSH+EXTJS4的整合开发是一种常见的前端与后端技术栈结合,用于构建功能丰富的Web应用程序。SSH代表Spring、Struts和Hibernate,它们分别是Java领域中用于处理不同层面的三个核心框架:Spring提供了依赖...

    extjs多版本整合应用

    多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用。

    extjs与struts的整合代码

    将ExtJS与Struts整合,可以利用ExtJS的前端交互能力,结合Struts的强大后端处理,打造高性能的Web应用。通常,整合过程涉及以下几个关键步骤: 1. **配置Struts2 Action:** 在Struts2的配置文件中定义Action,这些...

    extjs + fckeditor 的结合asp.net版

    本人agd第一次发demo比较粗糙...这个demo讲的是extjs + fckeditor 的结合 这个demo网上有 但是是java版的 今天我把它转换成asp.net版 测试环境vs2008+xp+extjs2.2+fckeditor 2.x 大家运行Default.aspx就可以看到效果了

    extjs_dwr整合例子

    **整合ExtJS和DWR** 的主要目标是实现前端UI与后端业务逻辑的无缝对接。以下是一些整合的关键步骤: 1. **安装和配置DWR**: 首先,你需要在服务器端集成DWR。这通常涉及在项目中添加DWR的jar包,配置web.xml文件,...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    Extjs4 整合百度编辑器

    在本文中,我们将深入探讨如何将ExtJS 4与百度编辑器进行整合,以及这个集成在实际项目中的应用。首先,我们来看一下标题所提到的关键技术:ExtJS 4和百度编辑器。 **ExtJS 4** 是一个强大的JavaScript框架,用于...

    SSH+Extjs Oa管理系统整合

    与SSH结合时,Extjs通常通过Ajax与后台进行数据交互,接收或发送JSON格式的数据,实现前后端数据的动态同步。 5. **Oa管理系统**: Oa(Office Automation System)办公自动化系统是一种信息化管理系统,用于企业...

    extjs4完整下载

    ExtJS4正式版(官方完整下载包):含所有的源代码,html,api文档,示例。官方网站下载现在需要注册,这个仅供爱好者个人学习使用,如果项目中使用请至官方网站购买。

    Extjs4的demo

    在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...

    extjs4学习文档

    EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...

    extjs4中文文档

    3. **数据绑定**:EXTJS4支持双向数据绑定,使得视图与模型之间的数据同步变得简单,大大减少了手动更新视图的工作。 4. **高级表格和网格**:EXTJS4的GridPanel组件提供强大的数据展示和操作功能,支持分页、排序...

    extjs6与webuploader整合示例展现到grid列表

    swfupload.js与extjs整合由于与浏览器兼容性不好,后改为webuploader,图片上传示例,加入到grid列表,显示相关的状态信息,例子简单修改一下即可使用,extj所有版本都类似。注:IE中测试需要部署在服务器下,上传...

    ExtJS4多文件上传,带进度条及管理

    在ExtJS4中,可以与swfupload集成,利用其优势实现文件上传。swfupload通过Flash与JavaScript通信,可以在不刷新页面的情况下进行后台上传,提高了用户体验。 **五、文件管理** 在"ExtJS4多文件上传,带进度条及...

Global site tag (gtag.js) - Google Analytics