您的位置：首页 > 产品设计 > UI/UE

初学UEditor

2016-01-07 09:35 489 查看

心血来潮，想搞一个后台文章管理，发现了百度的一个插件UEditor,尝试着用了一下，感觉还可以，所以稍微做下记录。可以先去官网下下载自己所需的版本：http://ueditor.baidu.com/website/download.html

我下载的是最新版的jsp版本：1.4.3.1 jsp版本。下载下来之后将其解压，并将他放到项目中即可。我把它放在webcontent下的ueditor中

在自己的页面上必须引用ueitor才能正常运行：

<script type="text/javascript" charset="utf-8" src="<c:url value='/ueditor/ueditor.config.js'/>"></script>
<script type="text/javascript" charset="utf-8" src="<c:url value='/ueditor/ueditor.all.min.js'/>"> </script>
<script type="text/javascript" charset="utf-8" src="<c:url value='/ueditor/lang/zh-cn/zh-cn.js'/>"></script>

在body中加入：

<pre name="code" class="html"><script id="editor" type="text/plain" style="width:100%;height:500px;"></script>

初始化界面即可：

<pre name="code" class="html">var ue = UE.getEditor('editor');

如果要图片上传到自己指定的地方：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
<span style="white-space:pre">	</span>if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return '/mengxi/upload_baidu';
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
}

完整的代码如下

<head>
<title>文章编辑</title>
<style type="text/css">
<script type="text/javascript" charset="utf-8" src="<c:url value='/ueditor/ueditor.config.js'/>"></script>
<script type="text/javascript" charset="utf-8" src="<c:url value='/ueditor/ueditor.all.min.js'/>"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="<c:url value='/ueditor/lang/zh-cn/zh-cn.js'/>"></script>
<script src="<c:url value='/js/jquery-1.11.1.js'/>"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 title">文章编辑</div>
</div>
<form action="<c:url value='/article/addArticle'/>" method="post" id="f">
<input type="text" name="title" placeholder="请输入文章标题" style="width:40%;margin-left:30%;border:1px solid #000000;"><br>

<script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
<input name="content" type="hidden" id="content"/>
<input name="comment" type="hidden" id="comment"/>
<button id="sub" class="button">发表</button>
</form>
</div>
<br><br>
<!-- 加载编辑器的容器 -->
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return '/mengxi/upload_baidu';
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
}

//                   表单提交
$(function(){
$("#sub").click(function(){
$("#content").val(ue.getContent());
$("#comment").val(ue.getContentTxt().substring(0,100));
alert(ue.getContentText());
$("#f").submit();
});
});
</script>
</body>

注意：在自己上传图片：返回格式必须与之前一致，不然会提示服务器返回错误：格式为：

{"state": "SUCCESS","title": "1452058203825090200.jpg","original": "9VL51020Z6TK.jpg","type": ".jpg"

,"url": "/ueditor/jsp/upload/image/20160106/1452058203825090200.jpg","size": "170932"}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航