「CodeMirror」を利用してJavascriptでシンタックスハイライト表示を実装

はじめに

DevExpress社のASP.NETでXML編集用のシンタックスハイライトを作成しようとしたが、
上手くできなかったため、オープンソースのJavascriptで動作するコードエディターである、
CodeMirrorを利用した際のメモ

CodeMirrorでは、シンタックスハイライトだけでなく、行番号表示などコードエディタとして必要な機能を揃えており、様々な言語にも対応しています。

ちなみに、DevExpress社のASP.NETでは、HTML編集用のASPxHtmlEditorクラスが用意されていますが、XMLでは上手く表示されなかったため、断念しました。

使い方

使い方は非常に簡単です。「CodeMirror」のサイトからjavascript一式を入手し、
必要な言語の定義、アドインを読み込み、デモを参考にeditorを作るだけです。

CodeMirrorでは、textareaが必要ですが、今回はDevExpress社のASPxMemoを利用しました。ASPxMemoも最終的にはtextareaに変換されるため、うまく動いています。

XmlEditDialog.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="XmlEditDialog.ascx.cs" Inherits="GoseiTenken.View.Control.XmlEditDialog" %>
<link rel="stylesheet" href="../../Scripts/CodeMirror/lib/codemirror.css">
<script src="../../Scripts/CodeMirror/lib/codemirror.js"></script>
<script src="../../Scripts/CodeMirror/mode/xml/xml.js"></script>
<script type="text/javascript">
function OnEndCallbackXmlEdit(s, e) {
    if (s.cp_command_name == "XmlEditPopup") {
        XmlEditPopup.Show();
        InitCodeMirror();
    } else if (s.cp_command_name == "MessagePrePopup") {
        InitCodeMirror();
        CallbackMessage.PerformCallback("CommandName=MessagePopup");
    }
}
function InitCodeMirror() {
    var value = MemoXml.GetValue();
    var elem3 = document.getElementsByName(MemoXml.uniqueID)[0];
    editor = CodeMirror.fromTextArea(elem3, {
        mode: "application/xml",
        styleActiveLine: true,
        lineNumbers: true,
        lineWrapping: true
    });
    editor.setSize("100%", "100%");
    editor.refresh();
}
</script>
<dx:ASPxCallbackPanel ID="CallbackXmlEdit" runat="server" HideContentOnCallback="False"
    ClientInstanceName="CallbackXmlEdit" OnCallback="OnCallbackXmlEdit">
    <ClientSideEvents EndCallback="OnEndCallbackXmlEdit"></ClientSideEvents>
    <PanelCollection>
        <dx:PanelContent ID="PanelContent3" runat="server">

            <dx:ASPxPopupControl ID="XmlEditPopup" runat="server" AllowDragging="True" AllowResize="True"
                CloseAction="CloseButton" CloseOnEscape="False" 
                Theme="Moderno" Height="800px" ScrollBars="Auto" Width="634px"
                PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" 
                ClientInstanceName="XmlEditPopup"
                HeaderText="XML編集"  
                PopupAnimationType="None" EnableViewState="False" AutoUpdatePosition="True" ShowFooter="True">
                <ClientSideEvents AfterResizing="OnXmlEditAfterResizing" />
                <ContentCollection>
                   <dx:PopupControlContentControl runat="server">
                    <dx:ASPxMemo ID="MemoXml" ClientInstanceName="MemoXml"  runat="server" Height="100%" Width="100%"  Theme="Moderno">
                    </dx:ASPxMemo>
                    </dx:PopupControlContentControl>
                </ContentCollection>
                <FooterTemplate>
                    <dx:ASPxFormLayout runat="server" ID="FooterFormLayout" Width="100%" CssClass="clearPaddings">
                        <Styles LayoutItem-CssClass="clearPaddings" LayoutGroup-CssClass="clearPaddings" />
                        <Items>
                            <dx:LayoutGroup GroupBoxDecoration="None">
                                <Paddings Padding="0" />
                                <Items>
                                    <dx:LayoutItem ShowCaption="False">
                                        <LayoutItemNestedControlCollection>
                                            <dx:LayoutItemNestedControlContainer>
                                                <div class="buttonsContainer">
                                                    <dx:ASPxButton ID="ButtonSave" runat="server" CssClass="submitButton" Text="保存" AutoPostBack="false" Width="100" Theme="Moderno">
                                                    </dx:ASPxButton>
                                                    <dx:ASPxButton ID="ButtonCancel" runat="server" CssClass="cancelButton" Text="キャンセル" AutoPostBack="false" Width="100" Theme="Moderno">
                                                    </dx:ASPxButton>
                                                </div>
                                            </dx:LayoutItemNestedControlContainer>
                                        </LayoutItemNestedControlCollection>
                                    </dx:LayoutItem>
                                </Items>
                            </dx:LayoutGroup>
                        </Items>
                    </dx:ASPxFormLayout>
                </FooterTemplate>
            </dx:ASPxPopupControl>
        </dx:PanelContent>
    </PanelCollection>
</dx:ASPxCallbackPanel>

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="XmlEditDialog.ascx.cs" Inherits="GoseiTenken.View.Control.XmlEditDialog" %>

function OnEndCallbackXmlEdit(s, e) {

if (s.cp_command_name == "XmlEditPopup") {

XmlEditPopup.Show();

InitCodeMirror();

} else if (s.cp_command_name == "MessagePrePopup") {

InitCodeMirror();

CallbackMessage.PerformCallback("CommandName=MessagePopup");

}

function InitCodeMirror() {

var value = MemoXml.GetValue();

var elem3 = document.getElementsByName(MemoXml.uniqueID)[0];

editor = CodeMirror.fromTextArea(elem3, {

mode: "application/xml",

styleActiveLine: true,

lineNumbers: true,

lineWrapping: true

});

editor.setSize("100%", "100%");

editor.refresh();

}

</script>

<dx:ASPxCallbackPanel ID="CallbackXmlEdit" runat="server" HideContentOnCallback="False"

ClientInstanceName="CallbackXmlEdit" OnCallback="OnCallbackXmlEdit">

<dx:PanelContent ID="PanelContent3" runat="server">

<dx:ASPxPopupControl ID="XmlEditPopup" runat="server" AllowDragging="True" AllowResize="True"

CloseAction="CloseButton" CloseOnEscape="False"

Theme="Moderno" Height="800px" ScrollBars="Auto" Width="634px"

PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"

ClientInstanceName="XmlEditPopup"

HeaderText="XML編集"

PopupAnimationType="None" EnableViewState="False" AutoUpdatePosition="True" ShowFooter="True">

<dx:PopupControlContentControl runat="server">

<dx:ASPxMemo ID="MemoXml" ClientInstanceName="MemoXml" runat="server" Height="100%" Width="100%" Theme="Moderno">

</dx:ASPxMemo>

</dx:PopupControlContentControl>

</ContentCollection>

<dx:ASPxFormLayout runat="server" ID="FooterFormLayout" Width="100%" CssClass="clearPaddings">

<Items>

<dx:LayoutGroup GroupBoxDecoration="None">

<Items>

<dx:LayoutItem ShowCaption="False">

<dx:LayoutItemNestedControlContainer>

<dx:ASPxButton ID="ButtonSave" runat="server" CssClass="submitButton" Text="保存" AutoPostBack="false" Width="100" Theme="Moderno">

</dx:ASPxButton>

<dx:ASPxButton ID="ButtonCancel" runat="server" CssClass="cancelButton" Text="キャンセル" AutoPostBack="false" Width="100" Theme="Moderno">

</dx:ASPxButton>

</div>

</dx:LayoutItemNestedControlContainer>

</LayoutItemNestedControlCollection>

</dx:LayoutItem>

</Items>

</dx:LayoutGroup>

</Items>

</dx:ASPxFormLayout>

</FooterTemplate>

</dx:ASPxPopupControl>

</dx:PanelContent>

</PanelCollection>

</dx:ASPxCallbackPanel>

XmlEditDialog.ascx.cs

    public partial class XmlEditDialog : System.Web.UI.UserControl
    {
        protected void OnCallbackXmlEdit(object sender, CallbackEventArgsBase e)
        {
            var map = (MapEntity)this.Session["MapEntity"];
            var contants = map.Contents;
            this.MemoXml.Text = contants;
        }
    }
}