SNF快速开发平台MVC-EasyUI3.9之-ueditor富文本编辑在asp.netMVC下使用步骤 ...

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

mvc项目中用到了这个富文本编辑就试着把遇到的问题个使用步骤在这里记录一下，希望大家少走弯路。

1.首先我们先下载net版本的uediot

2.然后把整个文档拷贝到我们的项目中，记得是整个

把下载的文件改成ueditor名称，添加到Content文件夹里面

在ueditor文件夹下面的net文件夹创建一个upload文件夹装上传的图片

4、找到net文件夹里面的config.json文件，在找到所有的 /* 图片访问路径前缀 */ 然后在前面的途径加上：/Content/js

其它配置图片访问路径前缀，以此类推，因为我们把ueditor文件夹放在了Content/js文件夹下面

5.就是要在你的html页面写Ueditor就可以了。

<script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="~/Content/js/ueditor/lang/zh-cn/zh-cn.js"></script>

//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
</script>

取值、赋值：

<script type="text/javascript">      
           var viewModel =function(data){
                var self = this;
                snf.viewModel.admin.edit.apply(this, arguments);      
                //保存前取值
                this.BeforeSave = function(){
                    self.form.Description(UE.getEditor('editor').getContent());
                };
                $(function () {
                    window.onload = function () { 
                        //加载数据
                        UE.getEditor('editor').setContent(self.form.Description(), false);
                    }
                });

            }

如果感觉加载速度慢的话，可以按如下方法进行加载：直接在页面加载后进行加载富文本控件和初始化

       <script type="text/javascript">      
           var viewModel =function(data){
                var self = this;
                snf.viewModel.admin.edit.apply(this, arguments);      
                //保存前取值
                this.BeforeSave = function(){
                    self.form.Description(UE.getEditor('editor').getContent());
                };
                $(function () {
                    window.onload = function () { 
                        //实例化编辑器
                        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
                        var ue = UE.getEditor('editor', {
                            toolbars: [
                                ['fullscreen', 'source', 'undo', 'redo', 'bold']
                            ],
                            zIndex: 10 //处理被遮挡问题
                        });

                        //加载数据
                        UE.getEditor('editor').setContent(self.form.Description(), false);
                    }
                });

            }
            using(['combobox','datebox','datetimebox','numberbox'],easyuifix.datagrid_editor_extend);
            var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));           
            ko.bindingViewModel(new viewModel(data));
          
        </script>

生成会报错，在ueditor里面net文件的bin里面的Newtonsoft.Json无法拷贝到当前项目里面的bin目录里面，那是因为ueditor的net文件里面的Newtonsoft.Json的版本要高于项目里面的版本，把项目里面的Newtonsoft.Json引用删除掉，在引用ueditor里面net文件的bin里面的Newtonsoft.Json的dll文件第八步：在Web.config里面找到 <runtime>节点在它下面的<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">节点里面添加

</dependentAssembly>如上节点，就可以解决 Newtonsoft.Json无法引用的问题以上步骤都作完成，就可以实现富文本并且可以上传图片了！

下面的处理，不是什么时候都出现的，如果出现进行参考

[HttpPost]

[ValidateInput(false)]

public ActionResult Index(FormCollection fc)

{

var content = fc["editor"];

return View();

} 注意： [ValidateInput(false)]这是解决一直报安全问题的办法

注意： [ValidateInput(false)]这是解决一直报安全问题的办法
在ueditor里面net文件的bin里面的Newtonsoft.Json无法拷贝到当前项目里面的bin目录里面，那是因为ueditor的net文件里面的Newtonsoft.Json的版本要高于项目里面的版本，把项目里面的Newtonsoft.Json引用删除掉，在引用ueditor里面net文件的bin里面的Newtonsoft.Json的dll文件
在web.config的配置，要添加Newtonsoft.Json的配置

作者： 王金斗
出处： http://www.cnblogs.com/spring_wang/
Email: [email protected]
QQ：903639067 
QQ群：322581894

这个系列教程文档，欢迎转载：

SNF快速开发平台WinForm-CS甘特图 http://www.cnblogs.com/spring_wang/p/7418423.html

SNF快速开发平台MVC-审核流，审核完成后会给下一个审核人发邮件，下一个审核人可以不登录系统，在邮件里进行审核处理 http://www.cnblogs.com/spring_wang/p/7418402.html

SNF快速开发平台MVC-名片管理(实际名片样式) http://www.cnblogs.com/spring_wang/p/7416540.html

SNF快速开发平台MVC-表格单元格合并组件 http://www.cnblogs.com/spring_wang/p/7416368.html

SNF快速开发平台MVC-单据状态水印 http://www.cnblogs.com/spring_wang/p/7416349.html

SNF快速开发平台MVC-瀑布式分页组件 http://www.cnblogs.com/spring_wang/p/7411116.html

SNF快速开发平台MVC-高级查询组件 http://www.cnblogs.com/spring_wang/p/7411113.html

SNF快速开发平台MVC-自由排序组件 http://www.cnblogs.com/spring_wang/p/7411090.html

SNF快速开发平台MVC-各种级联绑定方式，演示样例程序（包含表单和表格控件）http://www.cnblogs.com/spring_wang/p/7405371.html

SNF快速开发平台MVC-集成了百度开源项目echars http://www.cnblogs.com/spring_wang/p/7405171.html

SNF快速开发平台WinForm-平板拍照及扫描二维码功能 http://www.cnblogs.com/spring_wang/p/7404600.html

SNF快速开发平台WinForm规则引擎整体介绍及使用http://www.cnblogs.com/spring_wang/p/7404182.html

SNF快速开发平台WinForm-Grid表格控件大全 http://www.cnblogs.com/spring_wang/p/7403881.html

SNF快速开发平台WinForm-表单验证控件-通用 http://www.cnblogs.com/spring_wang/p/7403750.html

SNF.CodeGenerator-升级生成BS页面代码-支持视图-数据库配置-快速开发者的利器 http://www.cnblogs.com/spring_wang/p/7402612.html

SNF快速开发平台WinForm-审核流使用方法样例 http://www.cnblogs.com/spring_wang/p/7374176.html

SNF快速开发平台WinForm-EasyQuery统计分析-效果-非常牛逼的报表查询工具 http://www.cnblogs.com/spring_wang/p/7366059.html

SNF快速开发平台MVC-Grid++集成打印 http://www.cnblogs.com/spring_wang/p/7365567.html

SNF快速开发平台MVC-富文本控件集成了百度开源项目editor http://www.cnblogs.com/spring_wang/p/7365265.html

C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集 http://www.cnblogs.com/spring_wang/p/7216538.html

关于系统前端开发的那些事 http://www.cnblogs.com/spring_wang/p/7092721.html

WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法 http://www.cnblogs.com/spring_wang/p/6740314.html

SNF快速开发平台--规则引擎在程序当中如何调用 http://www.cnblogs.com/spring_wang/p/6740490.html

SNF快速开发平台--规则引擎介绍和使用文档 http://www.cnblogs.com/spring_wang/p/6740445.html

SNF快速开发平台MVC-EasyUI3.9之-DataGrid表格控件如何增加右键菜单 http://www.cnblogs.com/spring_wang/p/6740338.html

SNF快速开发平台--多组织+多平台+多系统处理方案 http://www.cnblogs.com/spring_wang/p/6734654.html

SNF快速开发平台MVC-EasyUI3.9之-Session过期处理和页面请求筛选 http://www.cnblogs.com/spring_wang/p/6733975.html

SNF快速开发平台MVC-EasyUI3.9之-WebApi身份验证问题解决方案 http://www.cnblogs.com/spring_wang/p/6733814.html

SNF快速开发平台MVC-EasyUI3.9之-WebApi跨域处理方案 http://www.cnblogs.com/spring_wang/p/6733659.html

SNF快速开发平台MVC-EasyUI3.9之-ueditor富文本编辑在 asp.net MVC下使用步骤 http://www.cnblogs.com/spring_wang/p/6710351.html

SNF开发平台WinForm之十五-时间轴控件使用-http://www.cnblogs.com/spring_wang/p/6285393.html

SNF开发平台WinForm之十四-站内发送系统信息http://www.cnblogs.com/spring_wang/p/6140031.html

SNF开发平台WinForm之十三-单独从服务器上获取PDF文件进行显示 http://www.cnblogs.com/spring_wang/p/6140025.html

SNF开发平台WinForm之十二-发送手机短信功能调用 http://www.cnblogs.com/spring_wang/p/6139829.html

SNF开发平台WinForm之十一-程序打包 http://www.cnblogs.com/spring_wang/p/6139827.html

SNF开发平台WinForm之十-Excel导入 http://www.cnblogs.com/spring_wang/p/6128604.html

SNF开发平台WinForm之九-代码生成器使用说明 http://www.cnblogs.com/spring_wang/p/6128595.html

SNF开发平台WinForm之八-自动升级程序部署使用说明 http://www.cnblogs.com/spring_wang/p/6128570.html

SNF开发平台WinForm之七-单据打印和使用说明 http://www.cnblogs.com/spring_wang/p/6126016.html

SNF开发平台WinForm之六-上传下载组件使用http://www.cnblogs.com/spring_wang/p/6125929.html

SNF开发平台WinForm之五-高级查询使用说明-http://www.cnblogs.com/spring_wang/p/6116640.html

SNF开发平台WinForm之四-开发-主细表管理页面-http://www.cnblogs.com/spring_wang/p/6116626.html

SNF开发平台WinForm之三-开发-单表选择控件创建-http://www.cnblogs.com/spring_wang/p/6116592.html

SNF开发平台WinForm之二-开发-单表表单管理页面-http://www.cnblogs.com/spring_wang/p/6116572.html

SNF开发平台WinForm之一-开发-单表表格编辑管理页面-http://www.cnblogs.com/spring_wang/p/6116523.html

Winform开发框架之通用Windows摄像头调用拍照 http://www.cnblogs.com/spring_wang/p/6008674.html

Winform开发框架之图表报表在线设计器2-图表-SNF.EasyQuery项目--SNF快速开发平台3.3-Spring.Net.Framework

Winform开发框架之图表报表在线设计器-报表-SNF.EasyQuery项目--SNF快速开发平台3.3-Spring.Net.Framework

Winform开发框架之通用附件管理模块 --SNF快速开发平台3.3-Spring.Net.Framework

SNFAutoupdater通用自动升级组件V2.0-WinForm

SNF快速开发平台3.2之--.Net可扩展的单据编号生成器-SNF.CodeRule

SNF快速开发平台3.1之--审核流(3)低调奢华，简单不凡，实例演示-SNF.WorkFlow

SNF快速开发平台3.1之--审核流(2)流程设计-SNF.WorkFlow功能使用说明

SNF快速开发平台3.1之--审核流(1)SNF.WorkFlow审核流简介

SNF快速开发平台3.0之--完美的代码生成器SNF.CodeGenerator-快速开发者的利器

基于MVC4+EasyUI的Web开发框架--Spring.Net.FrameworkV3.0总体介绍

SNF快速开发平台3.0之--MVC 打印解决方案

SNF快速开发平台3.0之--文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)

SNF快速开发平台3.0之--asp.net mvc4 强大的导出和不需要上传文件的批量导入EXCEL

SNF快速开发平台3.0之MVC通用控件库展示-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速开发平台3.0之BS页面展示和九大优点-部分页面显示效果-Asp.net+MVC4.0+WebAPI+EasyUI +Knockout

SNF快速开发平台3.0之-界面个性化配置+10种皮肤+7种菜单-Asp.net+MVC4.0+WebAPI+EasyUI+Knockout

SNF快速开发平台3.0之-CS页面-Asp.net+Spring.Net.Framework

SNF快速开发平台3.0之--系统里广播的作用--迅速及时、简明扼要的把信息发送给接收者

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

ASP.NET Core 高性能开发最佳实践发布时间：2022-07-10

asp.net对母版页的控件事件发布时间：2022-07-10

客服电话

电子邮件

SNF快速开发平台MVC-EasyUI3.9之-ueditor富文本编辑在asp.netMVC下使用步骤 ...

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053