重工电子论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 146|回复: 3

ueditor使用笔记

[复制链接]

204

主题

489

帖子

2703

积分

学生管理组

Rank: 8Rank: 8

积分
2703
发表于 2018-3-3 21:57:29 | 显示全部楼层 |阅读模式
本帖最后由 李维强-15级 于 2018-4-25 18:39 编辑

现在,目前为止,我下的最新版,1.4.3.3,下面结合ASP.NET MVC5 给出配置和使用方法
===============================================
1,官网下载,用.net版本的,下载下来后,需要修改一个地方,这是百度犯的一个小错误,但是该错误耽搁了我12个小时的时间。。。那就是ueditor.config.js这个文件里面的366行“whitList”改为“whiteList”,源文件少打了个e。。。。
2,由于在ueditor.config.js文件里面,有一个很犀利的代码“var URL = window.UEDITOR_HOME_URL || getUEBasePath();”所以,这是确定前台访问后台的时候,确定后台控件根目录的地方,就是找到controller.ashx这个webservice文件的地址,所以不用改了,就这样吧。从网站其他任意位置引用这个富文本界面都可以了。
3,在net目录下,config.json文件,里面的“xxxx路径前缀,和上传路径需要更改”,这里例如上传图片配置项为例,把前缀改没有,把上传路径改为绝对路径,也就是前面加个“/”,然后在工程外层目录里面加个upload文件夹即可了。

  1.     "imageUrlPrefix": "", /* 图片访问路径前缀 */
  2.     "imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
复制代码

至于其他的类似目录都改成这样,就可以了。
最后访问到这个控件controller.ashx,出现 {"state":"action 参数为空或者 action 不被支持。"},则表明配置成功了。


4,.NET需要更改web.config文件配置,关闭requestValidation验证,后台控制器才能收到前台提交的内容,好了,
在web.config配置里面,<system.web>下面,httpRuntime节点,加一个requestValidationMode="2.0",由于本身MVC5自带了这个节点的定义,所以只需要在后面加一个即可,变为
<httpRuntime targetFramework="4.6.1" requestValidationMode="2.0" />

5,在控制器里面, ActionResult方法上面添加        [ValidateInput(false)]  [HttpPost]  这两个属性即可。
这样就可以用了。

6,由于.net IIS里面 默认限制了上传文件的大小 所以需要在根目录里面 对Web.Config进行相关配置
在system.webServer节点下添加
[C#] syntaxhighlighter_viewsource syntaxhighlighter_copycode
    <security>
      <requestFiltering>
        <!--服务器端最大文件限制,asp.net默认只允许上传4m文件,单位bytes   下面是添加限制大小为200M-->
        <requestLimits maxAllowedContentLength="204800000" />
      </requestFiltering>
    </security>

=====================================
存在的问题,众所周知,我们关闭了验证,就会出现xss攻击的漏洞,所以在后台,进控制器之后,我们需要验证~~~具体怎么验证的,就是查看提交内容是不是有非法字符把,有不有SQL语句吧,正则验证等。。。但是这个网上有很多现成的,我去找个uploader的类来验证即可。。。


回复

使用道具 举报

204

主题

489

帖子

2703

积分

学生管理组

Rank: 8Rank: 8

积分
2703
 楼主| 发表于 2018-3-11 16:09:41 | 显示全部楼层
本帖最后由 李维强-15级 于 2018-4-25 19:51 编辑

单独调用图片上传和附件上传功能
https://www.cnblogs.com/lhm166/articles/6079973.html

------------------------------------------------------------------------------------
单独引用上传视频功能,
鉴于网上没有相关操作,所以我自己稍微研究了下这个Ueditor的源代码
首先
引用  ueditor.all.js这个JS,因为那个min的确实不好看

1,在注册UE的时候,最后一个toolbars里面加入"insertvideo",即
toolbars: [["insertimage", "attachment","insertvideo"]]

2,然后在UE.ready里面 加入消息监听,这里的名字afterUpVideo 是我自己定义的

uploadEditor.addListener("afterUpVideo", _afterUpVideo);

3,回调函数的实现
    function _afterUpVideo(t, result) {
        //这里的result就是那个包含视频信息的对象
        var imageHtml = '';
        imageHtml = result.url;//这里的result.url就是视频地址
        $("input[name='ImgUrl']").val(imageHtml);
    }

4,关键一步 到ueditor.all.js这个里面  找到17771行这里 在这句后面加一句
me.fireEvent('afterUpVideo', videoObjs[0]);
这个就是注册消息,并把视频对象的信息作为对象传出来, videoObjs[0]表示第0个视频,默认取的,因为它是实际上是可以传多个视频,所以这里我就默认取第一个视频,这个参数 实际上就传到_afterUpVideo函数的result里面了。
回复 支持 反对

使用道具 举报

204

主题

489

帖子

2703

积分

学生管理组

Rank: 8Rank: 8

积分
2703
 楼主| 发表于 2018-3-26 12:04:24 | 显示全部楼层
下面我就来给大家说说如果才能UEditor插入图片尺寸自动适应编辑框大小 这个很重要

首先我们找到如下文件:

\ueditor\themes\iframe.css

从这个文件里,就能看到有这一句:/*可以在这里添加你自己的css*/

哈哈,接下来,我们写css吧:

———————————-

img {
max-width: 100%; /*图片自适应宽度*/
}
body {
overflow-y: scroll !important;
}
.view {
word-break: break-all;
}
.vote_area {
display: block;
}
.vote_iframe {
background-color: transparent;
border: 0 none;
height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

————————————
把以上横线里面的代码复制到编辑里面 保存 上传覆盖然后清理一下浏览器的缓存都可以使用了。
回复 支持 反对

使用道具 举报

204

主题

489

帖子

2703

积分

学生管理组

Rank: 8Rank: 8

积分
2703
 楼主| 发表于 2018-3-28 01:09:33 | 显示全部楼层
Ueditor加载内容的时候,需要渲染完了再加载内容,有相对的Ueditor.ready(function(){});方法
转载至
https://www.cnblogs.com/treasurelife/p/3734104.html
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|cqutlab ( 渝ICP备15004556号

GMT+8, 2018-9-22 09:04 , Processed in 0.087523 second(s), 27 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表