MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦
原文:MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦
文本编辑器有很多,比如ticymce和CKEditor就比较好用,但涉及到图片、文件上传,需要结合CKFinder实现,而且有些功能是收费的,即使有意付费使用, 支付也不方便。好在百度的开源文本编辑器UEditor现在也发展得不错,本篇就来体验其在MVC中的使用。需要实现如下效果:
1、上传图片
2、上传涂鸦
3、字数限制
4、另一视图页图文显示
首先到这里下载UEditor的.NET版本,我下载的是[1.4.3.NET版本]的UTF-8版。
下载后,在Scripts文件夹下创建UEditor文件夹,把所有下载文档都放到UEditor文件夹中。
我们需要一个Model,用[DataType(DataType.MultilineText)]来指定某字符串类型属性使用TextArea来显示。
using System.ComponentModel.DataAnnotations; namespace MvcApplication2.Models
{
public class Post
{
[Required(ErrorMessage = "必填")]
[DataType(DataType.MultilineText)]
public string Content { get; set; }
}
}
HomeController中,一个Action用来显示强类型视图,另一个Action,当验证通过显示Result.cshtml部分视图。
using System.Web.Mvc;
using MvcApplication2.Models; namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
public ActionResult Create()
{
return View();
} [HttpPost]
[ValidateInput(false)]
public ActionResult Create(Post post)
{
if (ModelState.IsValid)
{
ViewData["c"] = post.Content;
return PartialView("Result");
}
return View(post);
} }
}
Result.cshtml部分视图显示图文信息。
@Html.Raw(ViewData["c"].ToString())
Home/Create.cshtml中,让TextArea呈现编辑器,通过addListener()方法为编辑器添加侦听contentChange事件方法,当字数超出限制(这里是100),就让编辑器执行一个回退操作:editor.execCommand("undo")。另外,还通过 Window.UEDITOR_HOME_URL = "/Scripts/UEditor/"设置了UEditor的根路径,这里的设置最终会赋值给ueditor.config.js中UEDITOR_HOME_URL属性。
@model MvcApplication2.Models.Post @{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create</title>
<link href="~/Scripts/UEditor/themes/default/css/ueditor.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/UEditor/ueditor.config.js"></script>
<script src="~/Scripts/UEditor/ueditor.all.js"></script>
<script type="text/javascript">
$(function() {
Window.UEDITOR_HOME_URL = "/Scripts/UEditor/";
var editor = new baidu.editor.ui.Editor();
editor.render("Content"); editor.addListener("contentChange", function() {
if (editor.getContentLength(true) > ) {
editor.execCommand("undo");
}
});
});
</script>
</head>
<body>
<div>
@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { id = "addForm" }))
{
@Html.EditorFor(model => model.Content)
<br/>
<input type="submit" value="提交"/>
}
</div>
</body>
</html>
图片的上传路径在config.json中设置。
以上,从imageUrlPrefix和imagePathFormat或scrawlPathFormat设置大致可以看出图片的保存路径是:Scripts/UEditor/net/upload/image/20140607/6353775730679106479709368.jpg,为此,我们需要在Scripts/UEditor/net下创建upload文件夹,再在Scripts/UEditor/net/upload下创建image文件夹。
最后在ueditor.config.js中设置UEditor的全局路径、一般处理程序的路径、字数限制,等等。
MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦的更多相关文章
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用启示
百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...
- thinkphp5.1中适配百度富文本编辑器ueditor
百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- Html引入百度富文本编辑器ueditor
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
- Jfinal整合百度富文本编辑器ueditor
ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...
- Html引入百度富文本编辑器ueditor及自定义工具栏
在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...
随机推荐
- html/css获得第一章
1.基本教程来学习 大概3天课余时间阅读下面的两个教程. HTML文字教程 CSS文字教程 2.练习 看完教程后.做第一练习时,总结例如以下: 1)div居中 须要设置属性:margin-left:a ...
- 【007】【JVM——内存分配和恢复策略】
内存分配与收回策略 JVM的自己主动内存管理要自己主动化地解决两个问题:对象分配内存以及回收分配给对象的内存.回收内存前几篇已经讲了.如今说内存分配.对象的内存分配一般分配在堆内存中,也可能经过 ...
- 怎样用C#代码管理SharePoint解决方式
怎样用C#代码管理SharePoint解决方式 本文我们将了解怎样用代码管理SharePoint解决方式.我们使用server端对象模型抽取解决方式. SharePoi ...
- shell script 入门 笔记
shell script 入门 在 shell script 注意必须使用完全相同写在下面: 1. 指令的运行是从上而下.从左而右的分析与运行: 2. 指令的运行就如同第五章内提到的: 指令.选项 ...
- UVa 10012 - How Big Is It? 堆球问题 全排列+坐标模拟 数据
题意:给出几个圆的半径,贴着底下排放在一个长方形里面,求出如何摆放能使长方形底下长度最短. 由于球的个数不会超过8, 所以用全排列一个一个计算底下的长度,然后记录最短就行了. 全排列用next_per ...
- linux安装QQ
下载链接:WineQQ2013SP6-20140102-Longene 下面步骤一定要依照顺序来,我用的系统是 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- RS-232协议和RS-485协议
RS232 RS232是一种异步传输标准接口.通常 RS-232 接口以9个引脚 (DB-9) 或是25个引脚 (DB-25) 的型态出现 .RS232最经常使用的连接方式是三根线:一条发送线.一条接 ...
- 一键安装 gitlab7 on rhel6.4 并设置邮件发送
一键安装 gitlab7 on rhel6.4 并设置邮件发送 世间本无事,庸人自扰之.书归正传,简短节说:gitlab是个好东西,可是安装手冊奇烂.尽管以前对比文档一步一步安装起来gitlab 6. ...
- 彩色图像--色彩空间 YIQ 、YUV 、YCbCr 、YC1C2 和I1I2I3
学习DIP文章64天 转载请注明文章出处:http://blog.csdn.net/tonyshengtan .出于尊重文章作者的劳动,转载请标明出处.文章代码已托管,欢迎共同开发:https://g ...
- 我异常-VS2012“System.AccessViolationException: 试图读取或写入保护内存。”
我的系统是win7 64位 系统 安装的是 Visual studio 2012.从SVN上下载了源代码.一个B/S的系统.能正常载入登陆页,但在输入登录信息要登录的时候,就报错了: - ...