ASP.NET MVC 5 中 使用富文本编辑器 Ueditor
一、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的更多相关文章
- MVC项目中应用富文本编辑器UEditor中的几个坑
UEditor:百度出品 官网连接:http://ueditor.baidu.com/website/ 错误现象:在官网上复制到本地后,上传图片功能不能用, 控制台提示:“请求后台配置项http错误, ...
- Django中使用富文本编辑器Uedit
Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...
- Django后台管理admin或者adminx中使用富文本编辑器
在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...
- flask项目中使用富文本编辑器
flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...
- Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
- 在MVC3中使用富文本编辑器:KindEditor的配置及上传图片
现在比较常用的富文本编辑挺多的,如ueditor.fckeditor.kingeditor等,本文主要介绍一下KindEditor的配置与使用. 先去官网http://www.kindsoft.net ...
- Django使用富文本编辑器
1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...
- django-应用中和amdin使用富文本编辑器kindeditor
文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...
- vue+element-ui 使用富文本编辑器
npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...
随机推荐
- ural 1144. The Emperor's Riddle
1144. The Emperor's Riddle Time limit: 1.0 secondMemory limit: 4 MB Background In the olden times th ...
- The 2015 China Collegiate Programming Contest C. The Battle of Chibi hdu 5542
The Battle of Chibi Time Limit: 6000/4000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Othe ...
- OpenCV 第一课(安装与配置)
OpenCV 第一课(安装与配置) win10,opencv-2.4.13, 安装, vs2013, 配置 下载安装软件 官网OpenCV下载地址下载最新版本,我下载的是opencv.2.4.13,然 ...
- Spring In Action(第三版)读书笔记
第一章 Spring之旅 POJO: plain old java object 简单的java对象 DI:Dependency Injection 依赖注入 构造器注入:构造时作为构造器参数传入 p ...
- Codeforces Round #251 (Div. 2) C. Devu and Partitioning of the Array
注意p的边界情况,p为0,或者 p为k 奇数+偶数 = 奇数 奇数+奇数 = 偶数 #include <iostream> #include <vector> #include ...
- git的几种回滚 git revert 和 git reset的区别
git的几种回滚 git revert 和 git reset的区别:强烈建议:对HEAD不熟的话最好不要用HEAD,直接用commitID吧,我遇到的问题:reset HEAD~1之后,可能是别人提 ...
- Codeforces Round #207 (Div. 1) A. Knight Tournament(STL)
脑子又卡了...来一发set的,STL真心不熟. #include <stdio.h> #include <string.h> #include <iostream> ...
- ThinkPHP随笔
使用应用分组模式开发程序时,U函数表示地址时,要用这种格式 “项目名/控制器名/方法名”写地址,不能直接使用U("handle") 如:var handleUrl = '{:U(& ...
- 再过几个月Apple Watch就要正式发布了
本文由cocoaChina译者小组成员@TurtleFromMars 翻译自Appcoda,原作者:julian engel,原文:WatchKit Introduction: Building a ...
- Linux常见练习题
1./dev/hda5在Linux中表示什么? A. IDE0接口上从盘 B. IDE0接口上主盘的逻辑分区 C. IDE0接口上主盘的第五个分区 D.IDE0接口上从盘的扩展分区 ...