fckeditor 与ext 集成使用

最新推荐文章于 2024-08-04 16:33:59 发布

阳光下的小鱼

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量87

点赞数

分类专栏： Ext应用文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/xubaoyong/article/details/84018927

版权

Ext应用专栏收录该内容

11 篇文章 0 订阅

订阅专栏

弹出一个编辑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，在附件中可以下载

阳光下的小鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
fckeditor 与ext 集成使用

弹出一个编辑window，效果如图，具体代码如下：Ext.form.FCKeditor.js/**var oFCKeditorOptions = { BasePath: 'fckeditor/', Config: { BaseHref: 'http://localhost:8080/hrcis/', SkinPath: '.....
复制链接

扫一扫

专栏目录