用Ueditor为Asp.net mvc打造可视化HTML编辑器

最新推荐文章于 2022-02-11 17:22:52 发布
最新推荐文章于 2022-02-11 17:22:52 发布
阅读量2w 收藏 17
点赞数 10
分类专栏： Asp.net MVC C#开发 文章标签： asp.net 可视化html编辑器 mvc url border function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aofengdaxia/article/details/6899468
版权
在Asp.net WebForm时代，Web系统的HTML可视化编辑器可以使用FTB一类的控件，直接引入工具箱拖拉即可实现。但是在Asp.net MVC时代，直接使用服务器端控件是不符合MVC的标准和约束，会出现这样或者那样的问题。UEditor似乎又是不错的一款可视化编辑器，有百度做后台支撑，开源，而且样式漂亮，自定义容易……所以我决定在我的系统中使用Ueditor作为可视化编辑工具，但是因为Ueditor支持了Php，并没有合适asp.net mvc的应用实例。所以我决定改造下Ueditor来满足MVC下的需要。

首先、下载Uediotr，初次使用建议下载全版和实例，可以一一学习研究。下载地址：http://ueditor.baidu.com/download.html 

其次、在MVC中建立一个文件件，如图，然后把下载的文件夹中的几个文件全部包含进来.

再次、我们在Asp.net mvc中可以建立一个测试Controller.在其View中输入引用editor_config.js 和editor_ui_all_min.js 同时引用themes下面的ueditor.css。然后在需要出现

            编 辑框的地方输入

<textarea id="editor"></textarea>
                    <script type="text/javascript">
                        var editor = new baidu.editor.ui.Editor({
                            UEDITOR_HOME_URL: '/Uedit/',
                            iframeCssUrl: '/Uedit/themes/default/iframe.css', 
                            initialContent: '',
                             minFrameHeight: 550
                        });
                         editor.render('editor');
   
                </script>

          注意：UEDITOR_HOME_URL: '/Uedit/',

                 iframeCssUrl: '/Uedit/themes/default/iframe.css', 这两行js为Ueditor放置的目录和iframe.css所在的位置。然后运行。可以发现Ueditor的基本样子已经出现，但是图片上传部分存在问题。

最后、修改图片上传部分的问题。找到\UEdit\dialogs\image。里面有两个php文件，可以把这两个php文件更名为html文件，我们主要使用upload.php.我们把他修改为upload.html，同时修改其中的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0}
        html,body{margin-top:-2px;}
		#filename{
            position:absolute;
            z-index:9999;
            left:150px;
			opacity:0;
			filter:alpha(opacity=0);
			width:50px;
			height:21px;
  		}
		#url{
			position:absolute;left:0;
			width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
		}
		#flag{
			position:absolute;left:150px;
		}

		.btn2 {
		border:0;
		background: url("../../themes/default/images/button-bg.gif") no-repeat;
		font-size:12px;
		height:23px;
		width:50px;
        text-align: center;
        cursor: pointer;
		}
		.btn1 {
		border:0;
		background: url("../../themes/default/images/button-bg.gif") 0 -27px no-repeat;
		font-size:12px;
		height:23px;
		width:50px;
        text-align: center;
        cursor: pointer;
		}
		

    </style>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
        <input type="hidden" id="path" name="path" />
        <input id="filename" name="filename" type="file"  οnmοuseοver="document.getElementById('flag').className='btn1'" οnmοuseοut="document.getElementById('flag').className='btn2'" />
		<input id="url" type="text" name="url" readonly="readonly" value="" />
		<input class="btn2" id="flag" name="flag" type="button" value="浏览…" οnmοuseοver="this.className='btn1'" οnmοuseοut="this.className='btn2'" οnclick="sub()" />
    </form>
    <script type="text/javascript">

            var url = document.getElementById('url');
            url.onkeydown = function(evt){

                evt = event || evt;
                evt.preventDefault ?evt.preventDefault() : (evt.returnValue = false);
            }

        var form = document.getElementById("upImg");
        document.getElementById("filename").onchange = function(){

            //------------------------------------------
            //如果需要上传功能，请取消以下两行注释即可！！！！
            //alert("由于安全原因，本demo暂不提供图片上传服务！下载包中包含了支持php版上传功能的相关文件，修改后即可使用。");
            //return;
            //------------------------------------------


            document.getElementById('path').value = this.value;
            form.submit();
        }
		function sub(){
            var file = document.getElementById("filename");
            //file.click();
            if(file.click) file.click();
            else if(file.fireEvent) file.fireEvent('onclick');
            else if(document.createEvent){
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, true);
                file.dispatchEvent(evt);
            }
		}
    </script>
</body>
</html>


我们要把图片上传到“/upload/UploadImage/”，所以我们需要先建立一个upload的controller，然后建立一个UploadImage的action.具体的C#代码如下：

 


 

 public class UploadController : Controller
    {
        //
        // GET: /Upload/
        [HttpGet]
        public ActionResult Upload()
        {
            string url = Request.QueryString["url"];
            if (url == null)
            {
                url = "";
            }
            ViewData["url"] = url;
            return View();
        }
        [HttpPost]
        public ActionResult UploadImage(HttpPostedFileBase filename)
        {
            //具体的保存代码
           return View();
        }
    }

在view中代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0}
        html,body{margin-top:-2px;}
		#filename{
            position:absolute;
            z-index:9999;
            left:150px;
			opacity:0;
			filter:alpha(opacity=0);
			width:50px;
			height:21px;
  		}
		#url{
			position:absolute;left:0;
			width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
		}
		#flag{
			position:absolute;left:150px;
		}

		.btn2 {
		border:0;
		background: url("/UEdit/themes/default/images/button-bg.gif") no-repeat;
		font-size:12px;
		height:23px;
		width:50px;
        text-align: center;
        cursor: pointer;
		}
		.btn1 {
		border:0;
		background: url("/UEdit/themes/default/images/button-bg.gif") 0 -27px no-repeat;
		font-size:12px;
		height:23px;
		width:50px;
        text-align: center;
        cursor: pointer;
		}
		

    </style>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
    <form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
        <input type="hidden" id="path" name="path" />
        <input id="filename" name="filename" type="file"  οnmοuseοver="document.getElementById('flag').className='btn1'" οnmοuseοut="document.getElementById('flag').className='btn2'" />
		<input id="url" type="text" name="url" readonly="readonly" value="<%=ViewData["url"] %>" />
		<input class="btn2" id="flag" name="flag" type="button" value="浏览…" οnmοuseοver="this.className='btn1'" οnmοuseοut="this.className='btn2'" οnclick="sub()" />
    </form>
    <script type="text/javascript">

        var url = document.getElementById('url');
        url.onkeydown = function (evt) {

            evt = event || evt;
            evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
        }

        var form = document.getElementById("upImg");
        document.getElementById("filename").onchange = function () {

            //------------------------------------------
            //如果需要上传功能，请取消以下两行注释即可！！！！
            //alert("由于安全原因，本demo暂不提供图片上传服务！下载包中包含了支持php版上传功能的相关文件，修改后即可使用。");
            //return;
            //------------------------------------------


            document.getElementById('path').value = this.value;
            form.submit();
        }
        function sub() {
            var file = document.getElementById("filename");
            //file.click();
            if (file.click) file.click();
            else if (file.fireEvent) file.fireEvent('onclick');
            else if (document.createEvent) {
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, true);
                file.dispatchEvent(evt);
            }
        }
    </script>
</body>
</html>


 

<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
    *{margin:0;padding:0}
        html,body{margin-top:-2px;}

      #filename{
            position:absolute;
            z-index:9999;
            left:150px;
			opacity:0;
			filter:alpha(opacity=0);
			width:50px;
			height:21px;
  		}
		#url{
			position:absolute;left:0;
			width:146px;height:21px;background: #FFF;border:1px solid #d7d7d7;padding: 0; margin-top:-1px;
		}
		#flag{
			position:absolute;left:150px;
		}

		.btn2 {
		border:0;
		background: url("/UEdit/themes/default/images/button-bg.gif") no-repeat;
		font-size:12px;
		height:23px;
		width:50px;
        text-align: center;
        cursor: pointer;
		}
		.btn1 {
		border:0;
		background: url("/UEdit/themes/default/images/button-bg.gif") 0 -27px no-repeat;
		font-size:12px;
		height:23px;
		width:50px;
        text-align: center;
        cursor: pointer;
		}
</style>
</head>
<body>
<form id="upImg" action="/upload/UploadImage/" method="post" enctype="multipart/form-data" style="margin-top:5px;">
        <input id="filename" name="filename" type="file"  οnmοuseοver="document.getElementById('flag').className='btn1'" οnmοuseοut="document.getElementById('flag').className='btn2'" />
</form>
<script type="text/javascript">
    parent.reloadImg('<%=ViewData["url"] %>');
    location.href="/upload/upload/?url=<%=ViewData["url"] %>";
</script>
</body></html>


运行后发现Ueditor在Asp.net 中可以正常使用。

aofengdaxia
关注
专栏目录
简单asp.net可视化在线编辑器
02-06
简单asp.net可视化在线编辑器,修改别人的js
Asp.net MVC 下使用百度 UEditor 编辑器
12-23
Asp.net MVC 下使用百度 UEditor 编辑器
Ueditor1.4.3.3在ASP.net MVC5中的使用
04-13
解决Ueditor1.4.3.3在ASP.net MVC5项目发布到IIS，上传功能不能使用的问题
推荐两款富文本编辑器：NicEdit和Kindeditor
weixin_33727510的博客
09-05 157
做过Web开发的朋友相信都使用过富文本编辑器，比较出名的CuteEditor和CKEditor很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多。下面要推荐的两款富文本编辑器都是使用JS编写，使用简单，非常轻量级。 NicEditor NicEdit是一个轻量级，跨平台的Inline Content Editor。NicEdit能够让任何 element/di...
一步步教你在Asp.net Mvc中使用UEditor编辑器
10-20
在Asp.net Mvc中使用UEditor编辑器是一个常见的需求，因为UEditor是百度推出的一款功能丰富的富文本编辑器，它提供了多种编辑功能，如图片上传、视频插入、代码高亮等，非常适合用于网站内容的编辑和管理。...
C# .NET MVC UEditor富文本编辑器
04-30
在本文中，我们将深入探讨如何在C# .NET MVC框架中集成UEditor富文本编辑器，以便实现服务器与客户端之间的文件交互，包括图片和视频的上传。UEditor是一款功能强大的在线文本编辑器，广泛应用于网站内容管理，它...
asp.net mvc 百度UEdit富文本编辑器的使用
07-26
在这个场景中，我们将探讨如何在ASP.NET MVC项目中集成百度UEditor富文本编辑器，这是一款功能丰富的在线文本编辑工具，广泛用于创建和编辑HTML内容。 首先，让我们了解UEditor的基本概念。UEditor是由百度开发的一...
ASP.NET Framework MVC 使用UEditor富文本
guigenyi的专栏
02-11 1393
ASP.NET MVC 使用UEditor富文本
ueditor富文本编辑在 asp.net MVC下使用步骤
weixin_30847939的博客
03-16 146
mvc项目中用到了这个富文本编辑就试着把遇到的问题个使用步骤在这里记录一下，希望大家少走弯路。 1.首先我们先下载net版本的uediot r. 2.然后把整个文档拷贝到我们的项目中，记得是整个 3.下边是要修改ueditor.config.js文件 要修改的地方就一个 因为我的目录是这样的 4.接着修改net文件下config.json文件 这个就是要修改你上传一...
ASP.NET-MVCUeditorDEMO
03-23
ASP.NET MVC 开发版使用的Ueditor 完整demo ，支持图片上传显示等所有功能，可直接运行调试。
asp在线编辑器(可以实现图文并茂)
10-22
ASP在线编辑器，可以实现图文并茂，让你的发言更精彩，主要用于聊天室，BBS，新闻发布
【ASP.NET 插件】分享一个可视化HTML编辑器 CKEditor.NET
04-21 158
因为公司网站的可视化HTML编辑器IE兼容性问题，js报错不能使用，于是在网上找到了个还行的，图片本地上传的话直接把图片拖到编辑窗口就可以了。这个编辑器是在开源中国看到的，个人觉得还不错！ CKEditor.NET 是CKEditor和 ASP.NET 的集成版本。 软件文档 软件下载 来源 转载于:https://www.cnblogs.com/y...
百度UEditor1.4.3编辑器和asp.net MVC 5结合
weixin_30426065的博客
06-12 127
百度UEditor1.4.3编辑器和asp.net MVC 5结合 工作接近3年了。从来都没有完完整整的写过一篇博客。今天做项目的时候，客户想把百度编辑器和MVC整合到一起。想起来以前自己为了整合到一起费的力气。在这里记录一下。奉献给新手。老鸟请飘过。 首先去百度UEditor官网下载一份源码，地址http://ueditor.baidu.com/website/download.ht...
asp.net mvc4使用百度ueditor编辑器
weixin_30730053的博客
08-27 153
前言 　　配置.net mvc4项目使用ueditor编辑器，在配置过程中遇见了好几个问题，以此来记录解决办法。编辑器可以到http://ueditor.baidu.com/website/download.html#ueditor处下载.net 的开发包，如下图，我下载的是1.2.6.1net版本的开发包。 配置： 1、将开发包放到mvc4项目中，在我的项目中我放到了Content目录...
ASP.Net 文件操作 直接生成HTML文件或者根据模板生成HTML文件
songjuntao8的专栏
03-09 2049
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial cl
mvc html编辑器,用Ueditor为Asp.net mvc打造可视化HTML编辑器
weixin_29356805的博客
06-17 248
在Asp.net WebForm时代，Web系统的HTML可视化编辑器可以使用FTB一类的控件，直接引入工具箱拖拉即可实现。但是在Asp.net MVC时代，直接使用服务器端控件是不符合MVC的标准和约束，会出现这样或者那样的问题。UEditor似乎又是不错的一款可视化编辑器，有百度做后台支撑，开源，而且样式漂亮，自定义容易……所以我决定在我的系统中使用Ueditor作为可视化编辑工具，但是因为U...
asp.net mvc 中使用UEditor (百度富文本编辑器)
罗汉松驻扎的工作基地
06-28 4952
本人菜鸟程序员一个， 刚刚做了一个关于富文本框编辑的项目 ，记录一下： 开发工具 visual studio 2019 或者 2012 开发语言 asp.net mvc 4(3,4,5都适用) 最终效果： 首先下载百度提供的开发包，我选择的是asp.net 的， 如图， 然后包含到你的asp.net mvc 项目里面 ， 然后自己做一个controller ， 先做一个简单的index页面用于显示 textarea 富文本框 然后就可以接着在contr...
Asp.net Mvc 中使用UEditor
lee576的专栏
12-23 3045
首先去这里下载 然后重名一下下载的文件夹为ueditor(想自己起名字也可以，不过配置文件就要改成一样的了，这里为了避免麻烦，就跟配置文件里的名字保持一致了)然后根据自己需要放到项目中，我是这么放的 上面建的文件夹也是跟配置文件保持一致，并不是非要照着这么做，这里只是跟配置文件保持一致，可以根据自己需要修改配置文件，自己想怎么建都行，看看配置文件就明白了config.json/* 前后端通信相关
Asp.net Mvc配置UEditor编辑器全攻略
在Asp.net MVC中使用UEditor，首先需要从官方源下载最新版本的编辑器包，解压后将文件夹重命名为ueditor，以与配置文件保持一致。这一步是为了简化后续的配置工作。 将ueditor文件夹放入项目中的合适位置，例如在...
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

aofengdaxia

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值