一、Ueditor插件下载自:http://ueditor.baidu.com/website/

二、将解压文件目录ueditor复制到项目根目录后,

  修改以下几个文件配置:

    1.访问路径配置:ueditor.config.js

      //为编辑器实例添加一个路径,这个不能被注释

      UEDITOR_HOME_URL: "http://localhost:4458/ueditor/"

      // 服务器统一请求接口路径
      , serverUrl: URL + "/net/controller.ashx"

    2.上传文件相关配置config.json

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

三、前台添加使用

  1.引用脚本

    <script type="text/javascript" src="~/Scripts/ueditor/ueditor.config.js" />

    <script type="text/javascript" src=""~/Scripts/ueditor/ueditor.all.js  />

    或添加至BundleConfig,

      bundles.Add(new ScriptBundle("~/bundles/ueditor").Include(

      "~/Scripts/ueditor/ueditor.config.js",

      "~/Scripts/ueditor/ueditor.all.js"));

    在前台引用

      @section Scripts {

        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/ueditor")
      }

  2.将如下代码添加富文本输入框位置:

    <script id="Location" type="text/plain" style="width:200px;height:100px;">
    </script>

  3.初始化

    <script type="text/javascript">

      var ue = UE.getEditor('Location');

    </script>

  4.前台显示

    @Html.Raw(item.Location)

三、后台获取提交

    1、提交的Action要取消验证,即添加ValidateInput(false)

      [ValidateInput(false)]
      public ActionResult Create([Bind(Include = "LastName,FirstMidName,HireDate,OfficeAssignment")] Instructor instructor, FormCollection fc,             string[] selectedCourses){

      …………

          if ( fc != null && fc.Get("Location") != null)

          string strdata= fc.Get("Location");//获取提交的编辑信息

    }

ASP.NET MVC 5 中 使用富文本编辑器 Ueditor的更多相关文章

  1. MVC项目中应用富文本编辑器UEditor中的几个坑

    UEditor:百度出品 官网连接:http://ueditor.baidu.com/website/ 错误现象:在官网上复制到本地后,上传图片功能不能用, 控制台提示:“请求后台配置项http错误, ...

  2. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  3. Django后台管理admin或者adminx中使用富文本编辑器

    在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...

  4. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  5. Django实现的博客系统中使用富文本编辑器ckeditor

    操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

  6. 在MVC3中使用富文本编辑器:KindEditor的配置及上传图片

    现在比较常用的富文本编辑挺多的,如ueditor.fckeditor.kingeditor等,本文主要介绍一下KindEditor的配置与使用. 先去官网http://www.kindsoft.net ...

  7. Django使用富文本编辑器

    1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...

  8. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

  9. vue+element-ui 使用富文本编辑器

    npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...

随机推荐

  1. java-嵌套类

    浏览以下内容前,请点击并阅读 声明 java允许在一个类中定义另外一个类,这就叫类嵌套.类嵌套分为两种,静态的称为静态嵌套类,非静态的又称为内部类. 使用嵌套类的原因: 能够将仅在一个地方使用的类合理 ...

  2. EF框架step by step(4)—DBcontext应用于已存在数据库

    EF4.1有三种方式来进行数据操作及持久化.分别是Database-First,Model-First,Code-first,前面都已经简单介绍过了.下面简单小结一下:1.Database First ...

  3. HDU 2852 (树状数组+无序第K小)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2852 题目大意:操作①:往盒子里放一个数.操作②:从盒子里扔掉一个数.操作③:查询盒子里大于a的第K小 ...

  4. 栈式自动编码器(Stacked AutoEncoder)

    起源:自动编码器 单自动编码器,充其量也就是个强化补丁版PCA,只用一次好不过瘾. 于是Bengio等人在2007年的  Greedy Layer-Wise Training of Deep Netw ...

  5. SAD算法在opencv上的实现代码(c++)

    #include <opencv2/opencv.hpp>#include <opencv2/core/core.hpp>#include <opencv2/highgu ...

  6. Google测试分享-测试经理

    首先大家可以思考下,google的测试经理角色必须具备什么样的能力.据不完全统计,google的测试经理,超过一半之前都做过TE的角色(大家可以想想为啥):对于与被测产品相关的任何使用问题,测试经理都 ...

  7. PHP面向对象学习一

    1. 抽象性 ,  2. 封装性 ,3.共享性 ,4. 强调对象结构而不是程序结构 面向对象的三大特点(封装,继承,多态)缺一不可 class MyPc{ ———创建一个名为 MyPc的类,class ...

  8. spring源码学习之路---IOC实现原理(三)

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 上一章我们已经初步认识了Be ...

  9. ubuntu 装机及装机以后干的事情

    一.装系统 下载ubuntu镜像 ubuntu 16.04 镜像下载(linux公社) 安装unetbootin (u盘启动盘制作工具) sudo apt-get install unetbootin ...

  10. Java_过滤字符串中非汉子的内容

    /** * 去除“第”之前的所有非汉字内容 */ private String clearNotChinese(String buff){ String tmpString =buff.replace ...