UEditor上传图片到项目外部目录

一、相关 百度UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,轻量,可定制,开源基于MIT协议,允许自由使用和修改代码。 二、原料 1、ueditor源码,包括ueditor.jar的源码,官网下载 2、ueditor上传文件路径配置官方文档(http://fex.baidu.com/ueditor/#server-path) 三、需求 查阅官方文档,上传的文件存放路径根据项目根路径配置,若要使文件存放路径配置到项目外,使用相对路径就行 然而对于有些童鞋来说,使用相对路径../../../..会带来很多不确定性,项目迁移或文件服务器变动都需对相对路径进行重新调整,若在window server中跨盘符显然是无法满足的 四、实操 开源的好处就是自己能动手,对源码进行些扩展以达到自己想要的效果。 学习源码参考:ueditor文件上传研究(http://asialee.iteye.com/blog/2100187),感谢前人提供肩膀。代码详解上面的文章已经很清楚,这里尽量简洁,后面附上github地址。 源码结构 源码修改记录:(详见源码,在ueditor搜索zrk就能搜索到所有修改的代码) config.json配置 config.json中添加如下属性 (一定要添加此属性): “physicsPath”:”d:/resource”, physicsPath :属性配置文件存放的路径,…

Continue Reading →

UEditor代码高亮配置

在使用百度ueditor的时候,尤其是程序员技术类的分享一段代码的时候,如果直接是文本样式很难看,强大的ueditor为我们想到了一种解决办法,就是代码高亮效果,本人感觉很美观,当然这种效果是仁者见仁的,那么如何实现ueditor代码高亮效果呢,请看下面步骤。 本案例基于ueditor1.4 以上版本,本人亲测,在1.2版本也适用。 1,初始化百度ueditor时候添加代码语言工具栏 在toolbars中添加’insertcode’,预览界面效果如下 如上图所示,代码语言工具栏已经显示出来,点击它之后有目前较流行的语言格式供选择。 2,添加代码高亮后,文章内容展示界面代码高亮片段效果如下: 3,代码高亮依赖文件 shCoreDefault.css 与 shCore.js 1) ueditor依赖的文件位置,如下图 2) 在文章内容展示界面的<head></hedad>之间添加如下代码 <script type=”text/javascript” src=”/baidu/ueditor/third-party/SyntaxHighlighter/shCore.js”></script> <link rel=”stylesheet” href=”/baidu/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css”> <script…

Continue Reading →

UEditor上传图片功能实现

项目一直在用百度ueditor,所以上传图片是避免不了的,最近一个新的项目要用到,所以索性就用最新版本的ueditor1.4.3,看了下官方文档关于上传图片的说明,尝试配置了下,嘿,比1.2版本的强大多了,1.2版本的还需要请求后端服务器,编写上传图片代码才可以实现,最新版本1.4.3直接配置下路径就可以实现上传啦。配置步骤如下 1,在工程目录下新建文件夹upload/images,我的是java项目工程 2,自定义编辑器工具栏添加上传图片工具栏 toolbars:中添加’insertimage’ 3,打开l文件夹ueditor/jsp/下的config.json配置文件 4,修改config.json配置文件中的imagePathFormat的值为upload/images/{yyyy}{mm}{dd}/{time}{rand:6} 5,运行工程项目,打开ueditor界面,点击上传图片工具栏上传图片 点击选择图片按钮,选择要上传的图片 点击右上角的开始上传按钮,上传图片成功后,点击确认按钮,我们就可以在编辑器中看到刚才上传的图片啦。 6,打开tomcat工程发布目录,upload/images,然后我们就可以查看到已经上传的图片了。 引用地址:https://www.vxzsk.com/176.html  

Continue Reading →

UEditor后端配置项没有正常加载jsp上传图

最近下载了ueditor的1.4.3.3 jsp版本,然后准备加个上传图片功能,可是百度ueditor在这里居然有个坑,打开上传图片界面,直接报后端配置项没有正常加载,上传插件不能正常使用!坑爹,然后就查询百度ueditor文档说明,也没发现解决办法,最好谷歌搜索问题,说什么的都有,查询好长时间终于在一个论坛里有人说了句jsp版本的,打开controller.jsp界面,引入的类报错,在下载的ueditor包里有个依赖的包叫ueditor.jar,复制到项目工程lib下就好了,果不奇然,完美解决后端配置项没有正常加载,上传插件不能正常使用的问题。 建议把lib下的所有jar包全部复制到工程项目WEB-INF/lib下,然后我们在打开上传图片界面,如下图,点击选择图片按钮出现了。 引用地址:https://www.vxzsk.com/175.html

Continue Reading →

UEditor获取内容

1,引入百度ueditor编辑器js库 <!– 配置文件 V型知识库www.vxzsk.com –> <script type=”text/javascript” src=”resources/baidu/ueditor/ueditor.config.js”></script> <!– 编辑器源码文件 –> <script type=”text/javascript” src=”resources/baidu/ueditor/ueditor.all.js”></script> 以上两个js文件,请读者前往百度开放平台ueditor频道下载。 2,<body></body>之间添加html代码,其中获取内容等功能按钮也一并添加 <!– 加载编辑器的容器开始 V型知识库www.vxzsk.com –>…

Continue Reading →

UEditor字体大小等样式设置

第一,我们接着上一节继续介绍百度编辑器ueditor的定制特性,上一节呢,我们在定制工具栏的时候,并没有定制字体的大小,现在我们查询百度编辑器工具栏表表示字体大小的toolbars的字符串为’fontsize’,我们把它放进toolbars数组中,效果如下 其实修改字体大小 行高等有两种方式,第一种就是修改百度编辑器的ueditor.config.js文件,另一种就是在jsp页面初始化百度编辑器的时候设置默认参数,本人比较推荐第二种。 第一种、修改ueditor.config.js,操作如下 1,打开工程项目中的百度编辑器依赖文件ueditor.config.js,在配置文件中找到initialStyle选项。放开注释符号,如下代码 initialStyle:’p{line-height:1em}’ 修改为  initialStyle:’p{line-height:1em;font-size: 26px}’,我们设置默认字体大小为26px,一定要记得放开此行注释。效果如下 只有鼠标放上去之后才会显示字体大小,如果鼠标不聚焦在编辑器内部, 工具栏显示”字号”两字。 第二种、在jsp界面初始化编辑器的时候设置 把实例化百度编辑器的代码修改为如下: var ue = UE.getEditor(‘container’, { toolbars: […

Continue Reading →

UEditor入门部署和体验

1、下载编辑器 到官网下载 UEditor 最新版:[官网地址] ,选择jsp UTF-8版本,解压到项目工程目录下 2、创建demo文件ueditor.jsp <%@ page language=”java” import=”java.util.*” pageEncoding=”utf-8″%> <% String path = request.getContextPath(); String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;…

Continue Reading →

几种知名开源富文本编辑器记录和对比

1、UEditor 百度的。 优点:插件多,基本满足各种需求,类似贴吧中的回复界面。 缺点:不再维护,文档极少,使用并不普遍,图片只能上传到本地服务器,如果需要上传到其他服务器需要改动源码,较为难办,加载速度慢。 https://ueditor.baidu.com/website/onlinedemo.html   2、kindeditor 界面类似百度,效果很像 文档齐全但用例较少,使用还算方便。 缺点:总感觉样子不是很好看,没有现代那种风格,还是老式的传统图标。 http://kindeditor.net/demo.php   3、simditor 样式好看,插件不多,基本满足需求 文档英文,使用较为吃力,如果英文水平不好的话 github上面开源,维护较好 因为文档看起来吃力,所以本人没有考虑继续使用。 http://simditor.tower.im/   4、bootstrap-wysiwyg…

Continue Reading →

初识ExtJS

一、浅谈ExgJS发展历史 要想深入了解某一项事物,最好的方式就是首先了解它的历史。Ext的发展比较有特色,其实一开始Ext并非是从零开发的。它是由JackSlocum基于雅虎的YUI技术,通过参考JavaSwing等机制来开发成的这么一种纯javascript框架,这货其实一开始并不叫ExtJS,一开始叫YUI-Ext,其实这哥们一开始也没想到Ext能火,不过“事与愿违”,这货超乎寻常的火了起来,后来青出于蓝而胜于蓝,Jack就想给他另起一个名字,也就是我们今天所见所闻的ExtJS,现在已经发展的ExtJS4.2。 二、ExtJS是什么? 1、ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。 2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。 三、常见javascript框架分类 我个人将常见的javascript框架分为三类: Javascript类库、RIA框架、移动网络应用APP框架:下面是对应三类的优势和代表性的框架 1. Javascript 类库  prototype / jquery 解决浏览器兼容性 快速开发 Web 应用 丰富 UI 效果 扩展性强 社区支持很好 2. 跨浏览器 RIA 框架  YUI / ExtJS / DOJO 类桌面应用…

Continue Reading →