MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦

简介: 原文:MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦文本编辑器有很多,比如ticymce和CKEditor就比较好用,但涉及到图片、文件上传,需要结合CKFinder实现,而且有些功能是收费的,即使有意付费使用, 支付也不方便。
原文: MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦

文本编辑器有很多,比如ticymceCKEditor就比较好用,但涉及到图片、文件上传,需要结合CKFinder实现,而且有些功能是收费的,即使有意付费使用, 支付也不方便。好在百度的开源文本编辑器UEditor现在也发展得不错,本篇就来体验其在MVC中的使用。需要实现如下效果:

 

1、上传图片
2、上传涂鸦
3、字数限制

1

 

4、另一视图页图文显示

2

 


首先到这里下载UEditor的.NET版本,我下载的是[1.4.3.NET版本]的UTF-8版。

 

下载后,在Scripts文件夹下创建UEditor文件夹,把所有下载文档都放到UEditor文件夹中。
3

 

我们需要一个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) > 100) {
                    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中设置。

4

 

以上,从imageUrlPrefix和imagePathFormat或scrawlPathFormat设置大致可以看出图片的保存路径是:Scripts/UEditor/net/upload/image/20140607/6353775730679106479709368.jpg,为此,我们需要在Scripts/UEditor/net下创建upload文件夹,再在Scripts/UEditor/net/upload下创建image文件夹。

5

 

最后在ueditor.config.js中设置UEditor的全局路径、一般处理程序的路径、字数限制,等等。

6

目录
相关文章
|
6月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
258 1
|
6月前
|
JavaScript 前端开发
layui用layer.open打开子页面并获取子页面的ueditor富文本编辑器的内容
该内容描述了一个Web应用的交互流程,其中父页面通过调用子页面的JavaScript函数来获取富文本编辑器的内容。子页面包含一个富文本编辑器和一个`callbackdata`函数,用于返回编辑器的文本内容。父页面使用`layer.open`打开子页面作为弹窗,并在用户点击提交时,访问子页面的`callbackdata`获取编辑器内容,同时检查其他表单字段,如类型、标题等是否为空,以确保数据完整。
550 0
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
129 0
|
2月前
|
API C# Windows
一个.NET开源、现代、轻量级的文本编辑器
一个.NET开源、现代、轻量级的文本编辑器
|
3月前
|
小程序 API 容器
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
ProFlow 流程编辑器框架问题之查看ProFlow的开源地址和官网链接如何解决
117 0
|
5月前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
4月前
|
自然语言处理 Shell 开发者
|
搜索推荐 中间件
系统入门到实战学习某项技术、有问题找"百度"、学习大佬的技术博客、找开源代码等资料
系统入门到实战学习某项技术、有问题找"百度"、学习大佬的技术博客、找开源代码等资料
84 0
|
12月前
|
缓存 Ubuntu Linux
百度搜索:蓝易云【Varnish开源HTTP反向代理缓存服务器、部署安装、测试】
通过按照上述步骤部署和配置Varnish,您可以将其作为反向代理缓存服务器来提高Web应用程序的性能和响应速度。记住,在实际部署中,您可能需要进一步调整Varnish的配置以满足您的具体需求。
92 2
|
11月前
|
Kubernetes 网络协议 Linux
百度搜索:蓝易云【【K8S&RockyLinux】基于开源操作系统搭建K8S高可用集群教程。】
这是一个简要的教程,用于基于Rocky Linux搭建Kubernetes高可用集群。请注意,具体步骤可能因Kubernetes版本、网络插件选择和环境配置而有所不同。在实际搭建过程中,请参考相关文档和官方指南,并根据您的需求进行适当的调整和配置。
659 0