发布于 2015-04-27 14:58:36 | 112 次阅读 | 评论: 0 | 来源: 网友投递
xhEditor 可视化XHTML编辑器
xhEditor是一个基于jQuery开发的简单迷你并且高效的在线可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
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",编辑此文件,如下:
<%@ 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。