Ext ExtJS 中嵌入CKEditor 做在线文本 编辑工具

WarningsDo not put this files on a path with spaces or Chinese;

 

 

This Works with the ExtJs 3.2.2 and ExtJS 2.0.2

 

 

1.Download the Ckeditors ource at: http://ckeditor.com/download

2.Download the Ext.ux.CKEditor.js at: http://www.sencha.com/forum/showthread.php?79031-CKEditor-Extension&daysprune=30 or http://www.sencha.com/forum/showthread.php?79031-CKEditor-Extension&p=443604

3.Put the Ext.ux.CKEditor.js in the same folder with the ckeditor

 

Code:

Index.html

<html>

    <head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>

        <!-- GC -->

        <!-- LIBS -->

        <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

        <!-- ENDLIBS -->

        <script type="text/javascript" src="extjs/ext-all.js"></script>

        <script type="text/javascript" src="ckeditor/ckeditor.js"></script>

        <script type="text/javascript" src="Ext.ux.CKEditor.js"></script>

       <script type="text/javascript" src="inttest.js"></script>

    </head>

    <body>

    </body>

</html>inttest.js

/*

* Ext JS Library 3.2.2

* Copyright(c) 2006-2010, Ext JS, LLC.

* licensing@extjs.com

* Download by http://www.codefans.net

* http://extjs.com/license

*/

/*

* Ext JS Library 3.2.2

* Copyright(c) 2006-2010, Ext JS, LLC.

* licensing@extjs.com

* Download by http://www.codefans.net

* http://extjs.com/license

*/

 

Ext.onReady(function() {

    var form = new Ext.TabPanel({

        autoWidth : true,

        //width : 1000,

        activeTab : 0,

        resizeTabs : true,

        height : 500,

        minTabWidth : 120,

        tabPosition : "bottom",

        items: [

        {

            layout:'fit',

            items:[

            {

                xtype: 'ckeditor',

                fieldLabel: 'Editor',

                name: 'htmlcode',

                CKConfig: {

                    /* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */

                    //customConfig : '/ckeditor/config.js', // This allows you to define the path to a custom CKEditor config file.

                    toolbar: 'Basic',

                   // height : 400,

                   // width: 900

                }

            }

 

            ]

 

 

        }

 

        ]

    });

 

    var window = new Ext.Window({

        title: 'Resize Me',

        width: 1000,

        height:600,

        minWidth: 300,

        minHeight: 200,

        layout: 'fit',

        plain:true,

        bodyStyle:'padding:5px;',

        buttonAlign:'center',

        items: form,

 

        buttons: [{

            text: 'Send'

        },{

            text: 'Cancel'

        }]

    });

 

    window.show();

 

 

 

});

下载地址:http://download.csdn.net/source/2616221

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值