百度编辑器去掉图片间空隙,图片宽度自适应
编辑器编辑文字、图片常规操作说明
编辑器编辑文字、图片常规操作说明操作总体说明：编辑文字、图片分为以下三大步骤，这些步骤只是多种方式之一，熟悉后可自行选择喜欢的方式进行。
一、确认编辑器内空白无内容二、用无格式粘贴方式粘贴文本内容2.1、无格式粘贴文本2.2、设置文本字体大小2.3、段首行缩进两个汉字三、插入图片2.1、插入图片预备操作2.2、选择并上传图片2.3、写上图片标注并设置字体大小附：其他常用操作介绍1、附件上传。
2、表格粘贴。
3、常用操作技巧。
常规操作图示说明：一、确认编辑器内空白无内容确认编辑器内容空白，有助于减少因隐含格式对文本格式的影响。
熟悉操作后此步并不一定需要。
二、用无格式粘贴方式粘贴文本内容2.1、无格式粘贴文本无格式粘贴文本可分为三个小步骤，具体见下图：无格式粘贴文本后，如下图：2.2、设置文本字体大小无格式粘贴文本后，调整字体大小分三个小步骤，如下图：字体大小调整成功后，如下图：（请务必将光标点到文字中，看看“大小”框内是否会出现具体的数字，如果出现了则说明字体大小调整成功，若无具体数字说明字体大小调整不成功。
）2.3、段首行缩进两个汉字段首行缩进两个汉字分三个小步骤，如下图：段首行缩进两个汉字的效果如下图：三、插入图片2.1、插入图片预备操作插入图片准备分两个小步骤：一、和正文之间空一行；二、设置居中。
具体操作如下图：熟悉以后也可以在插入完图片后再设置居中。
2.2、选择并上传图片上传图片分三个小步骤，如下图：插入图片后，可左键单击图片来选中图片，选中效果如下图：2.3、写上图片标注并设置字体大小在输入图片标注后，设置字体大小分三个步骤，如下图：图片标注字体大小设置成功示例，如下图：（是否成功的判断方法类似于正文字体判断，即将光标至于标注的文字中，如果“大小”框内显示出具体数字，则设置成功，若该框无具体数字，则设置不成功。
）重复步骤2.2和2.3来插入后续图片，但在插入后续图片前，记得在上一张图片的标注后敲回车空一行，如下图。
怎么用好百度编辑器
怎么用好百度编辑器UEditor百度编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码；编辑器功能区，鼠标经过功能按钮上都会有文字描述，可以多图上传、添加视频、添加百度动态地图，每个功能都可以去尝试，这里就不一一介绍了如何用好内容编辑器，关键在于内容的排版：1、内容的流畅性文章正文内容，主要是合理利用加粗标签以及合理段落。
正文核心关键词第一次出现加粗、段落总起的说明文字加粗、内容合理段落，从用户的阅读体验考虑，文章中的关键词合理均匀排布，遇到相关性内容可加内部链接指向相关页面。
2、字体段落前面需要空两格、适当的行距和字距3、采用总-分-总，分段的形式编写内容采用总-分-总的形式来写，文章分段编写，有段落，用户看了条理清晰。
文章编写也可以在分段落同时，每一段落用几个字概括段落大意或是用数字（有序列表）、符号（无序列表）分段，建议采用有序列表，更受搜索引擎亲耐。
4、图文并茂文章可以放置图片，但是图片要相关性，图片大小尽量小，这样打开网页加载的速度会快些。
放置图片的位置可以放在文章开始，也可以放在文章段落中间，图片周围的文字描述可以带上关键字。
5、关键字密度大概在2%到8%之间关键字密度是指关键字在网页中出现的总字数和其他文字的百分比。
不要刻意去增加关键字密度，只要关键字每个页面包含四到五个，客户体验度好就行。
6、用word排版好，再添加到网站图片转存步骤:1.点击顶部复制按钮，将地址复制到剪贴板；2.点击添加照片按钮，在弹出的对话框中使用Ctrl+V粘贴地址；3.点击打开后选择图片上传流程。
利用编辑器自带的功能，同时注意内容排版技巧，让你的网站内容更具吸引力。
免费开源百度编辑器（UEditor）使用方法
免费开源百度编辑器（UEditor）使⽤⽅法UEditor效果图UEditor是⼀个开源免费的编辑器，由百度web前端研发部开发所见即所得富⽂本web编辑器，具有轻量，可定制，注重⽤户体验等特点，开源基于BSD协议，允许⾃由使⽤和修改代码。
官⽹上下载完整源码包，解压到任意⽬录，解压后的源码⽬录结构如下所⽰：_examples：编辑器完整版的⽰例页⾯dialogs：弹出对话框对应的资源和JS⽂件themes：样式图⽚和样式⽂件php/jsp/.net：涉及到服务器端操作的后台⽂件，根据你选择的不同后台版本，这⾥也会不同，这⾥应该是jsp,php,.netthird-party：第三⽅插件(包括代码⾼亮，源码编辑等组件）editor_all.js：_src⽬录下所有⽂件的打包⽂件editor_all_min.js：editor_all.js⽂件的压缩版，建议在正式部署时才采⽤editor_config.js：编辑器的配置⽂件，建议和编辑器实例化页⾯置于同⼀⽬录或者⽹上搜索别⼈配置好的实例，这样⾃⼰就不⽤折腾了。
我⾃⼰弄的，结果折腾了好久，差点想放弃了！我下载的是开发版 [1.2.5.1 .Net 版本] 2013年4⽉27⽇，最新版本。
代码结构图第⼀步：在项⽬的任⼀⽂件夹中建⽴⼀个⽤于存放UEditor相关资源和⽂件的⽬录，此处在项⽬根⽬录下建⽴，起名为ueditor（⾃⼰喜欢）。
第⼆步：拷贝源码包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor⽂夹中。
其中，除了ueditor⽬录之外的其余⽂件均为具体项⽬⽂件，此处所列仅供⽰例。
第三步：为简单起见，此处将以根⽬录下的index.php页⾯作为编辑器的实例化页⾯，⽤来展⽰UEditor的完整版效果。
在index.php⽂件中，⾸先导⼊编辑器需要的三个⼊⼝⽂件，⽰例代码如下：复制代码代码如下:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>编辑器完整版实例</title><script type="text/javascript" src="ueditor/editor_config.js"></script><script type="text/javascript" src="ueditor/editor_all.js"></script>复制代码代码如下:<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')</script>最后⼀步：在/UETest/ueditor/ editor_config.js中查找URL变量配置编辑器在你项⽬中的路复制代码代码如下://强烈推荐以这种⽅式进⾏绝对路径配置（注意：下⾯的UETest是虚拟⽬录名称）URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";1.在引⽤editor_config.js时，最好先于editor_all.js加载，否则特定情况下可能会出现报错。
百度富文本编辑器使用（PHP）
百度富⽂本编辑器使⽤（PHP） // ========================================================================2-2，PHP 具体使⽤<script>//-- 百度富⽂本编辑器 new UE -------------------var ueditor = null;$config = { // 配置serverUrl: '/editor/report.php',// ⼯具栏，⾃⼰选择增删toolbars: [['fullscreen', 'fontsize', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'forecolor', 'link',]],autoHeightEnabled: false,};//--------------------------------------------// 2-1-1, 获取vue上的数据放到编辑中 ===========================//-- 百度富⽂本【新增】 -----------------ueditor = UE.getEditor('txtDesc', $config);//-----------------------------------------// 2-1-2, 将编辑器中数据ueditor.getContent()重新赋值到vue中 ========//-- 百度编辑器获取⽂本框输⼊的值 --------this.childReport.sDesc = ueditor.getContent();//----------------------------------------</script>// php 提供 action=config的接⼝$action = $_aRequest['action'] ? trim($_aRequest['action']) : '';if ($action == 'config') {exit('{/* 上传图⽚配置项 */"imageActionName": "uploadimage", /* 执⾏上传图⽚的action名称 */"imageFieldName": "upfile", /* 提交的图⽚表单名称 */"imageMaxSize": 5242880, /* 上传⼤⼩限制，单位B */"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图⽚格式显⽰ */"imageCompressEnable": true, /* 是否压缩图⽚,默认是true */"imageCompressBorder":1600,"imageInsertAlign":"none","imageUrlPrefix":"", /* 图⽚访问路径前缀 *//* 上传视频配置 */"videoActionName": "uploadvideo", /* 执⾏上传视频的action名称 */"videoFieldName": "upfile", /* 提交的视频表单名称 */"videoUrlPrefix": "", /* 视频访问路径前缀 */"videoMaxSize": 102400000, /* 上传⼤⼩限制，单位B，默认100MB *//* 上传视频格式显⽰ */"videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],}');}。
用照片编辑器处理图片
7.打开编辑菜单，单击贴为新图像命令，窗口中出现一排小鸭。在工具栏里点 击图片另存为。
五、变化图片旳大小和属性。
1.打开图片“黄花”。
2.打开图像菜单，单击其中旳调整尺寸命令，打开“调整尺寸”对话框。
3.合适调整“宽度”和“高度”旳数值后拟定，观察图片大小旳变化。如图 一 4.打开文件菜单，单击其中旳属性命令，打开“属性”对话框。
1.照片编辑器窗口中打开 一幅图片，并另存为一种 新文件。如下图：
2.单击工具栏中旳 按钮，打 开“平衡”对话框。
3.拖动三种值旳滑块，合适变化 图片旳系数，观察图片旳变化。 效果满意时点击拟定关闭对话框。
四、剪贴图片。
制作下图所示旳一排小鸭
1.在照片编辑器窗口中，打开名为“鸭子”旳图片文件。 2.单击工具栏里旳 按钮，选择选定工具，然后在画面上 拖动指针，选择要复制旳小鸭图形。
1.单击窗口工具栏里旳 按钮，出现“打开”对话框。
2.单击“查找范围”框中旳 按钮，在打开旳下拉列表框中选择相应文 件夹里旳cake.bmp文件，就能够在照片编辑器窗口中打开。
单 击
双 击
3.打开文件菜单，单击其中旳另存为。将文件另存，并将文件保存类型 选定为（*.tif）
三、调整图片旳亮度、对比度和灰度
为图片添加“浮雕”效 果
1.打开图片 效果菜单
浮雕命令 （如图）
2.拖动“浮雕刻度”滑块，调整画面变化旳程度。单击“光线位置”选择框， 打开下拉列表，选定光源旳位置。
3.单击
按钮，就能够看到处理后旳效果。
4.打开文件菜单，单击其中旳另存为命令，以一种新文件名保存文件。
1.调整图片旳亮度、对比度和灰度
5.单击“类型”框中旳 按钮，打开下拉列表框，选定“灰度（8位）”选 项后单击拟定，观察图片属性旳变化。 如图二
百度编辑器(UEditor)上传图片
上传图片配置文件：
一开始我上传图片的时候失败，网上有人说需要把net文件夹下的wen.config给删除掉。
修改配置文件后需要到imageUp.ashx页面做如下处理
把箭头指的这段头引用文件给删除掉。
图片就可以上传成功了
效果如下：
到此为止图片上传就搞定了。
附件上传：
附件上传这块需要到配置文件editor_config.js里面做如下处理
然后把net文件夹下面的web.config文件里面的
把这一句加到你项目的跟目录下的web.config
然后这块需要注意的是fileUp.ashx这个页面有设置上次文件大小限制的参数可以根绝自己的实际需求更改。
如果没有上面的操作上传附件的时候很有可能失败！失败情况可能是：
，成功的效果是这样的：
希望能给大家带来方便。
百度UEditor编辑器!合入PHP网站!
一、富文本内容交互1、编辑器内容初始化（即往编辑器中设置富文本）场景一：写新文章，编辑器中预置提示、问候等内容。
在editor_config.js文件中找到initialContent参数，设置其值为需要的提示或者问候语即可，如initialContent:’欢迎使用UEditor!’。
场景二：编辑旧文章，从数据库中取出富文本放置到编辑器中。
显然，编辑文章时需要从后台数据库中取出大段富文本，如果仍然采用场景一中的方式去设置初始值的话，必然会带来诸如引号匹配被截断等问题，因此需要采用另外一种方式去设置，此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。
2、提交编辑器内容至后端场景一：在编辑器所在的Form中存在提交按钮，提交动作由点击此按钮完成。
该场景适用于最普通的场合，没有太大问题需要注意，仅三点说明：1) 默认情况下提交到后台的表单名称是“editorValue”，在editor_config.js中可以配置，参数名为textarea。
2) 可以在容器标签（即script标签）上设置name属性，以覆盖editor_config.js中的场景二：编辑器所在的Form中不存在提交按钮，提交动作由外部事件触发。
该场景适用于站点前端交互较多的场合，需要注意的事项主要是在触发form提交动作之前如果使用的是jquery validation可以参考如下代码此处editor是编辑器实例对象。
场景三：编辑器不在任何Form中，提交动作由外部事件触发。
该场景使用不多，但特殊时候可能需要。
UEditor也提供了对应的处理方案，基本逻辑跟场景二一样，只是在执行同步操作的时候需要传入提交form的id，如editor.sync(myFormID)即可。
其他同场景二。
二、图片上传交互1、传统图片上传传统图片上传涉及到的前后端交互主要涉及“上传提交路径”以及“图片保存路径”两个参数，后台保存路径以任何形式（绝对或者相对）、在任何页面展示跟前台无关。
15款优秀在线图片编辑器
在线图片编辑器自然比不上PS这样的强大图片处理软件，但是有时一些优秀的在线编辑器却能给我们带来很大的便利，完成一些桌面程序未必能快速完成的工作。
1. CloudCanvasCloudCanvas，一款基于HTML5在线图像编辑软件。
该款图片制作软件同时支持矢量图和位图。
2.PicnikPicnik 一款在线图片编辑工具，其功能相当强大。
Picnik基于Flash 技术架构，最明显特点的就是界面相当漂亮。
3．图丫丫图丫丫，让专业美工感受到失业危机的免费图像处理软件，界面很卡通简洁。
4．PixlrPixlr 是基于flash技术架构的在线Web图片编辑软件。
Pixlr整体风格精美，界面设计简洁，给人的感觉很友好。
5．SumopaintSumopaint是一款界面和功能强大酷似photoshop的在线图像编辑软件，用过PS 的人能够很容易的操作Sumopaint。
6．Sketchpadsketchpad ，一个在线画板，基于最新HTML5技术架构，拥有类似Windows 画笔的功能。
7．splashup一个在线图像编辑工具splashup，和桌面版的PhotoShop很相似。
这款在线软件提供的功能很专业，非常强大，支持图层，以及图层叠加模式，实现多图层的编辑，滤镜等等很多功能。
8．BefunkyBefunky是一个将照片卡通化的在线图片处理工具。
9．lunapiclunapic强大的在线图片编辑软件，包含了大多数类似PS的功能，例如调整、编辑、滤镜等功能，同时加入了一些直接生成的效果，例如照片分拆、卡通效果。
10．Pixlr ExpressPixlr Express，Pixlr旗下的，主要功能就是在线改变图片大小、裁剪图片、旋转图片。
11．deviantART murodeviantART muro，DeviantArt网站推出的基于HTML5技术的绘图程序。
12．Phoenix Image EditorPhoenix Image Editor包含了矢量编辑和过滤器在线图片编辑工具，提供像图层，调配和魔术棒等等功能，用户不需要注册就可以使用该在线软件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
增加一个普通按钮（上）
让百度编辑器上传的图片无空行（空隙），在手机端展示的图片之间无空隙下面就让我们从最简单的功能开始UEditor的二次开发之旅：在工具栏上增加一个按钮，点击按钮的时候把编辑器中的所有图片设置为左浮动，宽度设为100%。
第一步：找到ueditor.config.js文件中的toolbars参数，增加一个“fixedpic”字符串，对应着添
例如：下图为自定义了一个fixedpic的按钮
第二步：找到ui/editorui.js文件中的btnCmds数组，在其中同样增加一个“fixedpic”字符串。
例如：1.4.3版的在ueditor.all.js中添加
第三步：清空缓存刷新下页面吧！工具栏的对应位置是否出现了一个自己定义的按钮呢？如下图所示：
由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。
要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。
第四步：找到themes/default/css/ueditor.css文件，增加一条样式定义:
完成后刷新浏览器，可以看到此时图标已经显示为如下图所示：
此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。
如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。
第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。
那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。
实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。
下面我们就来定义该方法的具体内容：
效果如下：
再次刷新页面点击一下按钮吧！点击按钮前
点击后，图片间的空隙没了，且图片的宽度100%，去掉了高，这样图片就能在手机端自适应宽度和高度了！
源码
很简单，自己试试吧！
本例子参考官网的/website/document.html文档制作
本例子使用的jar包，请到官网
/website/download.html
ueditor1_4_3-utf8-jsp.zip。