重工电子论坛

标题: ueditor使用笔记 [打印本页]

作者: 李维强-15级 时间: 2018-3-3 21:57
标题: ueditor使用笔记
本帖最后由李维强-15级于 2020-2-26 17:58 编辑

现在，目前为止，我下的最新版，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文件夹即可了。

"imageUrlPrefix": "", /* 图片访问路径前缀 */
"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>

7.
在2020-2-26号本地调试遇到个巨坑
首先，在网站根目录下的Web.config里面（因为引用了Ueditor的Newtonsoft.Json.dll这文件），可能是这个原因，所以需要把引用里面的Newtonsoft.Json版本设置为当前的（我这里是newVersion="6.0.0.0"）
然后，在上传大文件的时候，我传一个超过1G的，需要配置 uEditor那个net目录下的Web.config文件，里面的system.web-》 httpRuntime节点里面默认配置的maxRequestLength是10240，这个只有10M，需要在这里配置如下：

[C] syntaxhighlighter_viewsource syntaxhighlighter_copycode



<httpRuntime requestValidationMode="2.0" maxRequestLength="2048000" executionTimeout="3600"/>

意思是改为2G，上传时间1小时，

或者把这个节点删除掉，只需要在项目根目录里面配置这个节点即可，根目录配置这个节点如下

  <system.web>

    <compilation debug="true" targetFramework="4.6"/>

    <httpRuntime  targetFramework="4.6" requestValidationMode="2.0" maxRequestLength="2048000" executionTimeout="3600"  />

  </system.web>

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

作者: 李维强-15级 时间: 2018-3-11 16:09
本帖最后由李维强-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里面了。

作者: 李维强-15级 时间: 2018-3-26 12:04
下面我就来给大家说说如果才能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;} /*去除点击图片后出现的拉伸边框*/

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

作者: 李维强-15级 时间: 2018-3-28 01:09
Ueditor加载内容的时候，需要渲染完了再加载内容，有相对的Ueditor.ready(function(){});方法
转载至
https://www.cnblogs.com/treasurelife/p/3734104.html

欢迎光临重工电子论坛 (http://cqutlab.cn/)