前言

  配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包,如下图,我下载的是1.2.6.1net版本的开发包。

配置:

1、将开发包放到mvc4项目中,在我的项目中我放到了Content目录下

2、在模板页中引入js和样式文件:

3、在页面中配置初始化编辑器,在页面中配置textarea显示为编辑器,编辑器更多的参数设置可参考ueditor.config.js里面的配置说明:

@using(Html.BeginForm()){
<textarea id="editor" name="editor"> </textarea>
<input type="submit" value="提交" />
} @section scripts{
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor({
UEDITOR_HOME_URL: '/Content/ueditor/',//配置编辑器路径
iframeCssUrl: '/Content/ueditor/themes/iframe.css',//样式路径
initialContent: '欢迎使用ueditor',//初始化编辑器内容
autoHeightEnabled: true,//高度自动增长
minFrameHeight:500//最小高度
});
editor.render('editor');
</script>
}

到这一步正常情况下,页面已经显示出编辑器的样子了,如图:

4、解决图片上传问题,通过查看ueditor的配置文件及imageUp.ashx很明显的可以发现编辑器会把图片放到uditor/net/upload或upload1文件夹,若不存在则创建文件夹,此时上传图片会出现网络连接错误的提示,通过F12查看错误如图

查看Uploader文件默认属性为编译,将其属性改为内容以后重新运行程序,图片上传成功,如下图:

5、解决表单提交错误提示问题,从.Net Framework 4.0 开始,ASP.NET开始强制检测Request参数安全,直接提交会出现如下错误,

这个问题在后台action标记[ValidateInput(false)]来解决,如图:

6、编辑器等内容我们可以通过FormCollection来接收,从而实现内容保存,处理图片等相关操作

以上是百度编辑器在mvc项目中的简单配置,个人感觉还是很好用的,已经在多个项目中使用了,没有感觉像很多人说的那样不好使,个人反而感觉不错。

http://www.cnblogs.com/flykai/p/3285307.html

[转载] ASP.NET MVC4使用百度UEDITOR编辑器的更多相关文章

  1. asp.net mvc4使用百度ueditor编辑器

    原文  http://www.cnblogs.com/flykai/p/3285307.html    已测试 相当不错 前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好 ...

  2. mvc4使用百度ueditor编辑器

    前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法.编辑器可以到http://ueditor.baidu.com/website/downloa ...

  3. asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频

    通过 asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)介绍,可以上传图片到服务器了,也可以上传小的视频文件,并且由百度编辑器自动加入html5<video>标签播放 ...

  4. 解决百度Ueditor编辑器表格不显示边框问题

    一.主要内容 CMS使用百度Ueditor编辑器中的表格功能,在编辑模式下可以正常显示边框,而文章发布之后表格不能显示边框.本博文经过查阅相关资料,最终解决了该问题. 二.使用平台 1. dedecm ...

  5. 百度UEditor编辑器使用教程与使用方法

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享 ...

  6. 百度UEditor编辑器关闭抓取远程图片功能(默认开启)

    这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白名单内的图片到编辑框时触发,坑娘啊............... 问题又来 ...

  7. 在linux下使用百度ueditor编辑器上传图片

    百度ueditor编辑器虽然强大,但是也有不足的地方.如果对ueditor流程不是很熟悉可以说走的弯路比较多,费力不讨好.下面呢,就是要解决ueditor遇到的问题. 用ueditor上传图片遇到的问 ...

  8. 我是如何一步步编码完成万仓网ERP系统的(六)产品库设计 2.百度Ueditor编辑器

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  9. DEDECMS:安装百度UEDITOR编辑器

    第一步:下载相对应编辑器的版本 首先,去百度搜索"百度ueditor编辑器",然后点击进入官网,找到下载页面.找到我们想要的编辑器的版本,看自己网站的编码是UTF-8还是GBK,下 ...

随机推荐

  1. Quartz任务调度器及与Spring的整合使用

    参考  点击打开链接

  2. WebDriver获取table的内容(通过动态获取Table单元格的TagName对其innerHTML值进行获取)

    import java.util.ArrayList;import java.util.Iterator;import java.util.LinkedHashMap;import java.util ...

  3. Sql Sever语句 (续2)

    日期时间 把日期类型的字段下默认值或绑定里的 设置成getdate()   ,新建字段时候不设置会自动获取当前服务器时间 在当前时间加上xx年xx月xx天 select datedd(yy,100,g ...

  4. JavaScript(10)——Ajax以及跨域处理

    Ajax以及跨域处理 哈哈哈,终于写到最后一章了.不过也还没有结束,说,不要为了学习而学习,恩.我是为了好好学习而学习呀.哈哈哈.正在尝试爱上代码,虽然有一丢丢的难,不过,我相信我会的! [Ajax] ...

  5. 开启真机的View Server引入HierarchyViewer/By写monkeyrunner自动化测试脚本

    其实相关文章网上也有不少了,不过在真机上开启View Server的中文文章好像只有一篇,前段时间按照这篇文章的内容,并结合英文源文去hack我的Nexus S(4.1.2)也走了一点弯路.现在总结一 ...

  6. MFC通过ODBC连接Mysql程序

    分享到 一键分享 QQ空间 新浪微博 百度云收藏 人人网 腾讯微博 百度相册 开心网 腾讯朋友 百度贴吧 豆瓣网 搜狐微博 百度新首页 QQ好友 和讯微博 更多... 百度分享 MFC通过ODBC连接 ...

  7. 打印出最后执行的mysql 语句

    db.php 文件中添加 public function getlastsql(){ return $this->sql; } 入口文件中添加,公共方法 function getlastsql( ...

  8. flash 右键菜单隐藏与修改

    来源:http://blog.sina.com.cn/s/blog_7264c84401014fmd.html import flash.ui.ContextMenu;import flash.ui. ...

  9. As3.0 Interface 与类的使用

    来源:http://blog.sina.com.cn/s/blog_4d65c19e0100bfkb.html 抽象类:又叫抽象基类:可以包含一般类所包含的所有特性,例如,字段,属性,方法,抽象类不能 ...

  10. Hadoop 中关于 map,reduce 数量设置

    map和reduce是hadoop的核心功能,hadoop正是通过多个map和reduce的并行运行来实现任务的分布式并行计算,从这个观点来看,如果将map和reduce的数量设置为1,那么用户的任务 ...