在 asp.net 中使用 elrte 编辑器答案

【问题标题】：Use elrte Editor in asp.net在 asp.net 中使用 elrte 编辑器
【发布时间】：2011-06-18 01:01:13
【问题描述】：

如何在 asp.net 网站中使用 elrte 编辑器？（任何示例）

【问题讨论】：

【解决方案1】：

Elrte Editor 是纯 javascript 解决方案（更清晰的 jQuery），因此要访问其中的任何功能，您必须在您的 asp.net 网站中使用一些 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。所以，让我们看一下here，我们会发现例如，为了获取编辑器内容，我们可以使用下一个表达式：

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>

【讨论】：