ueditor百度富文本编辑器使用解决方案

写网站的时候都是用asp.net2.0写的

但是看了百度的富文本编辑器使用说明都是。net framework 4.0 版本的

百度了半天看的各种的解决方案

我把最新版本的百度富文本编辑器下载下来 改了.sln 文件信息 可以用vs2008打开 当然会报一些错误 。。类名不存在等等

百度了半天还是没解决问题后来放弃了。(最终还是用了百度的)

于是就找了kindeditor但是觉得他长得有点丑。。还是放弃了

又接着百度ueditor配置方法看到了一篇博文

http://blog.sina.com.cn/s/blog_55b0c6470100y8kp.html

百度编辑器 ueditor1.1.8.1 For Asp.net 配置 上传功能详解

让我恍然大悟 因为开始的解决方案是如何让最新版本的 在.net framework2.0上部署 为什么不换个思路低版本的在。net framework上部署呢

好了不说感悟了大致过程和上面博主写的差不错我说一下配置过程中的细节

1.当然是下载文件了

2 新建ueditor文件夹 将下载的文件粘贴进来如图所示目录结构

3.接下来修改dialogs/image/image.html

url:‘../../server/upload/net/up.ashx‘, // 上传处理页面的url地址

4在server/upload/net/下新建up.ashx一般处理程序用来处理上传过来的图片

up.ashx

using System;
using System.Collections;
using System.Data;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.IO;

namespace 编辑器.ueditor.server.upload.net
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class up : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");
            string uploadPath = "UserFiles/UEditorUploads";   //保存路径
            string fileType = ".jpg,.jpeg,.gif,.png,.bmp";   //文件允许格式
            int fileSize = 2048;    //文件大小限制,单位KB
            string state = "";
            string sFileName = "";
            string retPath = "";
            HttpPostedFile oFile = context.Request.Files[0];
            string pictitle = context.Request.Form["pictitle"];  //获得图片描述
            string fileExtension = System.IO.Path.GetExtension(oFile.FileName).ToLower();
            if (fileType.ToLower().IndexOf(fileExtension) > -1 && IsAllowedExtension(oFile))//检测是否为允许的上传文件类型
            {
                if (fileSize * 1024 >= oFile.ContentLength)
                {
                    try
                    {
                        string DirectoryPath;
                        // 取消下面注释按文件夹归档储存
                        //DirectoryPath = uploadPath + DateTime.Now.ToString("yyyy-MM");
                        DirectoryPath = uploadPath;
                        sFileName = DateTime.Now.ToString("yyyyMMddHHmmssffff");  //文件名称
                        //生成随机数,避免时间完全相同上传
                        Random rnd = new Random();
                        int numSJ = rnd.Next(1000, 9999);
                        sFileName = sFileName + Convert.ToString(numSJ);
                        string FullPath = "~/" + DirectoryPath + "/" + sFileName + fileExtension;//最终文件路径
                        if (!Directory.Exists(context.Server.MapPath("~/" + DirectoryPath)))
                            Directory.CreateDirectory(context.Server.MapPath("~/" + DirectoryPath));
                        oFile.SaveAs(context.Server.MapPath(FullPath));
                        //Response.Write("parent.reloadImg(‘" + Page.ResolveUrl(FullPath) + "‘);" + "location.href=‘upload.aspx?url=" + Page.ResolveUrl(FullPath) + "‘;");
                        //string retPath = "/" + DirectoryPath + "/" + sFileName + fileExtension;
                        retPath = sFileName + fileExtension;
                        state = "SUCCESS";
                    }
                    catch (Exception ex)
                    {
                        //Response.Write("上传文件失败。" + ex.Message);
                        //MessageBox.ShowAndRedirect(this, "上传文件失败。" + ex.Message, "upload.aspx");
                        state = "上传文件失败," + ex.Message;
                    }
                }
                else
                {
                    state = "上传文件大小超过限制";
                }
            }
            else
            {
                state = "上传文件扩展名是不允许的扩展名";
            }
            //返回上传信息
            context.Response.Write("{‘url‘:‘" + retPath + "‘,‘title‘:‘" + pictitle + "‘,‘state‘:‘" + state + "‘}");
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        /// <summary>
        /// C#检测真实文件类型函数
        /// </summary>
        /// <param name="hifile"></param>
        /// <returns></returns>
        private bool IsAllowedExtension(HttpPostedFile hifile)
        {
            bool ret = false;
            System.IO.Stream fs = hifile.InputStream;
            System.IO.BinaryReader r = new System.IO.BinaryReader(fs);
            string fileclass = "";
            byte buffer;
            try
            {
                buffer = r.ReadByte();
                fileclass = buffer.ToString();
                buffer = r.ReadByte();
                fileclass += buffer.ToString();
            }
            catch
            {
                return false;
            }
            //r.Close();
            //fs.Close();

            //String[] fileType = { "255216", "7173", "6677", "13780", "8297", "5549", "870", "87111", "8075" };
            //纯图片
            String[] fileType = {
            "7173",    //gif
            "255216",  //jpg
            "13780",   //png
            "6677"     //bmp
        };
            for (int i = 0; i < fileType.Length; i++)
            {
                if (fileclass == fileType[i])
                {
                    ret = true;
                    break;
                }
            }
            return ret;
        }
    }
}

5 修改ueditor/editor_config.js

(function () {
    //这里你可以配置成ueditor目录在您网站中与根目录之间的相对路径或者绝对路径(指以http开头的绝对路径)
    //window.UEDITOR_HOME_URL可以在外部配置,这里就不用配置了
    //场景:如果你有多个页面使用同一目录下的editor,因为路径不同,所以在使用editor的页面上配置这个路径写在这个js外边
    //var URL = window.UEDITOR_HOME_URL || ‘../‘;
    var tmp = window.location.pathname,
    //   URL= tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","");//这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径(指以http开头的绝对路径)
     URL = "ueditor" //该值与第二步新建的文件夹同名
    UEDITOR_CONFIG = {
    imagePath:"UserFiles/UEditorUploads/", //图片文件夹所在的路径,用于显示时修正后台返回的图片url!具体图片保存路径需要在后台设置。!important
        compressSide:0, //等比压缩的基准,确定maxImageSideLength参数的参照对象。0为按照最长边,1为按照宽度,2为按照高度
        maxImageSideLength:900, //上传图片最大允许的边长,超过会自动等比缩放,不缩放就设置一个比较大的值
        relativePath:true,      //是否开启相对路径。开启状态下所有本地图片的路径都将以相对路径形式进行保存.强烈建议开启!

        catcherUrl:"getImage.php",             //处理远程图片抓取的程序地址
        UEDITOR_HOME_URL:URL, //为editor添加一个全局路径

6 test.aspx 测试文件

ValidateRequest="false"必须有这段代码 因为asp.net界面提交信息时是不允许输入html javascript代码为了防止脚本注入攻击

<%@ Page Language="C#"  ValidateRequest="false"  AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="编辑器.test" %>

<!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 id="Head1" runat="server">

<title>Ueditor测试</title>
	<meta  http-equiv="X-UA-Compatible" content="IE=5"/>
        <!-- 功能:解决兼容性视图问题-->
<script src="ueditor/editor_config.js" type="text/javascript"></script>

<script src="ueditor/editor_all.js" type="text/javascript"></script>

<link href="ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<form id="form1" runat="server">

<div id="editorValuedata" runat="server"  style="display:none;"><font color="gray">文明上网,从你我做起</font></div>

<div name="editorValue" runat="server" id="editorValue"></div>

<asp:Button ID="btnSubmit" runat="server" Text="点击我一下告诉你提交的内容" 

onclick="btnSubmit_Click"/>

</form>

<script type="text/javascript">

    var editor = new baidu.editor.ui.Editor({//实例化编辑器

        UEDITOR_HOME_URL: ‘ueditor/‘,

        iframeCssUrl: ‘ueditor/themes/default/iframe.css‘

    });

    editor.render(‘editorValue‘); //将编译器渲染到容器

    editor.setContent(document.getElementById(‘editorValuedata‘).innerHTML); //设置初始值,你可以将初始值放到<div id="editorValuedata" style="display:none"></div>内

  //  document.getElementById(‘editorValuedata‘).innerHTML = "";

</script>

</body>
</html>

test.aspx后台代码 如何获取前台的值

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

namespace 编辑器
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

            }
        }

        ///<summary>
        /// 获取提交的内容
        ///</summary>
        ///<param name="sender"></param>
        ///<param name="e"></param>
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            string str = this.editorValue.InnerHtml;
            //测试获取编辑文本的值
            string str1 = Request.Params["editorValue"].ToString();
            ClientScript.RegisterClientScriptBlock(this.GetType(), "s", "alert(‘" + str1 + "‘)", true);
            this.editorValuedata.InnerHtml = str1;
        }
    }
}

OK了

时间: 2024-10-20 06:20:22

ueditor百度富文本编辑器使用解决方案的相关文章

UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG

[转]UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

转自http://www.cnblogs.com/VAllen/p/UEditor-InitialFrameWidth-Auto.html UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加

Ueditor百度富文本编辑器添加h5手机端预览功能

一.需求分析 项目中用到富文本编辑器的地方很多,富文本编辑器一般都是在pc后台上,因为前端是手机端,因此每次再富文本编辑内容保存以后,在手机端展示的样式和我们在富文本中编辑的不太一样,因此就需要在编写完内容之后可以模拟手机端进行预览一下,但是后端用富文本编辑器的地方比较多,不适合在每个页面进行开发,因此做成插件功能放入ueditor之中的方式改动的代价比较小. 首先看下效果 二.代码 先在ueditor.css中添加按钮样式图片: 路径:ueditor\themes\default\css\ue

UEditor百度富文本编辑器--preview在线预览时头部被挡住的解决方案

问题截图: 正常情况应该是如下显示: 解决方案: 1.打开ueditor/dialogs/preview/preview.html 2.找到body节点下面这一句 document.getElementById('preview').innerHTML = editor.getContent(); 在它上面加一句 parent.document.getElementById('edui_fixedlayer').style.top = '46px'; PS:至于这个46px,得根据头部被挡住部分

ueditor百度富文本编辑器linux下报错: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the file system

具体报错信息如下 java.io.FileNotFoundException: class path resource [config.json] cannot be resolved to absolute file path because it does not reside in the file system: jar:file:/home/java/wcq-new-server/wcq/wcq-admin/target/wcq-admin.jar!/BOOT-INF/classes!

Django集成百度富文本编辑器uEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 首先从ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEdi

Jfinal整合百度富文本编辑器ueditor

ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的controller) 后台添加该路由指定的controller package com.sandu.mega.admin.ueditor; import com.jfinal.aop.Clear; import com.jfinal.core.Controller; import com.jfinal.kit.Ret; import com.jfinal.upload.UploadFile; im

在MVC中应用百度富文本编辑器

1.下载.NET版本的百度富文本编辑器,前往 下载.NET版本百度富文本框 2.解压下载的.zip压缩包,将utf8-.net文件夹名称改为:ueditor,复制到MVC根目录下面.结构如下: App_Code 上的文件是应用程序的源码 Config.cs 负责读取配置文件 Handler.cs 是请求处理器的基类,提供了一些基本对象的访问以及输出控制.如果需要增加处理器,应该从该基类继承 PathFormatter.cs 解析 PathFormat,把信息填充为运行时信息. *Handler.

百度富文本编辑器

[下载所需资源]---------------------------------------百度搜索-- 百度富文本编辑器--进入首页(百度编辑器-UEditor-首页) 百度编辑器 - UEditor - 首页-- 上方导航[下载]--选择对应的版本下载(我选的是 1.4.3.3 .Net 版本 utf-8版) [把资源引入自己的项目]--------------------------------------- 这里,模拟需求:新建一个项目  MyTest,要使用  富文本编辑器的功能.