Question

如何在asp.net网站内使用elrte Editor？（任何例子）

Answer 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>

在asp.net中使用elrte编辑器

1 个答案: