引言

上篇中简单介绍了Ueditor的两种定制方式,想了解的请戳这里:Ueditor的两种定制方式。在项目中,Ueditor该怎么使用更方便呢?很容易让人想到将ueditor放入用户控件页,可以拖到需要的地方。

Ueditor结构

Ueditor使用步骤

一,修改配置文件ueditor.config.js,配置Ueditor路径

  window.UEDITOR_HOME_URL = "/Ueditor/";//"相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
     var URL = window.UEDITOR_HOME_URL || getUEBasePath();//获取Ueditor的路径
     //测试用 如果不知道路径是什么可以通过alert来测试
     //alert("URL:" + URL);
     //alert("window.UEDITOR_HOME_URL:" + window.UEDITOR_HOME_URL);
     //alert("getUEBasePath():" + getUEBasePath());

上传图片的路径配置。这里将上传的文件放入网站根目录Upload文件夹下,修改配置文件,将修正地址改为URL+“../”

 , imagePath: URL + "../"                     //图片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
         //,imageFieldName:"upfile"                   //图片数据的key,若此处修改,需要在后台对应文件修改对应参数
         //,compressSide:0                            //等比压缩的基准,确定maxImageSideLength参数的参照对象。0为按照最长边,1为按照宽度,2为按照高度
         //,maxImageSideLength:900                    //上传图片最大允许的边长,超过会自动等比缩放,不缩放就设置一个比较大的值,更多设置在image.html中
         , savePath: ['Upload']//['UploadFile', 'upload2', 'upload3']      //图片保存在服务器端的目录, 默认为空, 此时在上传图片时会向服务器请求保存图片的目录列表,
         // 如果用户不希望发送请求, 则可以在这里设置与服务器端能够对应上的目录名称列表
         //比如: savePath: [ 'upload1', 'upload2' ]

         //涂鸦图片配置区
         , scrawlUrl: URL + "net/scrawlUp.ashx"           //涂鸦上传地址
         , scrawlPath: URL + "../"                            //图片修正地址,同imagePath

         //附件上传配置区
         , fileUrl: URL + "net/fileUp.ashx"               //附件上传提交地址
         , filePath: URL + "../"                   //附件修正地址,同imagePath
         //,fileFieldName:"upfile"                    //附件提交的表单名,若此处修改,需要在后台对应文件修改对应参数

         //远程抓取配置区
         //,catchRemoteImageEnable:true               //是否开启远程图片抓取,默认开启
         , catcherUrl: URL + "net/getRemoteImage.ashx"   //处理远程图片抓取的地址
         , catcherPath: URL + "../"                  //图片修正地址,同imagePath
         //,catchFieldName:"upfile"                   //提交到后台远程图片uri合集,若此处修改,需要在后台对应文件修改对应参数
         //,separater:'ue_separate_ue'               //提交至后台的远程图片地址字符串分隔符
         //,localDomain:[]                            //本地顶级域名,当开启远程图片抓取时,除此之外的所有其它域名下的图片都将被抓取到本地,默认不抓取127.0.0.1和localhost

         //图片在线管理配置区
         , imageManagerUrl: URL + "net/imageManager.ashx"       //图片在线管理的处理地址
         , imageManagerPath: URL + "../"                                    //图片修正地址,同imagePath

         //屏幕截图配置区
         , snapscreenHost: location.hostname                                 //屏幕截图的server端文件所在的网站地址或者ip,请不要加http://
         , snapscreenServerUrl: URL + "net/imageUp.ashx" //屏幕截图的server端保存程序,UEditor的范例代码为“URL +"server/upload/net/snapImgUp.ashx"”
         , snapscreenPath: URL + "../"
         , snapscreenServerPort: location.port                                   //屏幕截图的server端端口
         //,snapscreenImgAlign: ''                                //截图的图片默认的排版方式

         //word转存配置区
         , wordImageUrl: URL + "net/imageUp.ashx"             //word转存提交地址
         , wordImagePath: URL + "../"                       //
         //,wordImageFieldName:"upfile"                     //word转存表单名若此处修改,需要在后台对应文件修改对应参数

同时修改Uploader.cs类文件,添加“~/”

  pathbase = pathbase + DateTime.Now.ToString("yyyy-MM-dd") + "/";
  uploadpath = cxt.Server.MapPath("~/"+pathbase);//获取文件上传路径 

Config.cs类

 /// <summary>
 /// Config 的摘要说明
 /// </summary>
 public class Config
 {
     public static string[] ImageSavePath = new string[] { "Upload" };
 }

二,新建Ueditor.ascx用户控件页。
1.引入需要的js文件

 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Ueditor.ascx.cs" Inherits="Wolfy.UeditorDemo.UC.Ueditor" %>
 <script type="text/javascript" src="../Ueditor/ueditor.config.js"></script>
 <script type="text/javascript" src="../Ueditor/ueditor.all.js"></script>
 <script type="text/javascript" src="../Ueditor/lang/zh-cn/zh-cn.js"></script>

2.添加editor容器,并实例化uditor

 <link href="/Ueditor/themes/default/css/ueditor.css" rel="stylesheet" />
 <div id='myEditor' runat="server"></div>
 <script type="text/javascript" charset="utf-8">
     window.onload = function () {
         UE.ui.Editor({
             //这部分配置 在ueditor.config.js配置文件中,放在这里是希望可以在Ueditor.ascx.cs中可以动态设置。可以将动态配置的功能在这里设置
             wordCount: '<%=WordCount?"true":"false"%>'
             , maximumWords: '<%=MaximumWords%>'
             , wordCountMsg: '<%=WordCountMsg%>'
             , wordOverFlowMsg: '<%=WordOverFlowMsg%>'
             , initialContent: '<%=SetContents %>'
         }).render("<%=myEditor.ClientID%>");
     }
 </script>

3,Ueditor.ascx.cs代码,设置常用属性,这样就可以在引入用户控件的页面,动态的设置属性了。

  public partial class Ueditor : System.Web.UI.UserControl
     {
         public Ueditor()
         {
             style = new System.Text.StringBuilder();
         }
         private string setContents;
         /// <summary>
         /// 给文本赋值 需html解码
         /// </summary>
         public string SetContents
         {
             get
             { return setContents; }
             set
             {
                 setContents = Server.HtmlDecode(value);
             }
         }
         private string editorName;
         /// <summary>
         /// 返回文本编辑内容
         /// </summary>
         public string EditorName
         {
             get
             {
                 return editorName;
             }
             set
             {
                 editorName = value;
                 if (value == "")
                 {
                     //默认值
                     editorName = "editorValue";
                 }
             }
         }
         private bool isHide;
         ///<summary>
         ///控件是否隐藏
         ///</summary>
         public bool IsHide
         {
             get { return isHide; }
             set
             {
                 isHide = value;

                 if (isHide)
                 {
                     style.Append("display:none;");
                 }
                 else
                 {
                     style.Append("display:block;");
                 }
             }
         }
         /// <summary>
         /// 设置高度
         /// </summary>
         public string Height { get; set; }
         /// <summary>
         /// 设置宽度
         /// </summary>
         public string Width { get; set; }
         ///<summary>
         ///设置相对路径
         ///</summary>
         public string EditorPath { get; set; }
         private bool wordCount = false;
         /// <summary>
         /// 是否开启字数统计
         /// </summary>
         public bool WordCount
         {
             get { return wordCount; }
             set { wordCount = value; }
         }

         ;
         /// <summary>
         /// 允许的最大字符数
         /// </summary>
         public int MaximumWords
         {
             get { return maximumWords; }
             set { maximumWords = value; }
         }
         /// <summary>
         /// 字数统计提示
         /// </summary>
         public string WordCountMsg
         {
             get
             {
                 return "当前已输入 {#count} 个字符,您还可以输入{#leave} 个字符";
             }
         }

         /// <summary>
         /// 超出字数限制提示
         /// </summary>
         public string WordOverFlowMsg
         {
             get
             {
                 return "<span style=\"color:red;\">你输入的字符个数已经超出最大允许值,服务器可能会拒绝保存!</span>";
             }
         }
         private System.Text.StringBuilder style = null;
         protected void Page_Load(object sender, EventArgs e)
         {
             // EditorPath = Request.ApplicationPath;
             if (string.IsNullOrEmpty(Height))
             {
                 Height = "100px";
             }
             if (string.IsNullOrEmpty(Width))
             {
                 Width = "100px";
             }
             style.Append("Width:" + Width + ";Height:" + Height + ";");
             AddStyle(style);
             //为富文本编辑器 添加name属性 根据name得到 富文本内容 必须
             myEditor.Attributes.Add("name", this.EditorName);

         }
         /// <summary>
         ///  为用户控件 添加样式
         /// </summary>
         /// <param name="strStyle"></param>
         private void AddStyle(System.Text.StringBuilder strStyle)
         {
             if (string.IsNullOrEmpty(myEditor.Attributes["style"]))
             {
                 myEditor.Attributes.Add("style", style.ToString());
             }
             else
             {
                 myEditor.Attributes["style"] += style;
             }
         }
     }

测试

将用户控件拖入Test.aspx页面。

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Wolfy.UeditorDemo.Test" %>

 <%@ Register Src="UC/Ueditor.ascx" TagName="Ueditor" TagPrefix="wolfy" %>

 <!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>
 </head>
 <body>
     <form id="form1" runat="server">
         <div>
             <wolfy:Ueditor ID="MyUeditor" runat="server" Width="600px" IsHide="false" Height="300px" EditorName="myEditor" />
         </div>
     </form>
 </body>
 </html>

结果:

上传图片

需要将Uploader.cs和Config.cs的属性中生成操作改为“内容”,还应注意路径问题。

选择图片单击确定,就可以将图片加入编辑器

测试获取编辑器内容,文字及图片等信息。这里必须在web.config配置文件中取消校验,因为获取到的内容可能含有标签,如果添加,则会出现如下黄页错误

在ueditor/net/web.config中将下面的信息,复制到网站的web.config中即可。

     <httpRuntime requestValidationMode="2.0" maxRequestLength="102400 "/>
         <pages validateRequest="false" controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"></pages>
         <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="zh-CN"/>

测试:

    protected void btnSave_Click(object sender, EventArgs e)
         {
             //获取ueditor内容
             string content = Server.HtmlEncode(Request.Form[MyUeditor.EditorName]);
             Response.Write(Server.HtmlDecode(content));
         }

结果

ueditor的赋初值

比如在写随笔的时候,编辑功能的实现,就是这种将数据库中存的内容,重新填入编辑器,编辑后然后保存。这里,由于lz电脑重装系统后,sql一直安装不上就不再测试了。

已经将该实现封装在用户控件的cs中了,可以直接将得到的htmlencode字符串赋给SetContents属性即可。

 //可以通过下面的设置 实现编辑功能
             MyUeditor.SetContents = "";

总结

Ueditor在使用的时候,路径确实是很头疼的问题,这里将其放入用户控件页,也是使用方便的一种途径。

Ueditor配置及在项目中的使用的更多相关文章

  1. log4net.dll配置以及在项目中应用 zt

    1 首先在项目中引用log4net.dll,然后项目中添加一个配置文件log4net.config <?xml version="1.0" encoding="ut ...

  2. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  3. javaWeb项目中Web.xml的基本配置

    这个地址写的非常好 ,欢迎大家访问 Å:http://www.cnblogs.com/hxsyl/p/3435412.html 一.理论准备 先说下我记得xml规则,必须有且只有一个根节点,大小写敏感 ...

  4. 从零开始学 Java - log4j 项目中的详细配置

    你还会用笔来写字么 我是不怎么会了,有时候老是拿起笔之后不知道这个字怎么写,这时候就会拿起手机去打出来:有时候还会写出来这个字之后越看越不像,这时候就开始怀疑自己的能力了:有时候写出来了一大堆字之后, ...

  5. 如何在 ETL 项目中统一管理上百个 SSIS 包的日志和包配置框架

    一直准备写这么一篇有关 SSIS 日志系统的文章,但是发现很难一次写的很完整.因为这篇文章的内容可扩展的性太强,每多扩展一部分就意味着需要更多代码,示例和理论支撑.因此,我选择我觉得比较通用的 LOG ...

  6. android项目中配置NDK自动编译生成so文件

    1 下载ndk开发包   2 在android 项目中配置编译器(以HelloJni项目为例)  2.1 创建builer  (a)Project->Properties->Builder ...

  7. Druid使用起步—在javaWeb项目中配置监控 连接池

    当我们在javaWEB项目中使用到druid来作为我们的连接池的时候,一定不会忘了添加监控功能.下面我们就来看一下,在一个简单的web项目中(尚未使用任何框架)我们是如果来配置我们的web.xml来完 ...

  8. Log4j2在WEB项目中配置

    最近决定在新WEB项目中使用新的日志系统Log4j2. 官方介绍和学习文档网址为http://logging.apache.org/log4j/2.x/ 首先在WEB项目中引入以下几个jar包: ① ...

  9. [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置

    第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...

随机推荐

  1. 深入理解Spring--动手实现一个简单的SpringIOC容器

    接触Spring快半年了,前段时间刚用Spring4+S2H4做完了自己的毕设,但是很明显感觉对Spring尤其是IOC容器的实现原理理解的不到位,说白了,就是仅仅停留在会用的阶段,有一颗想读源码的心 ...

  2. React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...

  3. 8天掌握EF的Code First开发之Entity Framework介绍

    返回<8天掌握EF的Code First开发>总目录 本篇目录 Entity Framework概要 什么是ORM Entity Framework简史 Entity Framework具 ...

  4. Servlet/JSP-05 Cookie

    一. 问题? HTTP协议是一种无状态协议,服务器本身无法识别出哪些请求是同一个浏览器发出的,浏览器的每一次请求都是独立的.现实业务中服务器有时候需要识别来自同一个浏览器的一系列请求,例如购物车,登录 ...

  5. Spring之IoC总结帖

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development a ...

  6. Webwork 学习之路【06】Action 调用

    一路走来,终于要开始 webwork 核心业务类的总结,webwork 通过对客户端传递的 web 参数重新包装,进行执行业务 Action 类,并反馈执行结果,本篇源码分析对应下图 WebWork ...

  7. Main.C时钟设定

    void Main(void) 时钟设定:400M 100M  50M    得到  1:4:8  进而需要得到 hdivn=2 : pdivn=1: i = 2 ;    //用于选择CUP核的频率 ...

  8. 为什么要加 -moz- -webkit- -ms- -o- ?

    没有别的,为了兼容早期版本,为了解决CSS3标准正式发布以前的遗留问题.

  9. Props属性

    大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性). import React, { Component } from 'react'; import { Ap ...

  10. [AX2012]Claims user

    AX2012可以创建一种account type为claims user的账号,这种账号不需要在AD中事先已创建用户,但是claims账号是无法通过rich client登陆到AX,它的主要应用场景是 ...