百度编辑器ueditor的简单使用 - 博客频道 - CSDN.NET
崔成龙 . 勇往直前
拼搏人生，以成败论英雄！-廊坊师范学院信息技术提高班第八期
分类：【前端】
& & 最近刚被分配了以个消息发布的任务，其中用到了富文本编辑器。以前也用过，不过这次我选择的是百度富文本编辑器ueditor1_4_3-utf8-jsp版的。& & 其实看ueditor功能很强大，不过百度的设计还是很不错的。只需要稍微配置一下就可以用了。& & 首先下载到&ueditor1_4_3-utf8-jsp.rar，连接地址是：。我选择的是utf-8版本的。& & 解压以后整体拷贝到java web项目的网页根目录下。我这里是用myeclipse建的项目，所以把ueditor拷贝到了WebRoot下即可。& & 第二步，引用ueditor/jsp/lib下的jar包。你可以选择直接在Java Build Path中配置，或者直接放入WebRoot/WEB-INF/lib文件夹中，项目会自动引用该文件夹下的jar。推荐使用直接放到WEB-INF/lib下，这样你的jar是随着项目移动的，系统会按照相对路径加载项目下的jar。如果选择第一种，如果当jar文件移动了，那么这个功能就会失效的。& & 第三步，在页面上引入2个js文件&scripttype=&text/javascript&src=&ueditor/ueditor.config.js&&&/script&
&scripttype=&text/javascript&src=&ueditor/ueditor.all.js&&&/script&& & 第四步，在页面的编辑器位置，添加html代码&textareaname=&content& id=&myEditor&&&/textarea&
&scripttype=&text/javascript&&
UEDITOR_CONFIG.UEDITOR_HOME_URL = './ueditor/'; //一定要用这句话，否则你需要去ueditor.config.js修改路径的配置信息
UE.getEditor('myEditor');
&/script&& & 第五步，ueditor支持图片、文档、音乐等文件上传功能，如果你想要配置上传路径，可以修改 ueditor/jsp/config.json。& & 这个文件对于每一个配置项，都明确的文字说明。附上一段图片上传的配置吧：
/* 上传图片配置项 */
&imageActionName&: &uploadimage&, /* 执行上传图片的action名称 */
&imageFieldName&: &upfile&, /* 提交的图片表单名称 */
&imageMaxSize&: 2048000, /* 上传大小限制，单位B */
&imageAllowFiles&: [&.png&, &.jpg&,&.jpeg&, &.gif&, &.bmp&], /* 上传图片格式显示 */
&imageCompressEnable&: true, /* 是否压缩图片,默认是true*/
&imageCompressBorder&: 1600, /* 图片压缩最长边限制 */
&imageInsertAlign&: &none&, /* 插入的图片浮动方式 */
&imageUrlPrefix&: &&, /* 图片访问路径前缀 */
&imagePathFormat&:&_images/image/{yyyy}{mm}{dd}/{time}{rand:6}&, /* 上传保存路径,可以自定义保存路径和文件名格式 */第六步，ueditor支持自定义功能，界面上显示的功能都是可配置的，只要在ueditor/ueditor.config.js的toolbar中删改配置即可，代码如下： //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'searchreplace', 'help', 'drafts'
& & 看起来是6步，其实每一步都很简单了。为了让小伙伴们看得更清楚些，来张效果图吧：& & 效果还不错吧，其实，看起来复杂的功能，实现起来却很简单。而简单的功能，实现起来可能会很复杂。我们不只是使用那么看起来复杂，使用起来简单的各种开源组件，更要学习，如何把复杂的功能封装起来，对外提供简单的接口，让别人也能简单使用。&
xiaoxian8023
排名：第477名
（29）（26）（19）（3）（1）（12）（8）（16）（9）（4）手把手教你使用百度Doc进行在线word文档编辑
在线word文档编辑已经不是什么概念了，因为好多年前Google就推出了在线word文档编辑，使用在线文档编辑，可以让我们随时随地对指定的文档进行查阅、编辑等，但是由于Google的服务在中国大陆几乎被墙完，所以使用Google在线文档编辑已经成为过去式了，也有人会说可以使用office的联机功能，但是那蜗牛般的速度你能承受得了吗？其实我们完全可以使用全新的在线word编辑，那就是百度推出的百度Doc，下面就跟着亦是美网络小编一起来认识一下它吧！百度Doc在线文档编辑网址：打开这个网址后，我们需要登录一个百度帐户，登录后就可以使用它的在线文档编辑功能了，如下图所示：&看到没，百度Doc在线文档编辑的界面是不是office word的界面很相像呢？如果你会使用office，那么你也可以很熟练的使用百度Doc咯！百度Doc在线文档编辑默认保存的文档格式为.docx，大家一看就知道是office&word的后缀名。编辑好的文档，我们既可以选择存储到百度云盘里，也可以选择保存到本地电脑里，十分的人性化。当我们编辑好一篇文档时，可以通过点击&文件&-&保存&进行存储，如下图所示：&好了，今天的百度Doc在线文档编辑功能就介绍到这里了，感兴趣的同学赶紧去试试吧！
&&&&&站长QQ：&&&&&官方QQ群：
亦是美网络，成立于日，是一个致力于操作系统应用与计算机网络技术的综合IT网站，为大家不断提供和推荐有用的网络教程与技术。38186人阅读
javascript&jquery（28）
最近做的项目用到了ueditor这个东东，但是他的一些配置文档对初次使用者来说很难以理解，故作此总结
1.ueditor 官方地址：
& &开发文档地址：
& &下载地址：&（这里可选开发版，或MINI版）
2. 从官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：
& &&&_examples：编辑器完整版的示例页面
& &&dialogs：弹出对话框对应的资源和JS文件
& &&themes：样式图片和样式文件 & php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里我们选择php
& &&third-party：第三方插件(包括代码高亮，源码编辑等组件）
& &&editor_all.js：_src目录下所有文件的打包文件（用于发布版本）
&& &editor_api.js: API接口配置文件（开发版本）
& &&editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用
& &&editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录
3.编辑器的实例化页面，导入编辑器需要的三个入口文件，示例代码如下：
&script type=&text/javascript& charset=&utf-8& src=&../umeditor.config.js&&&/script&
&!--使用版--&
&!--&script type=&text/javascript& charset=&utf-8& src=&../umeditor.all.js&&&/script&--&
&!--开发版--&
&script type=&text/javascript& charset=&utf-8& src=&editor_api.js&&&/script&
&script type=&text/javascript& src=&../lang/zh-cn/zh-cn.js&&&/script&
4.然后在编辑器的实例化页面中创建编辑器实例及其DOM容器，示例代码如下：
&textarea name=&后台取值的key& id=&myEditor&&这里写你的初始化内容&/textarea&
&script type=&text/javascript&&
var editor = new UE.ui.Editor();
editor.render(&myEditor&);
//1.2.4以后可以使用一下代码实例化编辑器
//UE.getEditor('myEditor')
5.在editor_config.js中查找URL变量配置编辑器在你项目中的路径。
官网示例：
//强烈推荐以这种方式进行绝对路径配置
URL= window.UEDITOR_HOME_URL||&/UETest/ueditor/&;
我的配置：
(function () {
* 编辑器资源文件根路径。它所表示的含义是：以编辑器实例化页面为当前路径，指向编辑器资源文件（即dialog等文件夹）的路径。
* 鉴于很多同学在使用编辑器的时候出现的种种路径问题，此处强烈建议大家使用&相对于网站根目录的相对路径&进行配置。
* &相对于网站根目录的相对路径&也就是以斜杠开头的形如&/myProject/umeditor/&这样的路径。
* 如果站点中有多个不在同一层级的页面需要实例化编辑器，且引用了同一UEditor的时候，此处的URL可能不适用于每个页面的编辑器。
* 因此，UEditor提供了针对不同页面的编辑器可单独配置的根路径，具体来说，在需要实例化编辑器的页面最顶部写上如下代码即可。当然，需要令此处的URL等于对应的配置。
* window.UMEDITOR_HOME_URL = &/xxxx/xxxx/&;
* @author wusuopubupt
* set window.UMEDITOR_HOME_URL = &/ueditor/&;
window.UMEDITOR_HOME_URL = &/ueditor/&;
//注意就是这里！
var URL = window.UMEDITOR_HOME_URL || (function(){
function PathStack() {
6.如果用editor_api.js （也就是不用editor.all.js）开发时,打开editor_api.js,代码如下
* 开发版本的文件导入
(function (){
'editor.js',
'core/browser.js',
'core/utils.js',
'core/EventBase.js',
'core/dtd.js',
'core/domUtils.js',
'core/Range.js',
'core/Selection.js',
'core/Editor.js',
'core/filterword.js',
'core/node.js',
'core/htmlparser.js',
'core/filternode.js',
'plugins/inserthtml.js',
'plugins/image.js',
'plugins/justify.js',
'plugins/font.js',
'plugins/link.js',
'plugins/print.js',
'plugins/paragraph.js',
'plugins/horizontal.js',
'plugins/cleardoc.js',
'plugins/undo.js',
'plugins/paste.js',
'plugins/list.js',
'plugins/source.js',
'plugins/enterkey.js',
'plugins/preview.js',
'plugins/basestyle.js',
'plugins/video.js',
'plugins/selectall.js',
'plugins/removeformat.js',
'plugins/keystrokes.js',
'plugins/dropfile.js',
'ui/widget.js',
'ui/button.js',
'ui/toolbar.js',
'ui/menu.js',
'ui/dropmenu.js',
'ui/splitbutton.js',
'ui/colorsplitbutton.js',
'ui/popup.js',
'ui/scale.js',
'ui/colorpicker.js',
'ui/combobox.js',
'ui/buttoncombobox.js',
'ui/modal.js',
'ui/tooltip.js',
'ui/tab.js',
'ui/separator.js',
'ui/scale.js',
'adapter/adapter.js',
'adapter/button.js',
'adapter/fullscreen.js',
'adapter/dialog.js',
'adapter/popup.js',
'adapter/imagescale.js',
'adapter/autofloat.js',
'adapter/source.js',
'adapter/combobox.js'
* @author wusuopubupt
* modified
baseURL = '/ueditor/src/';
baseURL = '/ueditor/src/';
for (var i=0,pi = paths[i++];) {
document.write('&script type=&text/javascript& src=&'+ baseURL + pi +'&&&/script&');
可以看到，这里有一项：baseURL，就是JS文件的路由，这里要根据ueditor_api.js文件的实际路径去配置！
& 7.文件上传问题：
打开ueditor.config.js，可以看到如下配置：
//图片上传配置区
,imageUrl:URL+&php/imageUp.php&
//图片上传提交地址
//,imagePath:URL + &php/&
//图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
,imagePath:&/&
,imageFieldName:&upfile&
//图片数据的key,若此处修改，需要在后台对应文件修改对应参数
这里的imageURL是图片上传所调用的php文件的地址，而imagePath则是为新上传的图片生成的图片地址的host部分；
再打开ueditor/php/下的imageUp.php文件，有配置如下：
$config = array(
&savePath& =& &/var/www/store/upload/& ,
//存储文件夹
&maxSize& =& 1000 ,
//允许的文件最大尺寸，单位KB
&allowFiles& =& array( &.gif& , &.png& , &.jpg& , &.jpeg& , &.bmp& )
//允许的文件格式
//上传文件目录
//$Path = &upload/&;
$Path = &/var/www/store/upload/&;
& &这里需要把上传文件到服务器的目的地址（上传文件保存文件）savePath修改成你指定的文件地址。
由于相对路径和绝对路径的问题，生成的地址有可能是错的，这时就要hack一下生成图片URL的JS文件：
ueditor/dialogs/image/image.js 中修改：
* @author wusuopubupt
* @return url modified
var reg = /\/var\/www\/test\/upload\//;
url = url.replace(reg,&&);
var $img = $(&&img src='& + editor.options.imagePath + url + &' class='edui-image-pic' /&&),
$item = $(&&div class='edui-image-item edui-image-upload-item'&&div class='edui-image-close'&&/div&&/div&&).append($img);
这里的正则的规则要根据具体情况来定！
至此，Ueditor便在我的环境中配置成功了。
更多详细的文档请参考ueditor官网DOC：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1327228次
积分：12633
积分：12633
排名：第806名
原创：323篇
转载：126篇
评论：364条
(7)(1)(1)(7)(3)(4)(6)(1)(2)(3)(1)(5)(4)(8)(6)(2)(4)(1)(6)(11)(11)(15)(15)(16)(18)(29)(13)(29)(23)(19)(27)(16)(21)(23)(11)(9)(22)(20)(5)(1)(4)(1)(10)(9)}