xheditor1.1.14在asp.net网站开发中作为可上传本地图片的在线编辑器
2015-04-04 23:45
776 查看
xheditor是一个基于jQuery开发的跨平台轻量可视化XHTML编辑器，功能强大，使用方便，CSDN网站的发表文章网页就使用了该编辑器，下面介绍在vs2013的环境下开发网页时使用该编辑器并实现本地图片上传的一种方法。
1.网上搜索并下载文件xheditor1.1.14文件包，解压后应该是一个包括jquery、xheditor_emo、t xheditor_plugins、 xheditor_skin、demos等文件夹及xheditor-1.1.14-zh-cn.min.js等文件的一个文件夹。
2.启动vs2013,执行 “文件-新建-网站”，在“新建网站”窗口中，选择“Visual c#",".NET Framework 4","ASP.NET空网站”，“文件系统”， “D:\WebSite1"。
3.将第一步中所述的jquery、xheditor_emo、t xheditor_plugins、 xheditor_skin等四个文件夹全部复制粘贴到第二中所述的“D:\WebSite1"文件夹内.
再将第一步所述的文件压内的"xheditor-1.1.14-zh-cn.min.js"复制粘贴到第二中所述的“D:\WebSite1"文件夹内.
4.将第一步中所述的demos文件夹内的upload.aspx、saveremoteimg.aspx这两个文件复制粘贴到第二中所述的“D:\WebSite1"文件夹内.
5.在“D:\WebSite1"文件夹内新建一个名为"upload"的文件夹.
6.回到vs2013,为网站添加一个Web窗体,名为"Default.aspx",编辑此文件,如下:
<%@ 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/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../xheditor-1.1.14-zh-cn.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="300px" TextMode="MultiLine" Width="948px"
CssClass="xheditor {tools: 'Cut,Copy,Paste,Pastetext,Fontface,FontSize,Blocktag,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,Align,List,Outdent,Indent,Link,Unlink,Img,Emot,Table,About', skin: 'default', showBlocktag:
false, internalScript: false, internalStyle: false, width: 948, height: 300, loadCSS: 'http://xheditor.com/test.css', fullscreen: false, sourceMode: false, forcePtag: true, upImgUrl: 'upload.aspx', upImgExt: 'jpg,jpeg,gif,png'}">
</asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
注意理解其中粗体部分.
7.编辑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 = TextBox1.Text;
}
}
注意粗体部分.
8.编辑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>
注意粗体部分.
9.大功告成,运行Default.aspx,即在网页上出现一个漂亮的编辑器,利用其中的图片功能,可将本地或互联网上图片上传至服务器.按button按钮,即可将编辑好的内容传给Label1。
1.网上搜索并下载文件xheditor1.1.14文件包，解压后应该是一个包括jquery、xheditor_emo、t xheditor_plugins、 xheditor_skin、demos等文件夹及xheditor-1.1.14-zh-cn.min.js等文件的一个文件夹。
2.启动vs2013,执行 “文件-新建-网站”，在“新建网站”窗口中，选择“Visual c#",".NET Framework 4","ASP.NET空网站”，“文件系统”， “D:\WebSite1"。
3.将第一步中所述的jquery、xheditor_emo、t xheditor_plugins、 xheditor_skin等四个文件夹全部复制粘贴到第二中所述的“D:\WebSite1"文件夹内.
再将第一步所述的文件压内的"xheditor-1.1.14-zh-cn.min.js"复制粘贴到第二中所述的“D:\WebSite1"文件夹内.
4.将第一步中所述的demos文件夹内的upload.aspx、saveremoteimg.aspx这两个文件复制粘贴到第二中所述的“D:\WebSite1"文件夹内.
5.在“D:\WebSite1"文件夹内新建一个名为"upload"的文件夹.
6.回到vs2013,为网站添加一个Web窗体,名为"Default.aspx",编辑此文件,如下:
<%@ 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/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../xheditor-1.1.14-zh-cn.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Height="300px" TextMode="MultiLine" Width="948px"
CssClass="xheditor {tools: 'Cut,Copy,Paste,Pastetext,Fontface,FontSize,Blocktag,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,Align,List,Outdent,Indent,Link,Unlink,Img,Emot,Table,About', skin: 'default', showBlocktag:
false, internalScript: false, internalStyle: false, width: 948, height: 300, loadCSS: 'http://xheditor.com/test.css', fullscreen: false, sourceMode: false, forcePtag: true, upImgUrl: 'upload.aspx', upImgExt: 'jpg,jpeg,gif,png'}">
</asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
注意理解其中粗体部分.
7.编辑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 = TextBox1.Text;
}
}
注意粗体部分.
8.编辑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>
注意粗体部分.
9.大功告成,运行Default.aspx,即在网页上出现一个漂亮的编辑器,利用其中的图片功能,可将本地或互联网上图片上传至服务器.按button按钮,即可将编辑好的内容传给Label1。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET MVC 网站开发总结（三） ——图片截图上传
- 百度UEditor在线编辑器上传图片提示网络连接错误，请检查配置后重试 asp.net 4.0
- asp.net微信开发第十篇----使用百度编辑器编辑图文消息，上传图片、微信视频
- 在线编辑器Kindedior在ASP.NET下实现图片批量上传
- ASP.NET动态网站开发培训-26.在线编辑器FreeTextBox的使用
- ASP.NET MVC 网站开发总结（三） ——图片截图上传
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误，请检查配置后重试
- eWebEditor V7.3 for asp.net版本编辑器带后台版本_新增加防止图片木马上传
- Web图片上传插件开发文档-ASP.NET(C#)
- 百度Ueditor编辑器的使用,ASP.NET也可上传图片
- 开发ASP.NET MVC 在线录音录像（音视频录制并上传）
- asp.net应用百度编辑器（UEditor)上传图片和上传附件不成功的解决办法
- ASP.Net中使用FreeTextBox图片上传功能的修改(点上传直接返回编辑器显示图片)
- asp.net实现上传图片显示本地绝对路径图片
- KindEditor上传本地图片在ASP.NET MVC的配置
- asp.net 删除编辑器上传的图片
- ASP.NET截取上传视频，swf文件第一帧作为预览图片
- asp.net，C#，sqlserver，数据库，iis，js，异常，兼容，搜索，性能，备份，编辑器，存取分离，lucene，SEO优化，产品，运营，MVC，三层架构，nhibernate，microsoft，freamwork，网站开发联盟群号：
- xhEditor 在asp.net mvc和webform下配置图片上传
- asp.net 上传图片时，预览本地图片，支持IE6、IE8、火狐