All geek questions in one place

Use elrte editor in asp.net

how can i use elrte editor inside asp.net website? (any example)

+3
source share
1 answer

Elrte Editor is a clean javascript solution (clearer jQuery), so you need to use some javascript in asp.net to access any of its functions.

First of all, you should add some required folder with all its inserts to the project. It can be found inside the installation package elrte-1.2.zip. You must copy the following folders into your project: css, js, images with all subfolders and its contents.

Secondly, add a link to your asp page, like here:

    <!-- 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>
+4

Source: https://habr.com/ru/post/1788783/

More articles:


All Articles