在asp.net中使用elrte编辑器
在asp.net中使用elrte编辑器
提问于 2011-01-30 17:04:05
如何在asp.net网站中使用elrte编辑器？(任何示例)
回答 1
Stack Overflow用户
发布于 2011-01-30 19:46:32
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 alert函数和设置textbox值来获取编辑器的内容，实际上可以在服务器代码中访问该值。
在我的例子中，完整的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4842052
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号