原文: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. 解决新版Emacs的警告：Warning (initialization): Your load-path...

    升级到新版Emacs后出现警告 作为做好用的代码编辑器之一,Emacs绝对在极客世界实用率很高.当然VIM也有很多支持者.但小编是从VIM转到Emacs的,个人觉得Emacs更好用. 小编最近升级了F ...

  2. 添加服务引用和添加Web引用对比

    原文:添加服务引用和添加Web引用对比 在WindowsForm程序中添加服务引用和Web引用对比 为了验证书上有关Visual Studio 2010添加服务引用和Web引用的区别,进行实验. 一. ...

  3. ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇

    原文:ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇 第三章 为控件添加事件 好了,我们之前以前开发一个控件.而且也添加了属性,开发也很规范,但是那个控件还差最后一点:添加事件. 系列 ...

  4. [原创].NET 分布式架构开发实战之一 故事起源

    原文:[原创].NET 分布式架构开发实战之一 故事起源 .NET 分布式架构开发实战之一 故事起源 前言:本系列文章主要讲述一个实实在在的项目开发的过程,主要包含:提出问题,解决问题,架构设计和各个 ...

  5. 在python正在使用mysql

    缘由 近期在折腾一个小东西须要抓取网上的页面.然后进行解析.将结果放到数据库中. 了解到Python在这方面有优势,便选用之. 由于我有台server上面安装有mysql,自然使用之.在进行数据库的这 ...

  6. Unity 3D使用GameObject创建一个简单的可移动物体

    于Unity 3D游戏的开发.游戏脚本需要3D模拟组合,该脚本将被写入阻力3D为了达到效果对象. 以下是一个小实例,使用Unity 3D实现一个可控制移动的小人.小人能够向前.向后.向左和向右移动. ...

  7. PHP操作数据库PDO

    PHP操作数据库 载入数据库驱动 訪问phpinfo.php能够查看是否已经载入数据库驱动,例如以下显示还没有载入mySql数据库驱动. 在c盘找到php.ini配置文件开启载入mySql驱动,例如以 ...

  8. Mozilla 构建系统（转）

    英文来源:Mozilla’s Build System 中文出处:开放博客,由灰狐翻译小组制作 Mozilla 构建系统是一个非常酷的分布式系统,运行在BuildBot上.系统能在每次修改后自动重新构 ...

  9. C#开发中使用配置文件

    C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...

  10. Doug Lea

    如果IT的历史,是以人为主体串接起来的话,那么肯定少不了Doug Lea.这个鼻梁挂着眼镜,留着德王威廉二世的胡子,脸上永远挂着谦逊腼腆笑容,服务于纽约州立大学Oswego分校计算机科学系的老大爷. ...