Используйте редактор elrte в asp.net - PullRequest
Новая
       15

Используйте редактор elrte в asp.net

3 голосов
/ 30 января 2011

как я могу использовать elrte Editor на сайте asp.net? (Любой пример)

1 Ответ

4 голосов
/ 30 января 2011

Elrte Editor - это чистое решение javascript (более понятное jQuery), поэтому для доступа к любой из его функций вы должны использовать некоторый javascript на своем сайте asp.net.

Прежде всего вы должны добавить в ваш проект нужную папку со всеми ее вставками. Вы можете найти его внутри установочного пакета - 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>
...