如何向Ace Editor添加类似XML / JavaScript的新语言?

时间:2015-08-04 20:33:20

标签: flex mxml ace-editor

我想向Ace Editor添加MXML支持,但我不知道从哪里开始。有没有我可以用来指导我的指南?我可以使用现有的语言模块并重命名并让它工作吗?

它是一个XML文档,它使用命名空间。它与HTML标记非常相似,因为它有一个脚本标记,您可以在其中键入代码。该脚本与JavaScript非常相似,但您可以选择键入变量(它是JavaScript / ES4)。 CSS与CSS非常相似,除了它还添加了名称空间。

示例MXML:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 

                       frameRate="30"
                       showStatusBar="false"
                       minWidth="720"
                       minHeight="480"
                       initialize="initializeHandler(event)"
                       backgroundColor="#242424"
                       >

    <fx:Style source="fonts.css"/>

    <fx:Style source="styles.css"/>

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace components "components.*";

        s|ToggleSwitch
        {
            accentColor: #3F7FBA;
            color: #FFFFFF;
            fontSize: 27;
            skinClass: ClassReference("spark.skins.mobile.ToggleSwitchSkin");
            slideDuration: 125;
             /*textShadowAlpha: .65;
           textShadowColor: #000000;*/
        }

        s|TextArea
        {
            skinClass: ClassReference("spark.skins.spark.TextAreaSkin");
        }

        s|Label {
            paddingLeft: 20;
        }

        .headerLabels {
            paddingLeft: 20;
        }

        #myLabel {
            paddingLeft: 20;
        }

    </fx:Style>

    <fx:Script>
        <![CDATA[

            /**
             * Error: Could not find compiled resource bundle 'logging' for locale 'en_US'
             * 
             * Caused by when I switched to using external library
             **/

            import mx.events.FlexEvent;

            protected function initializeHandler(event:FlexEvent):void {
                width = Capabilities.screenResolutionX*.85;
                height = Capabilities.screenResolutionY*.88;
                center();
            }

            // Align native AIR application window horizontally and vertically
            protected function center():void {
                nativeWindow.x = (Capabilities.screenResolutionX - width) / 2;
                nativeWindow.y = (Capabilities.screenResolutionY - height) / 2 - 32;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>

        <utils:RegisterSingleton id="registerSingleton" 
                                 target="{manager}" />
        <controller:ApplicationController id="manager" isDesktop="true"/>
    </fx:Declarations>

    <components:MainGroup id="mainGroup" width="100%" height="100%"/>

</s:Application>

如果它更容易,那就是XML + ActionScript;已支持的两种模式。

1 个答案:

答案 0 :(得分:1)

创建或扩展模式的wiki条目应该包含您需要的所有答案: https://github.com/ajaxorg/ace/wiki/Creating-or-Extending-an-Edit-Mode