Ext ExtJS中嵌入Editarea作在线代码编辑工具 支持多种语言语法高亮 语法着色 代码补全

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 Editarea source at: http://sourceforge.net/projects/editarea/

2.Download the Ext.ux.EditArea.js at: https://www.sencha.com/forum/showthread.php?79927-Ext.ux.form.EditArea or http://www.sencha.com/forum/archive/index.php/t-79927.html

3.Put the Ext.ux.EditArea.js in the editarea folder

 

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="editarea/edit_area/edit_area_full.js"></script>

        <script type="text/javascript" src="editarea/Ext.ux.EditArea.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: [

        new Ext.ux.form.EditArea({

            xtype: 'ux-editearea',

            title:"EditArea1",

            id:'ea1',

            syntax: 'js' // or js or php or whatever, see the docs

        })]

    });

    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();

    Ext.getCmp("ea1").focus();

 

 

 

});

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

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值