1. 首頁
  2. 問答
  3. 使用elrte編輯在asp.net

使用elrte編輯在asp.net

2011-01-30 73 views

回答

4

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>

來源

2011-01-30 11:46:32 apros

相關問題

 相關問題