`
01jiangwei01
  • 浏览: 541823 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

fckeditor 与ext 集成使用

 
阅读更多

弹出一个编辑window，效果如图，

具体代码如下：

Ext.form.FCKeditor.js

/**
var oFCKeditorOptions = {
    BasePath: 'fckeditor/',
    Config: {
        BaseHref: 'http://localhost:8080/hrcis/',
        SkinPath: '../../fckeditor/editor/skins/office2003/',
        CustomConfigurationsPath: '../../fckeditor/fckconfig.js',
        ProcessHTMLEntities: true,
        ProcessNumericEntities: false
    },
    AllowQueryStringDebu: false,
    ToolbarSet: 'XXX'
};

*/
Ext.form.FCKeditor = function(config){
    this.config     = config;
    Ext.form.FCKeditor.superclass.constructor.call(this, config);
    this.MyisLoaded = false;
    this.MyValue    = '';
    this.fckInstance= undefined; // to avoid using FCKAPI, this is a reference to instance created on FCKeditor_OnComplete
};
Ext.extend(Ext.form.FCKeditor, Ext.form.TextArea, {
    onRender : function(ct, position){
        if(!this.el){
            this.defaultAutoCreate = {
                tag: "textarea",
                style:"width:100px;height:60px;",
                autocomplete: "off"
            };
        }
        Ext.form.TextArea.superclass.onRender.call(this, ct, position);
        //Hide textarea to stop flashing up before FCKEditor renders.
        this.hideMode = "visibility"; // set hideMode to visibility, to retain height.
        this.hidden = true; // hide textarea
        if(this.grow){
            this.textSizeEl = Ext.DomHelper.append(document.body, {
                tag: "pre", cls: "x-form-grow-sizer"
            });
            if(this.preventScrollbars){
                this.el.setStyle("overflow", "hidden");
            }
            this.el.setHeight(this.growMin);
        }
        setTimeout("loadFCKeditor('"+this.name+"',"+ this.config.height +");",100);
    },
    setValue : function(value){
        this.MyValue = value;
        if (this.MyisLoaded){
          FCKeditorSetValue(this.name,value);          
        }
        Ext.form.TextArea.superclass.setValue.apply(this,[value]);
    },
    getValue : function(){
        if (this.MyisLoaded){
            value = FCKeditorGetValue(this.name);
            Ext.form.TextArea.superclass.setValue.apply(this,[value]);
            return Ext.form.TextArea.superclass.getValue.call(this);
        } else {
            return this.MyValue;
        }
    },
    getRawValue : function(){
        if (this.MyisLoaded){
            value=FCKeditorGetValue(this.name);
            Ext.form.TextArea.superclass.setRawValue.apply(this,[value]);
            return Ext.form.TextArea.superclass.getRawValue.call(this);
        } else {
            return this.MyValue;
        }
    }
});
Ext.reg('fckeditor', Ext.form.FCKeditor);
function loadFCKeditor(element, height){
    oFCKeditor                         = new FCKeditor(element);
    oFCKeditor.Height                 = height;
    Ext.apply(oFCKeditor,oFCKeditorOptions)
    oFCKeditor.ReplaceTextarea();
}
function FCKeditor_OnComplete(editorInstance){
    Ext.getCmp(editorInstance.Name).MyisLoaded = true;
    Ext.getCmp(editorInstance.Name).fckInstance = editorInstance;
}
function FCKeditorSetValue(name,value){
    if (name != undefined){
        var extCmp = Ext.getCmp(name);
        if (extCmp != undefined) {
            extCmp.fckInstance.SetData(value);
        }
    }
}
function FCKeditorGetValue(name){
    if (name != undefined){
        var data = '';
        var extCmp = Ext.getCmp(name);
        if (extCmp != undefined) {
            data = extCmp.fckInstance.GetData();
        }
        return data;
    }
}

 
 主页面代码如下main.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>编辑页面</title>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jslib/ext33/resources/css/ext-all.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/ext-all.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext33/plugin/Ext.form.FCKeditor.js"></script>
	<!---->
	<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/fckeditor/fckeditor.js"></script>
	
  </head>
  
  <body>
   
  </body>
   <script type="text/javascript">
   var oFCKeditorOptions = {
	    BasePath: '${pageContext.request.contextPath}/jslib/fckeditor/',
	    Config: {
	        BaseHref: '${pageContext.request.contextPath}',
	        SkinPath: '${pageContext.request.contextPath}/jslib/fckeditor/editor/skins/office2003/',
	        CustomConfigurationsPath: '${pageContext.request.contextPath}/jslib/fckeditor/fckconfig.js',
	        ProcessHTMLEntities: true,
	        ProcessNumericEntities: false
	    },
	    AllowQueryStringDebu: false,
	    ToolbarSet: 'Default'
	};
  Ext.onReady(function(){
  	var tabs = new Ext.TabPanel({
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:600,
        activeItem:0,
        items:[
        {
        	xtype:'panel',
        	title:'编辑页面',
        	items:[{
        			 name: 'body',
                     fieldLabel: '正文',
                     height: 430,
                     xtype:'fckeditor',
                     id:'body'

        	}]
        }
        ],
        defaults: {autoScroll:true}
    });	
  	win = new Ext.Window({
                layout:'fit',
                width:500,
                height:300,
                closeAction:'close',
                plain: true,
				items:[tabs],
                buttons: [{
                    text:'Submit',
                    disabled:true
                },{
                    text: 'Close',
                    handler: function(){
                        win.close();
                    }
                },{
                    text: '确定',
                    handler: function(){
                        var editor = Ext.getCmp("body");
                        var v = editor.getValue();
                        alert(v);
                    }
                }]
            });
  
  win.show(this);
 })

  
  </script>
</html>

 

引用的Fckeditor 为FCKeditor_2.5b.zip，在附件中可以下载

  • 大小: 25.8 KB
分享到：
| mysql 自关联表的创建
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    FCKEditor与ext结合使用

    **正文** 在Web开发中，富文本编辑器和前端框架...结合使用FCKEditor与EXT，可以创建出功能强大且用户体验优秀的Web应用。这种结合方式在内容管理系统、论坛、博客平台等场景下尤为常见，为用户提供了一流的编辑体验。

    ext-fckeditor整合

    标题“ext-fckeditor整合”指的是将EXT框架与FCKeditor集成到一起，以创建一个具有高级文本编辑功能的EXT应用。这样的整合可以使开发者在EXT构建的应用中嵌入一个功能强大的文本编辑器，方便用户编辑和管理文本内容...

    在EXT中使用FCKEditor编辑器例子

    这篇博客文章“在EXT中使用FCKEditor编辑器例子”可能探讨了如何将FCKEditor集成到EXT应用中，为用户提供一个方便的文本编辑界面。 在EXT中集成FCKEditor，首先你需要理解EXT的基本概念，如组件（Component）、布局...

    ext-fckeditor

    标题中的"ext-fckeditor"指的是基于Java开发的一个项目，它集成了Ext库和FCKeditor。这个项目的主要目的是为开发者提供一个完整的、可运行的源代码解决方案，以便于在Java环境中集成富文本编辑器功能。 Ext是一个...

    EXT中FCK的使用

    包含的"EXT中FCK使用"文件很可能是包含了一个完整的示例，展示如何在EXT应用中集成和使用FCKeditor。这个示例应该包括了创建FCKeditor组件的代码，以及如何在EXT布局中使用该组件的示例。通过阅读和运行这个示例，...

    FCKeditor结合extjs实例

    2. 在ExtJS组件（如`Ext.form.TextArea`）中替换为FCKeditor的实例，这通常涉及到自定义ExtJS的组件或者在渲染后调用FCKeditor的初始化方法。 3. 配置FCKeditor的设置，如工具栏、样式集等，以适应应用需求。 4. ...

    extjs fckeditor集成代码

    代码如下:{ xtype : “textarea”, name : “content”, anchor : ‘97%’, height : 400, id : “content”, fieldLabel : “内容”, listeners : { “render” : function(f) { fckEditor = new FCKeditor(...

    Fck安装教程

    - 运行index.asp，你会看到FCKeditor已经集成在页面中，且具备图片上传功能。 通过以上步骤，你已成功在ASP环境中安装并配置了FCKeditor，现在可以方便地在网页中使用这款强大的富文本编辑器，进行文字编辑和图片...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    -使用Hidden来显示隐藏ExtAspNet控件，而不是使用Visible属性（Visible目前设置为只读属性）。 -使用Hidden控制Window控件的显示隐藏，Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...

    PhpGrid开发框架

    PhpGrid 是用于快速开发网站后台，管理系统(ERP,OA,CRM等)的PHP开发类库(工具) .主要功能如下: 简单,不需要花较多的...很容易的集成Fckeditor 容易扩展,当框架无法满足您复杂的业务需求时,您可以轻松的扩展该框架

    ajax框架的选择.pdf

    此外，ZK与第三方库如Google Maps、FCKeditor、Dojo和Timeline的集成，以及对Android平台的支持，增强了其灵活性和适用性。 对于现有的Web应用程序，选择框架需要考虑其是否能与现有架构无缝集成。例如，.NET平台...

    ExtAspNet_v2.3.2_dll

    -使用Hidden来显示隐藏ExtAspNet控件，而不是使用Visible属性（Visible目前设置为只读属性）。 -使用Hidden控制Window控件的显示隐藏，Popup已经标记为Obsolete属性。 -Window的实例方法GetCloseReference等以及...

Magicbox
Global site tag (gtag.js) - Google Analytics