初学UEditor

来源：互联网发布：天知道其犹张弓乎编辑：程序博客网时间：2024/05/21 10:18

心血来潮，想搞一个后台文章管理，发现了百度的一个插件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"}

0 0