前面的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>
至此,ueditor配置到此结束,其实个人感觉ueditor你一上手的话,其他不是事,之后也将会继续说明ueditor一些小细节