首页 > 代码库 > Ueditor的使用

Ueditor的使用

2024-07-02 09:56:31   222人阅读

　最近在做一个网站,之前使用的是KindEditor.然后负责人说要求换一个新的文本编辑器,于是就选择了百度的Ueditor.初次使用花了很大的力气才搞懂.不过确实挺好用的.下面就将使用方法与大家分享.

　首先我在官网上下载了jsp版的Ueditor.解压出来有多个文件夹,将解压出来的文件全部复制到工程下面的webroot下(我的工程名为Ueditor).如图:   

　直接复制到工程下面可能会报错.只要保证ueditor.all.js和ueditor.config.js没有错就行.接下来就是一步一步的修改配置文件.首先打开ueditor.config.js,找到URL并做如下修改:

例如我的URL = window.UEDITOR_HOME_URL || "/Ueditor/ueditor/".

　然后找到在jsp文件夹下的imageup.jsp;这个jsp页面作用就是上传图片并处理图片.将图片的存储路径修改为自定义的路径只需要将up.setSavePath(dir)修改为up.setSavePath("自定义路径")即可.自定义路径默认还是在tomcat下该工程的ueditor文件夹中的jsp下面.换句话说:如果你的自定义路径为"picture",那么上传成功后图片就会存放在tomcat/工程/webapps/ueditor/jsp/picture.同样的,如果你要上传附件,那么还得修改fileup.jsp中的存储路径.和图片差不多,所以就不一一赘述了.

　在配置文件修改了之后,就可以开始使用Ueditor了.新建一个index.jsp页面,代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="http://www.mamicode.com/">
    
    <title></title>
    <!--引用配置文件-->
    <script src="http://www.mamicode.com/Ueditor/ueditor/ueditor.config.js" charset="utf-8" type="text/javascript"></script>
    <!--引用编辑器源码文件-->
    <script src="http://www.mamicode.com/Ueditor/ueditor/ueditor.all.js" charset="utf-8" type="text/javascript"></script>
    <!--使用默认皮肤-->
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/Ueditor/ueditor/themes/default/ueditor.css" />
    <!-- 语言包文件(建议手动加载语言包，避免在ie下，因为加载语言失败导致编辑器加载失败) -->
    <script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/lang/zh-cn/zh-cn.js"></script>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">

  </head>
  
  <body>
  <form action="/Ueditor/pages/do.jsp" method="post">
    <script type="text/plain" id="ueditor" name="ueditor"></script>
   	<input type="submit" value="http://www.mamicode.com/提交">
  </form>
  
  <script type="text/javascript"><!--初始化Ueditor-->
  	var editor = UE.getEditor("ueditor",{
  		initialFrameWidth:800,
  		initialFrameHeight:400.
  	});
  </script>
  </body>
</html>

　　发布工程之后,见到如下页面就说明配置成功了：


联系
我们