注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

中华神鸟

QQ:935658701

 
 
 

日志

 
 

Jsp使用ueditor编辑器  

2013-04-12 17:55:42|  分类: 软件安装 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。
ueditor的使用效果如下:
Jsp使用ueditor编辑器 - 中华神鸟 - 中华神鸟
 
下面就让我们在jsp中一起来使用这款强大的编辑器吧!
第一步:获取编辑器
可以从下面地址下载该编辑器(有开发版和定制版两种)
http://ueditor.baidu.com/website/index.html
第二步:将编辑器加入到你的jsp项目中
首先需要解压下载到的压缩包,解压后的目录结构应该如下(开发版的,如果是定制版文件夹没这么多):
 _examples:编辑器完整版的示例页面 
    _demos:编辑器的各种使用案例 
 dialogs:弹出对话框对应的资源和JS文件 
   themes:样式图片和样式文件 
   server:涉及到服务器端操作的PHP、JSP等文件 
 third-party:第三方插件 
   editor_all.js:_src目录下所有文件的打包文件 
  editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用 
editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录
然后在项目webroot下面新建一个文件夹“ueditor”,将刚才解压得到的文件和文件夹拷到该文件夹下,如下图
Jsp使用ueditor编辑器 - 中华神鸟 - 中华神鸟
 
图中ueditor文件夹下的文件夹和文件基本是必须拷入的,其他文件夹并不是必须的,可以不拷入。这是定制版的解压后所得的所有文件。
第三步:在jsp文件中使用编辑器
这里假定页面为index.jsp
在index.jsp文件中,首先在<head>标签中导入编辑器需要的几个入口文件,示例代码如下:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>

第四步:然后在index.html文件<body>标签中创建编辑器实例及其DOM容器。具体代码示例如下:

<textarea name="key" id="myEditor">这里写你的初始化内容</textarea>
<script type="text/javascript">
//var editor = new UE.ui.Editor();
//editor.render("myEditor");
//1.2.4以后可以使用一下代码实例化编辑器
UEDITOR_CONFIG.UEDITOR_HOME_URL = './ueditor/';
UE.getEditor('myEditor');
</script>

由于我使用的版本是1.2.5的,所以使用UE.getEditor('myEditor');来实例化编辑器,低版本的可以使用上面注释的代码。

UEDITOR_CONFIG.UEDITOR_HOME_URL = './ueditor/';这一句非常重要,如果不加这一步,你的jsp文件只有放在ueditor目录下才可以使用本编辑器(如果下一步使用官方推荐的配置方法,这一句可以不加)。



最后一步: 在/ueditor/ editor_config.js中查找URL变量配置编辑器在你项目中的路径。

//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||"/jiaonet/ueditor/";

上面是官方推荐的配置方法。

至此,一个完整的编辑器实例就已经部署到咱们的项目中了!在浏览器中输入http://localhost:8080/jiaonet运行下试试UE强大的功能吧!
 

  评论这张
 
阅读(11057)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017