原文: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实现图文并茂,字数限制,上传图片或涂鸦的更多相关文章

  1. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  2. springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  3. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  4. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

  5. thinkphp5.1中适配百度富文本编辑器ueditor

    百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...

  6. 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  7. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  8. Jfinal整合百度富文本编辑器ueditor

    ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...

  9. Html引入百度富文本编辑器ueditor及自定义工具栏

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

随机推荐

  1. 在 Swift 语言中更好的处理 JSON 数据：SwiftyJSON

    SwiftyJSON能够让在Swift语言中更加简便处理JSON数据. With SwiftyJSON all you have to do is: ? 1 2 3 4 let json = JSON ...

  2. C++指针和引用简介

    摘要 本文介绍C++指针和概念引用 这是一个指针 指针的类型 指针所指向的类型 指针表达式 指针与函数 什么是引用 指针引用差别 指针和引用的同样点和不同点 **什么是指针** 指针就是一个存放地址的 ...

  3. Java 审查基调

    1.& 与 &&的差别 两个都有逻辑与的功能. 可是所不同的是.当&两边的表达式不是boolean类型的时候,&具有位与的功能:&&是短路与,当 ...

  4. C++ STL简化了编程

     图1.STL和c++标准模板库 作为C++标准必不可少的一部分,STL应该是渗透在C++程序的角角落落里的. STL不是实验室里的宠儿.也不是程序猿桌上的摆设.她的激动人心并不是昙花一现.本教程旨在 ...

  5. 它们的定义actionbar 并删除留空

    通过他们自己的定义actionbar布局变化actionbar样式,简单而美丽.但有一个细节需要注意的是,高分辨率的问题留空.一般720上述决议,下一次你发现,无论什么样的变化总是会有一个小的布局文件 ...

  6. 跨域 Iframe 通信解决方案（兼容 IE 系列浏览器。）

    实现思路: 1.postMessage(IE8+, Firefox 3.1+, Opera 9+, Safari, and Chrome) 2.利用window.navigator共享信息,使支持IE ...

  7. Linux 字符驱动程序（一）

    Linux 字符驱动程序(一) 于linux有三个主要的内核设备: 1 字符设备:         •字符设备的读写以字节为单位,存取时没有缓存.      •对字符设备发出读写请求时.实际的硬件I/ ...

  8. SQL入门学习4-复杂查询

    5-1 视图 视图和表 视图和表的区别只有一个是否保存了实际的数据 使用INSERT和SELECT实际上就是从存储设备中读取数据,各种计算后,将数据呈现给用户. 视图不会将数据保存在存储设备中.实际上 ...

  9. java NIO中的Reactor相关知识汇总 （转）

    一.引子 nio是java的IO框架里边十分重要的一部分内容,其最核心的就是提供了非阻塞IO的处理方式,最典型的应用场景就是处理网络连接.很多同学提起nio都能说起一二,但是细究其背后的原理.思想往往 ...

  10. android怎么在launcher改动内置apk的icon

    找到launcher下的IconCache中加入变量用来存储要改动apk的包名 及要改动成的icon private String[] className = {"com.google.an ...