Dedecms 百度编辑器插件Ueditor 1.2.1GBK

使用方法:下载下来,里面有个文件夹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的内容--><scriptid="container"name="content"type="text/plain">初始化显示</script><!--引入配置文件--><scripttype="text/javascript"src="/js/ueditor/ueditor.config.js"></script><!--引入编辑器源码文件--><scripttype="text/javascript"src="/js/ueditor/ueditor.all.js"></script><!--实例化编辑器(注意,这里拿的是上面显示HTML内容的script的id)--><scripttype="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的核心过滤器会导致咱们的上传失效。

新建一个过滤器

packagecn.itsources.web.filter;importjava.io.IOException;importjavax.servlet.FilterChain;importjavax.servlet.ServletException;importjavax.servlet.ServletRequest;importjavax.servlet.ServletResponse;importjavax.servlet.http.HttpServletRequest;importorg.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;/***新创建一个过滤器,继承struts2的过滤器*@authorAdministrator**/publicclassUeditorStrutsFilterextendsStrutsPrepareAndExecuteFilter{publicvoiddoFilter(ServletRequestreq,ServletResponseres,FilterChainchain)throwsIOException,ServletException{HttpServletRequestrequest=(HttpServletRequest)req;Stringurl=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,编辑器,所见即所得,源码时代

营销型网站