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。
2773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
