(ASP.NET) 利用ueditor进行图片上传（尝试3）

来源：互联网发布：淘宝卖计生用品编辑：程序博客网时间：2024/06/06 20:06

前面的ckeditor以及Fileupload其实功能比较简单，而且对于新手来说使用还有点复杂，难搞。所以在此推荐百度所提供的ueditor并且以图文的方式详细解说配置。

(1)就是要下载ueditor啦，在此我下载的版本是 .NET 版的 ueditor 1.4.3.3 UTF-8下载地址下载地址，是目前最新的版本，下载解压缩后的文件结构如下图所示：

(2)接下来就是将ueditor文件夹放入到我们.Net项目当中，放哪里其实关系不大，不过我推荐将ueditor文件夹放到项目的根目录里面去，方便去调用去使用，如下图所示：

(3)VS进入项目后，找到ueditor文件夹，点击ueditor.config.js文件，找到图片下的代码。

(4)然后找到ueditor文件夹下的net文件夹里面的config.json文件，在每一项带有UrlPrefix（访问路径前缀）中按以下图片进行修改。

在啰嗦一句，这里千万别写错，若在本地运行，则写localhost:端口号（可查看，右键你的项目->选择属性->选择WEB->在服务器那里可以看到你本地的URL是什么，复制即可），若是服务器则要看清楚是不是用的外网IP地址。

(5)配置到这里，图片上传功能已经开启了，接下来在你想要用编辑器的页面调用就好，下面将给出我的模板，仅供参考。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XXXXXXX" Inherits="XXXXXXX" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <!-- 配置文件 -->    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.config.js"></script>    <!-- 编辑器源码文件 -->    <script type="text/javascript" charset="utf-8" src="../ueditor/ueditor.all.js"> </script>    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->    <script type="text/javascript" charset="utf-8" src="../ueditor/lang/zh-cn/zh-cn.js"></script></head><body>    <form id="form1" runat="server">    <div>                <div>            <script id="editor" name="uecontent" type="text/plain" style="height: 300px;width:100%;">            </script>        </div>        <!-- 实例化编辑器 -->        <script type="text/javascript">            var ue = UE.getEditor('editor', {                autoHeight: false            });            ue.ready(function() {                //设置编辑器的内容                //获取html内容，返回: <p>hello</p>                var html = ue.getContent();                //获取纯文本内容，返回: hello                var txt = ue.getContentTxt();            });        </script>    </div>    </form></body></html>

(6)运行结果如下:

至此，ueditor配置到此结束，其实个人感觉ueditor你一上手的话，其他不是事，之后也将会继续说明ueditor一些小细节

阅读全文

0 0