MVC3.0下使用百度富文本编辑器ueditor1.3.6上传图片

最新推荐文章于 2018-01-18 10:09:07 发布

tl110110tl

最新推荐文章于 2018-01-18 10:09:07 发布

阅读量2.4k

点赞数

分类专栏： MVC 文章标签： mvc 文本编辑

本文链接：https://blog.csdn.net/tl110110tl/article/details/35988621

版权

MVC 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文方法有不妥之处，希望有弄明白的大虾指点指点

1：在Web应用程序中，文件目录结构

其中ueditor是富文本编辑器文件夹，upload文件夹则用来存放将要上传的图片文件

2：在html页面引入相应文件，并初始化富文本编辑器

初始化富文本编辑器，可以用<script></script>标签，也可以用<textarea></textarea>标签

代码如下：

<!DOCTYPE html>

<html>
<head>
<title>Create</title>
<link href="../../ueditor/themes/default/css/ueditor.min.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../ueditor/ueditor.config.js" type="text/javascript"></script>
<script src="../../ueditor/ueditor.all.min.js" type="text/javascript"></script>
<script src="../../ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function () {
            //初始化富文本编辑器
            UE.getEditor("myEditor");
	}
</script>
</head>
<body>
	<script type="text/plain" id="myEditor" name="ArticleContent" style="width:800px;height:300px;">  
		<p>这里是百度富文本编辑器内容</p>
    </script>
</body>
</html>

3：更改配置文件

ueditor/ueditor.config.js文件中

第一句window.UEDITOR_HOME_URL = "/ueditor/";

主要是将图片上传后的绝对地址（类似：localhost://）改为相对地址（类似：../../upload/）用的

参数 ,imagePath:"" //图片修正地址，最后的最后会用到，是重要的配置参数

    window.UEDITOR_HOME_URL = "/ueditor/";
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();

    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL : URL

        //图片上传配置区
        ,imageUrl:URL+"net/imageUp.ashx"            //图片上传提交地址
        , imagePath: "../"               //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

ueditor/net/Config.cs

/// <summary>
/// Config 的摘要说明
/// </summary>
public class Config
{
    public static string[] ImageSavePath = new string[] { "../../upload" };
}

ueditor/ueditor.config.js文件中。

这里，savePath和上面的Config.cs文件中的 ImageSavePath要保持一致。

,savePath: [ '../../upload' ]    //图片保存在服务器端的目录， 默认为空， 此时在上传图片时会向服务器请求保存图片的目录列表，

ueditor/net/imageUp.ashx

去掉前三行中的

<%@ Assembly Src="Config.cs" %>

修改上传时的路径。这里只要能修改path，去掉后面的斜杠 '/' 即可。

info = up.upFile(context,path, filetype, size);                   //获取上传状态

这样改完之后，图片会上传到Web项目的upload文件夹下。并且是相对路径，但是图片可能会显示不出来。

如果在上传图片的时候显示不出图片，请继续看。

这里很明显，图片已经上传成功，但是

这时候，我们需要点击百度富文本编辑器上的功能按钮 “HTML” 来查看html。发现

上传成功说明图片已经存储到了服务器，显示不出来，应该是路径不对。

从图中可以看出，这是一个相对路径，但是我的项目中，从当前这个页面开始算，向上两级后并不能找到upload文件夹，我需要向上找三个等级才能找到upload文件夹，

即../../../upload/*********.png

这样我们需要用到开始提过的，ueditor/ueditor.config.js文件中的参数imagePath（图片地址修正参数）

观察路径发现，需要将路径前，多加上一个 "../"，于是参数imagePath="../"

这样就都完成了

百度富文本编辑器下载路径如下 1.3.6UTF8C#版本

http://pan.baidu.com/s/1kT9PDun

tl110110tl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录