JSP页面中嵌入UEditor编辑器方法

最新推荐文章于 2024-03-15 22:09:19 发布

放肆青春的博客

最新推荐文章于 2024-03-15 22:09:19 发布

阅读量1.4k

点赞数

分类专栏： jsp

jsp 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

JSP页面使用UEditor编辑器

对于一些刚入门的程序员来说，在一些实际的开发中可能会用到编辑器，那么如何在JSP页面中嵌入并使用编辑器（本文以百度的UEditor编辑器为例），以下是具体的操作流程：

第一步

首先要到UEditor官网下载不同版本的编辑器，用户可以根据自身的需求进行下载，本文操作所需要的是JSP版本，UEditor下载如图所示：

UEditor编辑器下载地址：http://ueditor.baidu.com/website/download.html

下载完成后进行解压缩到任意文件夹，包中的内容如下图：

另附上几个编辑器的下载地址：

1.KindEditor：http://kindeditor.net/down.php

2.xhEditor：http://xheditor.com/download.html

3.TQEditor：http://www.e512.net/tqeditor/download.htm

第二步

在Eclipse中新建Dynamic Wen Project，并在WebContent下新建文件夹，命名为UEditor，把刚解压的文件复制到该文件夹，结构如图所示：

需要注意的是，要把编辑器所需的jar也导入到WEB-INF下的lib中：

第三步

经过以上配置，基本上已经把相应的环境配好了，接下来就是要写一个jsp页面进行展示，为了演示需要，在这里把index.jsp作为演示页面。

打开index.jsp页面，导入对应的js和css样式，代码如下：

[html]view plaincopy 
   
 <%@ page language="java" contentType="text/html; charset=utf-8"  
     pageEncoding="utf-8"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <title>百度UEditor编辑器</title>  
 <script type="text/javascript" src="UEditor/ueditor.config.js"></script>  
 <script type="text/javascript" src="UEditor/ueditor.all.js"></script>  
 <link rel="stylesheet" href="UEditor/themes/default/css/ueditor.css">  
 <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->  
 <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->  
 <script type="text/javascript" charset="utf-8"  
     src="UEditor/lang/zh-cn/zh-cn.js"></script>  
   
 <style type="text/css">  
 div {  
     width: 100%;  
 }  
 </style>  
   
 </head>  
 <body>  
     <textarea id="container" name="container"  
         style="width: 800px; height: 400px; margin: 0 auto;"></textarea>  
     <script type="text/javascript">  
         UE.getEditor("container");  
     </script>  
 </body>  
 </html>  

以上代码写好以后，部署项目，运行tomcat，打开浏览器在地址栏中输入：http://localhost:8080/UEditor/，可以看到编辑器的效果：

注意：在压缩的包中，有index.html页面，里面有具体的配置信息，本文不做详细介绍。

转载来自：http://blog.csdn.net/j_tinker/article/details/50845132

放肆青春的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSP页面中嵌入UEditor编辑器方法

JSP页面使用UEditor编辑器对于一些刚入门的程序员来说，在一些实际的开发中可能会用到编辑器，那么如何在JSP页面中嵌入并使用编辑器（本文以百度的UEditor编辑器为例），以下是具体的操作流程：第一步首先要到UEditor官网下载不同版本的编辑器，用户可以根据自身的需求进行下载，本文操作所需要的是JSP版本，UEditor下载如图所示：UEditor编
复制链接

扫一扫