当前位置: 首页 > 工具软件 > EditArea > 使用案例 >

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

步博艺
2023-12-01

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

 类似资料: