xheditor1.1.14在asp.net网站开发中作为可上传本地图片的在线编辑器

标签：xheditor   upload   .net   html   

xheditor是一个基于jQuery开发的跨平台轻量可视化XHTML编辑器，功能强大，使用方便，CSDN网站的发表文章网页就使用了该编辑器，下面介绍在vs2013的环境下开发网页时使用该编辑器并实现本地图片上传的一种方法。

1.网上搜索并下载文件xheditor1.1.1文件包，解压后应该是一个包括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",编辑此文件,如下:

注意理解其中粗体部分.

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。

xheditor1.1.14在asp.net网站开发中作为可上传本地图片的在线编辑器

标签：xheditor   upload   .net   html   

原文地址：http://blog.csdn.net/jhycjhyc/article/details/44877679