xhEditor在线编辑器使用实例
使用xhEditor的最大好处就是不用去处理烦人的HTML标签问题，研究了一天，记录备用
前台HTML：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Editor.aspx.cs" Inherits="xhEditor在线编辑器.Editor" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/xhEditor/xheditor-1.2.1.min.js" type="text/javascript"></script>
<script src="Scripts/xhEditor/xheditor_lang/zh-cn.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//初始化编辑器
$('#elem1').xheditor({ tools: 'full', width: '99.4%', height: '426px', forcePtag: false,
upBtnText: '上传', upMultiple: 1, upLinkUrl: 'upload.aspx',
upImgUrl: 'upload.aspx', upImgExt: 'jpg,jpeg,gif,png',
upFlashUrl: 'upload.aspx', upFlashExt: 'swf',
upMediaUrl: 'upload.aspx', upMediaExt: 'wmv,avi,wma,mp3,mid'
});
});
//存值
function setValue() {
$.ajax({
cache: false,
url: "upload.ashx",
data: { "text": $("#elem1").val() },
success: function (e) {
//alert("success");
window.location.href = "Success.aspx";
}
});
}
//取值
function getText() {
$.ajax({
cache: false,
url: "getValue.ashx",
success: function (e) {
//alert(e);
$("#getDIV").append(e);
}
});
}
</script>
</head>
<body>
<form id="form1" method="POST">
<div id="editorDIV" style="width: 900px">
<hr />
<br />
<textarea id="elem1" name="content" >test</textarea>
<br />
<hr />
<input type="button" value="提交" onclick="setValue()" />
<input type="reset" name="reset" value="重置" />
<input type="button" onclick="getText()" value="取值"/>
</div>
<hr/>
<div id = "getDIV"> </div>
</form>
</body>
</html>
<%--使用指南http://xheditor.com/manual/1--%>
处理后台页：
<%@ Page Language="C#" AutoEventWireup="true" CodePage="65001" %> <%@ Import Namespace="System" %>
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Configuration" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.Security" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.Web.UI.HtmlControls" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="System.Web.UI.WebControls.WebParts" %>
<%@ Import namespace="System.Data.SqlClient" %>
<script runat="server">
/*
* upload demo for c# .net 2.0
*
* @requires xhEditor
* @author Jediwolf<jediwolf@gmail.com>
* @licence LGPL(http://www.opensource.org/licenses/lgpl-license.php)
*
* @Version: 0.1.4 (build 111027)
*
* 注1：本程序仅为演示用，请您务必根据自己需求进行相应修改，或者重开发
* 注2：本程序将HTML5上传与普通POST上传转换为byte类型统一处理
*
*/ protected void Page_Load(object sender, EventArgs e)
{
Response.Charset = "UTF-8"; // 初始化一大堆变量
string inputname = "filedata";//表单文件域name
string attachdir = "upload"; // 上传文件保存路径，结尾不要带/
int dirtype = 1; // 1:按天存入目录 2:按月存入目录 3:按扩展名存目录 建议使用按天存
int maxattachsize = 2097152; // 最大上传大小，默认是2M
string upext = "txt,rar,zip,jpg,jpeg,gif,png,swf,wmv,avi,wma,mp3,mid"; // 上传扩展名
int msgtype = 2; //返回上传参数的格式：1，只返回url，2，返回参数数组
string immediate = Request.QueryString["immediate"];//立即上传模式，仅为演示用
byte[] file; // 统一转换为byte数组处理
string localname = "";
string disposition = Request.ServerVariables["HTTP_CONTENT_DISPOSITION"]; string err = "";
string msg = "''"; if (disposition != null)
{
// HTML5上传
file = Request.BinaryRead(Request.TotalBytes);
localname = Server.UrlDecode(Regex.Match(disposition, "filename=\"(.+?)\"").Groups[1].Value);// 读取原始文件名
}
else
{
HttpFileCollection filecollection = Request.Files;
HttpPostedFile postedfile = filecollection.Get(inputname); // 读取原始文件名
localname = postedfile.FileName;
// 初始化byte长度.
file = new Byte[postedfile.ContentLength]; // 转换为byte类型
System.IO.Stream stream = postedfile.InputStream;
stream.Read(file, 0, postedfile.ContentLength);
stream.Close(); filecollection = null;
} if (file.Length == 0) err = "无数据提交";
else
{
if (file.Length > maxattachsize) err = "文件大小超过" + maxattachsize + "字节";
else
{
string attach_dir, attach_subdir, filename, extension, target; // 取上载文件后缀名
extension = GetFileExt(localname); if (("," + upext + ",").IndexOf("," + extension + ",") < 0) err = "上传文件扩展名必需为：" + upext;
else
{
switch (dirtype)
{
case 2:
attach_subdir = "month_" + DateTime.Now.ToString("yyMM");
break;
case 3:
attach_subdir = "ext_" + extension;
break;
default:
attach_subdir = "day_" + DateTime.Now.ToString("yyMMdd");
break;
}
attach_dir = attachdir + "/" + attach_subdir + "/"; // 生成随机文件名
Random random = new Random(DateTime.Now.Millisecond);
filename = DateTime.Now.ToString("yyyyMMddhhmmss") + random.Next(10000) + "." + extension; target = attach_dir + filename;
//记录文件名和文件路径
Session["filename"] = filename;
Session["route"] = target;
try
{
CreateFolder(Server.MapPath(attach_dir)); System.IO.FileStream fs = new System.IO.FileStream(Server.MapPath(target), System.IO.FileMode.Create, System.IO.FileAccess.Write);
fs.Write(file, 0, file.Length);
fs.Flush();
fs.Close();
}
catch (Exception ex)
{
err = ex.Message.ToString();
} // 立即模式判断
if (immediate == "1") target = "!" + target;
target = jsonString(target);
if (msgtype == 1) msg = "'" + target + "'";
else msg = "{'url':'" + target + "','localname':'" + jsonString(localname) + "','id':'1'}";
}
}
} file = null; Response.Write("{'err':'" + jsonString(err) + "','msg':" + msg + "}");
} string jsonString(string str)
{
str = str.Replace("\\", "\\\\");
str = str.Replace("/", "\\/");
str = str.Replace("'", "\\'");
return str;
} string GetFileExt(string FullPath)
{
if (FullPath != "") return FullPath.Substring(FullPath.LastIndexOf('.') + 1).ToLower();
else return "";
} void CreateFolder(string FolderPath)
{
if (!System.IO.Directory.Exists(FolderPath)) System.IO.Directory.CreateDirectory(FolderPath);
} </script>
保存到数据库：
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Data; namespace xhEditor在线编辑器
{
/// <summary>
/// Summary description for getValue
/// </summary>
public class getValue : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string connStr = "server = .;database = Test1;uid=sa;pwd=password";
using (SqlConnection conn = new SqlConnection(connStr))
{
string id = Guid.NewGuid().ToString();
string sqlstr = "select top 1 text from dbo.editor";
using (SqlCommand cmd = new SqlCommand(sqlstr, conn))
{
conn.Open();
using (SqlDataAdapter dapter = new SqlDataAdapter(cmd))
{
DataTable ds = new DataTable();
dapter.Fill(ds);
context.Response.Write(ds.Rows[0][0].ToString());
}
}
}
} public bool IsReusable
{
get
{
return false;
}
}
}
}
从数据库读取数据：
using System;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Data;
namespace xhEditor在线编辑器
{
public partial class Success : System.Web.UI.Page
{
protected string text = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
string connStr = "server = .;database = Test1;uid=sa;pwd=password";
using (SqlConnection conn = new SqlConnection(connStr))
{
string id = Guid.NewGuid().ToString();
string sqlstr = "select top 1 text from dbo.editor";
using (SqlCommand cmd = new SqlCommand(sqlstr, conn))
{
conn.Open();
using (SqlDataAdapter dapter = new SqlDataAdapter(cmd))
{
DataTable ds = new DataTable();
dapter.Fill(ds);
text = ds.Rows[0][0].ToString();
}
}
}
}
}
}
层次结构：
数据库结构：
xhEditor在线编辑器使用实例的更多相关文章
- xheditor在线编辑器在.netMVC4中的使用
在线编辑器xheditor,测试感觉不错,特把使用方法记录如下 : 先看看基本使用方法,然后用实例来操作 1.xheditor 地址 http://xheditor.com/ 2.下载最新编辑器源码 ...
- xheditor在线编辑器的使用
在你所需要在线编辑器的工程目录下,导入xheditor_emot.xheditor_plugins和xheditor_skin.jquery四个文件夹,然后在textarea标签中加入: class= ...
- Html在线编辑器--基于Jquery的xhEditor轻量级编辑器
xhEditor V1.2.2 下载地址 开源中国社区: http://www.oschina.net/p/xheditor xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHT ...
- PHP.24-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图
添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace ...
- Angularjs在线编辑器
1.TextAngular: https://github.com/fraywing/textAngular textAngular是一个强大的Text-Editor/Wysiwyg 编辑器,用于An ...
- 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的.
- html在线编辑器汇总
1. TinyMCE 免费,开源,轻量的在线编辑器,基于 JavaScript,高度可定制,跨平台. 2. FCKEditor 免费,开源,用户量庞大的在线编辑器,有良好的社区支持. 3. YUI E ...
- 在线编辑器CKeditor，CKfinder
在线编辑器的分类: 常见的在线编辑器有很多,比较常用的有FCKeditor(在线编辑器——Ajax 浏览器 端服务器文件管理器),CKeditor(在线编辑器与服务器端文件管理器的分离,) 其中CKe ...
- 在线编辑器Ckeditor （1） - php （30）
在线编辑器 在线编辑器也称之为所见即所得编辑器,是一种常见的html源码编辑器. 所见即所得:用户在输入的时候,不论是格式和是样式都能被系统原封不动的保存,最后在查看的时候,可以按照用户输入的原来的结 ...
随机推荐
- Markdown中如何插入视频 > iframe？
关于Markdown中如何插入视频这一问题 网上众说纷纭,一直也没找到一个确切的答案,想来也是,这些东西毕竟还不算成熟.各种以前提供过的方法现在来讲,可能在更新或是关闭大潮中又没了 而且,Ma ...
- MySQL的五种日期和时间类型
MySQl中有多种表示日期和时间的数据类型.其中YEAR表示年份,DATE表示日期,TIME表示时间,DATETIME和TIMESTAMP表示日期和实践.它们的对比如下:YEAR ,字节数 ...
- 华为S5300系列交换机V100R005SPH008热补丁
S23_33_53-V100R005SPH008.pat 附件: 链接:https://pan.baidu.com/s/1XfIQ55g5pWI9aqmM7LHUew 密码:f2mu
- 虚拟信用卡 全球付, 工商银行国际E卡, Bancore, Entropay, Payoneer
虚拟信用卡 海外网购.购买国外域名空间.ebay等一些国外网站账号的激活这些情况都需要用到国际信用卡, 如果没有信用卡或者有信用卡但是对于安全性有所顾虑怎么办? 其实有一种东西叫做虚拟信用卡,正规银行 ...
- THE CUSTOMISER
http://www.wanga.com/cu.php The Customiser incorporates all of the features of Magic Mouse. It also ...
- cmake和make区别
大家都知道,写程序大体步骤为: 1.用编辑器编写源代码,如.c文件. 2.用编译器编译代码生成目标文件,如.o. 3.用链接器连接目标代码生成可执行文件,如.exe. 但如果源文件太多,一个一个编译时 ...
- Testing your Xamarin app on Android device
I've develop a test application in Xamarin Studio (Android with C#) and wanted to test it on my phon ...
- python文本 字符串对齐
python 字符串对齐 场景: 字符串对齐 python提供非常容易的方法,使得字符串对齐 >>> print("abc".center (30,'-')) ...
- RobotFramework自动化3-搜索案例
前言 RF系列主要以案例为主,关键字不会的可以多按按F5,里面都有很详细的介绍,要是纯翻译的话,就没太大意义了,因为小编本来英语就很差哦! 前面selenium第八篇介绍过定位一组搜索结果,是拿百度搜 ...
- 单点登录 之 OAuth
OAuth2.0是什么 OAuth2.0是什么——豆瓣和QQ的故事 OAuth简单说就是一种授权的协议,只要授权方和被授权方遵守这个协议去写代码提供服务,那双方就是实现了OAuth模式. 举个例子,你 ...