AspxhtmlEditor添加自定义按钮

Aspx代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v11.1, Version=11.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

    Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v11.1, Version=11.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

    Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<script type="text/javascript">

    // <![CDATA[

    var MailMessageTemplate = '<p>Hi,</p><p>Thanks, <br/>Serge<br/><br/>R&amp;D, ASP.Net Team<br/>Developer Express Inc.<br/><br/>PS. If you wish to receive direct assistance from our Support Team, use Support Center at <a target="_blank" href="http://www.devexpress.com/Support/Center">http://www.devexpress.com/Support/Center</a></p>';

    function PasteEmailTemplate(commandName) {

        switch (commandName) {

            case ('deleteall'):

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SELECT_ALL, null);

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.PASTEHTML_COMMAND, '&nbsp;');

                alert('fuck');

                break;

            case ('pastetemplate'):

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SELECT_ALL, null);

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.PASTEHTML_COMMAND, MailMessageTemplate);

                break;

        }

    }

</script>

<body>

    <form id="form1" runat="server">

    <div>

    </br>

    </br>

        <dx:ASPxHtmlEditor ID="DemoHtmlEditor" runat="server" ClientInstanceName="HtmlEditor">

            <Toolbars>

                <dx:HtmlEditorToolbar Caption="DemoToolbar" Name="DemoToolbar">

                    <Items>

                        <dx:ToolbarUndoButton>

                        </dx:ToolbarUndoButton>

                        <dx:ToolbarRedoButton>

                        </dx:ToolbarRedoButton>

                        <dx:ToolbarJustifyLeftButton BeginGroup="True">

                        </dx:ToolbarJustifyLeftButton>

                        <dx:ToolbarJustifyCenterButton>

                        </dx:ToolbarJustifyCenterButton>

                        <dx:ToolbarJustifyRightButton>

                        </dx:ToolbarJustifyRightButton>

                        <dx:ToolbarJustifyFullButton>

                        </dx:ToolbarJustifyFullButton>

                        <dx:CustomToolbarButton CommandName="pastetemplate" ToolTip="Paste mail message template"

                            BeginGroup="true">

                            <Image Url="easyicon_cn_48.ico"></Image>

                        </dx:CustomToolbarButton>

                        <dx:CustomToolbarButton CommandName="deleteall" Text="Delete All" ToolTip="Delete all">

                        </dx:CustomToolbarButton>

                    </Items>

                </dx:HtmlEditorToolbar>

            </Toolbars>

            <ClientSideEvents CustomCommand="function(s, e) { PasteEmailTemplate(e.commandName); }">

            </ClientSideEvents>

        </dx:ASPxHtmlEditor>

        <br />

        <br />

    </div>

    </form>

</body>

</html>

 

  1. 在EditorToolBar中添加<dx:CustomToolbarButton CommandName="deleteall" Text="Delete All" ToolTip="Delete all"></dx:CustomToolbarButton> 其中CommandName指定按钮的事件名称（客户端事件，预处理服务器端事件，可以借助ajax思想），Text指定按钮上的文字
  2. 注册事件：在ToolBar后面添加如下代码注册事件

<ClientSideEvents CustomCommand="function(s, e) { PasteEmailTemplate(e.commandName); }"></ClientSideEvents>

  1. 定义事件：是Javascript的脚本事件

function PasteEmailTemplate(commandName) {

        switch (commandName) {

            case ('deleteall'):

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SELECT_ALL, null);//先全选

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.PASTEHTML_COMMAND, '&nbsp;');//替换成&nbsp

                break;

            case ('pastetemplate'):

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SELECT_ALL, null);//全选

                HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.PASTEHTML_COMMAND, MailMessageTemplate);//替换为想要的字。 定义方式：var MailMessageTemplate=”………”(js)

                break;

        }

    }

posted @ 2011-11-19 16:17  黎明露珠  阅读(955)  评论(0)    收藏  举报