Dedecms 百度编辑器插件Ueditor 1.2.1GBK

03.09 23:02:39发布

使用方法:下载下来,里面有个文件夹ueditor,把这个文件夹复制到 include 里面。另外把压缩文件里面的 inc_fun_funAdmin. php 放到 include/inc 目录替换掉即可(原先的先备份)。然后在 系统—系统基本参数—核心设置—Html编辑器 ,那里,输入 ueditor[...]




今天给大家介绍一款由百度开发的UEditor,这个编辑器效果不错,用得起来也很方便简单,大家在开发的时候可以用到这款编辑器。

首先,咱们需要在网上下载这款编辑器:

百度编辑器下载地址:http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp


我这里下载的是支持jsp的最新版本,它还有支持php,.net的其它版本。

一 完成基本配置:

1.将下载的文件解压到咱们的JavaWeb项目中(如下图):

2.把相应的jar包导入到项目中(如下)


 这几个jar包可以在/ueditor/jsp/lib中找到

3.新建一个demo.jsp,在页面上完成下面的代码,就可以看到效果

<body>
<!-- 这里就是用来显示HTML的内容 -->
 <script id="container" name="content" type="text/plain">
        初始化显示
    </script>
 
 <!-- 引入配置文件 -->
 <script type="text/javascript" src="/js/ueditor/ueditor.config.js"></script>
 <!-- 引入编辑器源码文件 -->
 <script type="text/javascript" src="/js/ueditor/ueditor.all.js"></script>
 <!-- 
 	实例化编辑器 (注意,这里拿的是上面显示HTML内容的script的id)
 -->
 <script type="text/javascript">
    	UE.getEditor('container');
 </script>
</body>

最后展示的效果如下:


大家可以看到,这里可以完成各种设置(包含字体,表格,表情,图片等东西),整体看来,效果还是非常不错的。

二 参数配置效果

完成基本的配置之,咱们又要学习一下,看怎么来进行一些常用参数的配置。

下面我做了一个只有很基本的功能,然后单独设计了编辑器的高度与宽度

UE.getEditor('container',{
	toolbars: [
	           [
	            'fullscreen',  //全屏功能
	            'source', 	//查看源码
	            'undo',    //撤销
	            'redo',    //重做
	            'bold'     //加粗
	           ]
	       ],  
	initialFrameWidth : 600,   //初始代编辑器的宽度
	initialFrameheight: 700	   //初始代编辑器的高度
});

效果如下:

三 上传图片功能

接下来咱们简单说一下插件的上传图片功能,上传功能是自带的,如果你是jsp+servlet非常简单,直接使用就可以了,但是我们可以去设计上传的路径与名称。 大家可以在config.json文件中找到这个配置:文件的位置:

文件中修改的位置(设置到自己需要的位置):


下面是上传了图片后的效果:


四 Struts2的上传功能

下面做一个扩展,如果咱们的项目是使用的Struts2,那么Struts2的核心过滤器会导致咱们的上传失效。

新建一个过滤器

package cn.itsources.web.filter;

import java.io.IOException;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;

/**
 * 新创建一个过滤器,继承struts2的过滤器
 * @author Administrator
 *
 */
public class UeditorStrutsFilter extends StrutsPrepareAndExecuteFilter {

	public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {    
		HttpServletRequest request = (HttpServletRequest) req;     
		String url = request.getRequestURI();
		 //这里把上传的controller.jsp 过滤出去,不让Struts2来管理
		if ("/js/ueditor/jsp/controller.jsp".equals(url)) {    
			System.out.println("不经过Sturts2...");
			chain.doFilter(req, res);    
		}else{      
			super.doFilter(req, res, chain);    
		}    
	}    
}

web.xml使用新的过滤器即可

<!-- 配置核心过滤器 -->
 <filter>
       <filter-name>struts2</filter-name>
       <filter-class>cn.itsources.web.filter.UeditorStrutsFilter</filter-class>
 </filter>
  <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
  </filter-mapping>

 

#标签:UEditor,编辑器,所见即所得,源码时代

TAG标签: dedecms url

登录 后发表评论
1条评论
鹤轩
1楼 · 03.09 23:03:17

这个还是比较好用的编辑器