3

asp.net Web サイト内で elrte エディターを使用するにはどうすればよいですか?(任意の例)

4

1 に答える 1

3

Elrte Editorは純粋な JavaScript ソリューション (より明確な jQuery) であるため、その機能にアクセスするには、asp.net Web サイトで JavaScript を使用する必要があります。

まず、必要なフォルダーをすべて追加して、プロジェクトに追加する必要があります。インストールパッケージ内にあります - elrte-1.2.zip。プロジェクトの次のフォルダーにコピーする必要があります: css、js、すべてのサブフォルダーとそのコンテンツを含む画像。

次に、次のように ASP ページに参​​照を追加します。

    <!-- jQuery and jQuery UI -->
        <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>

        <!-- elRTE -->
        <script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>

        <!-- elRTE translation messages -->
        <script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript" charset="utf-8">
            $().ready(function () {
                var opts = {
                    cssClass: 'el-rte',
                    // lang     : 'ru',
                    height: 450,
                    toolbar: 'complete',
                    cssfiles: ['css/elrte-inner.css']
                }
                $('#editor').elrte(opts);
            })

<style type="text/css" media="screen">
        body { padding:20px;}
    </style>

このエディターのコンテンツにアクセスするには、このエディターの開発者によって用意された JavaScript API を使用できます。ここでそれを見てみましょう。たとえば、次の式を使用してエディターのコンテンツを取得できることがわかります。

var content = $('selector').elrte('val');

それでは、ページとエディターの相互運用性をページに追加しましょう。ページにいくつかのボタンとテキスト ボックスを追加します。

<asp:Button ID="btnSend" runat="server"  OnClientClick= "ViewText();" Text="View text" />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>

次の JavaScript も追加します。

function ViewText() {
            var content = $('#editor').elrte('val');
            alert(content);
            var MyLabel = $('#txtText');
            MyLabel[0].value = content; 
        }

この機能を実装した後、JavaScript アラート機能を使用してエディターのコンテンツを取得し、サーバー コードで実際にアクセスできるテキスト ボックスの値を設定できます。

私の場合の完全なasp.netページコードは次のとおりです。

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

<!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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>elRTE</title>

    <!-- jQuery and jQuery UI -->
    <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>

    <!-- elRTE -->
    <script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>

    <!-- elRTE translation messages -->
    <script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript" charset="utf-8">
        $().ready(function () {
            var opts = {
                cssClass: 'el-rte',
                // lang     : 'ru',
                height: 450,
                toolbar: 'complete',
                cssfiles: ['css/elrte-inner.css']
            }
            $('#editor').elrte(opts);
        })

        function ViewText() {
            var content = $('#editor').elrte('val');
            alert(content);
            var MyLabel = $('#txtText');
            MyLabel[0].value = content; 
        }
    </script>

    <style type="text/css" media="screen">
        body { padding:20px;}
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div id="editor" runat="server">

    </div>

    <asp:Button ID="btnSend" runat="server"  OnClientClick= "ViewText();" Text="View text" />

    <br />

    <asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
    </form>
</body>
</html>
于 2011-01-30T11:46:32.267 に答える