在 VS2013的ASPNET网站开发中用 xheditor v1.1.13 作为HTML编辑器
2015-03-17 15:22
127 查看
要用vs2013开发一个博客网站,.net framework 4,需要一个HTML编辑器作为写文章的工具。经多方试用,排除了dotnettextbox、kceditor。觉得xheditor 不错,现将使用方法记录如下:
1.到http://download.csdn.net/download/chenhaoying/4274663下载,会得到一个名为:“xheditor-1.1.13在asp.net中使用.rar”的文件。
2.用vs2013新建一个网站,网站名任何,此例为Test4hxEditor.如下图。
3.将xheditor-1.1.13在asp.net中使用.rar 文件中的xheditor_emot、xheditor_skin两个文件夹及xheditor-1.1.13-zh-cn.min.js、jquery-1.4.4.min.js两个文件解压到上网站所在的文件夹“d:\快盘\Test4hxEditor”内。
4.在vs2013内为TestfhxEditor添加一个Web窗体,此例中名为Default。
5.在vs2013内打开Default.aspx文件,修改如下,其中粗体显示的为修改增加的内容。如下所示:
6.将Default.aspx设计视图下,双击其中的"Button"按钮,进入Default.aspx.cs文件的编辑界面,并将其编辑为如下所示:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = elm1.Value;
}
}
7.在vs2013内打开Web.config文件,修改成如下:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpRuntime requestValidationMode="2.0" />
</system.web>
</configuration>
8.运行网站。出现一个编辑器,在其中输入内容并编辑,完成后单击按"Button"按钮,可将所编辑的内容传给label1。如下图所示。
1.到http://download.csdn.net/download/chenhaoying/4274663下载,会得到一个名为:“xheditor-1.1.13在asp.net中使用.rar”的文件。
2.用vs2013新建一个网站,网站名任何,此例为Test4hxEditor.如下图。
3.将xheditor-1.1.13在asp.net中使用.rar 文件中的xheditor_emot、xheditor_skin两个文件夹及xheditor-1.1.13-zh-cn.min.js、jquery-1.4.4.min.js两个文件解压到上网站所在的文件夹“d:\快盘\Test4hxEditor”内。
4.在vs2013内为TestfhxEditor添加一个Web窗体,此例中名为Default。
5.在vs2013内打开Default.aspx文件,修改如下,其中粗体显示的为修改增加的内容。如下所示:
<pre name="code" class="plain"><%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="xheditor-1.1.13-zh-cn.min.js"></script> <script type ="text/javascript"> $(document).ready(function () { $('#elm1').xheditor({ tools: 'GStart,Fontface,FontSize,Blocktag,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,Separator,Align,List,Outdent,Indent,Separator,Cut,Copy,Paste,Pastetext,Separator,Link,Unlink,Img,Emot,Table,Separator,About,GEnd', skin: 'default', showBlocktag: false, internalScript: false, internalStyle: false, width: 600, height: 300, loadCSS: 'http://xheditor.com/test.css', fullscreen: false, sourceMode: false, forcePtag: true, upImgUrl: "pictures", upImgExt: "jpg,jpeg,gif,png" }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <textarea runat="server" id="elm1" name="content" rows="20" cols="100"></textarea> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </div> </form> </body> </html>
6.将Default.aspx设计视图下,双击其中的"Button"按钮,进入Default.aspx.cs文件的编辑界面,并将其编辑为如下所示:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = elm1.Value;
}
}
7.在vs2013内打开Web.config文件,修改成如下:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.0" />
<httpRuntime requestValidationMode="2.0" />
</system.web>
</configuration>
8.运行网站。出现一个编辑器,在其中输入内容并编辑,完成后单击按"Button"按钮,可将所编辑的内容传给label1。如下图所示。
至此,xheditor 已基本可用,至于图片上传的功能,参见 http://blog.csdn.net/u010966077/article/details/23653919[/code]
相关文章推荐
- 在 VS2013的ASPNET站点开发中用 xheditor v1.1.13 作为HTML编辑器
- xheditor1.1.14在asp.net网站开发中作为可上传本地图片的在线编辑器
- VS2013 MFC开发 对话框程序 对话框编辑器的快捷键
- vs2013开发64位网站和项目设置
- ... 作为 input type="button/submit/reset"的一个代替者,功能更强大, 标签的语义也更明确 是实际开发中推荐使用的一个html标签.
- 网站开发必知基础(html)
- 高性能的网站开发:HTML标识/CSS优化
- 网站开发语言:dotnet vs Java vs PHP
- VS 2003 打开/开发 网站项目时报错:“http/1.1. 400 bad request”
- 选择PHP作为网站开发语言的原因分享
- 如何开发HTML编辑器
- 网站开发中/Web 应用程序中 在VS.NET 2003 中打包部署水晶报表
- <杂谈1002>HTML作为GUI前段,Java/NDK作为业务后端开发方式总结
- 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)
- 选择PHP作为网站开发语言的原因
- 网站开发应该知道的事--作为一个后台开发来说也有必知道
- 教你在线开发HTML编辑器
- 网站开发中/Web 应用程序中 在VS.NET 2003 中打包部署水晶报表
- [Web开发] PSD 转换成HTML/CSS 的工具网站
- JS开发的HTML编辑器