UEditor百度编辑器1.1.6 新增tab按键缩进_源码_站长之家
UEditor百度编辑器1.1.6 新增tab按键缩进
[摘要]百度编辑器Ueditor是由百度web前端研发部开发的所见即所得富文本web编辑器，本文介绍百度编辑器Ueditor v1.1.6发布的新功能等。
　　百度编辑器Ueditor从发布1.0版以来，每次新版发布，都会有一定的新功能增加。百度编辑器Ueditor1.1.6的更新，主要还是新增功能，虽然不多，但都是比较实用的，如tab按键缩进、支持粘贴excel的表格等。　　百度编辑器Ueditor从出道以来，从当初1.0版本被笔者批得一文不值（详情：），到如今功能改进，速度增快，体积减小，官网演示和文档的完善等。百度编辑器Ueditor是越做越好，风声水起。 　　　1、百度编辑器Ueditor1.1.6功能优化中有tangram日历控件插入日期，是比较方便的一个功能。　　2、新增的功能包括tab按键支持缩进功能、支持粘贴excel的表格、editor-config.js中可配置默认字体，字号。tab缩进是很多编辑者包括笔者在内都经常使用的功能。同时，百度编辑器Ueditor1.1.6现在支持修改编辑器中显示的默认字体和字号了，不用再“宋体”脸色了，如下图。百度编辑器Ueditor1.1.6更新说明：新增功能tab按键支持缩进功能 支持多级列表 支持粘贴excel的表格（chrome不支持） editor-config.js中可配置默认字体，字号功能优化引入tangram日历控件插入日期 table可再编辑 超链接可去除下划线 bug修复修复ff下最大化和切换源码光标不能随着键盘改变的问题
软件大小：2.77MB 软件类别：国产软件 |
软件语言：简体中文 运行环境：PHP 软件授权：开源软件 更新时间： 14:10:55 相关链接：
IBOS2.0预计将在2013年11月正式推出全新版本，即将推出的IBOS2.0重新构架系统核心，增加了IOS、Android手机...
热门源码下载推荐
最受关注报导
编辑推荐排行常用软件下载UEditor - 帮助
常见问题解答
1：表情设置了本地化之后，插入的表情只显示了一个叉叉，怎么办？
答：首先请确保dialogs/emotion/目录下存在images文件夹及其下属的所有表情文件。如果检查后确实存在对应的表情文件，那可以在编辑器中点击未显示的表情图标，在弹出的浮层中点击“修改”，然后查看地址栏中的表情地址是否指向对应的目录。如果没有，请修改editor_config.js配置文件中的URL参数。
2：上传的图片在编辑器中显示不出来，怎么办？
答：一般上来说，这是由于图片路径配置错误引起的。图片路径的配置需要和后端处理程序结合来确定。假设后端返回的路径是“uploadfiles/.jpg”，那么前端editor_config.js文件中的配置项imagePath需要配置的信息是从根目录一直到uploadfiles的上级目录为止。
3：图片上传成功之后，在编辑器中能显示出来，但是保存到数据库后在项目的另外一个页面却不能正确显示，怎么办？
答：出现这种情况一般是由于图片采用相对路径方式保存而造成的。建议保存到数据库中的地址数据采用相对网站根目录（即以"/"开头）的相对路径保存，从而在保证可移植的同时避免各种路径问题。
4：代码高亮功能在编辑器中能够正确显示，可是在展示页面却没有高亮效果，为什么？
答：UEditor的代码高亮功能需要对应的CSS样式支持。在编辑框内，UEditor默认已经加载了对应的样式，但是当用户将提交保存后的代码展示在其他页面的时候，失去对应样式支持的代码高亮肯定是没有效果的。解决的方法是在需要展示代码高亮的页面引用UEditor资源文件夹third-party目录下的对应CSS文件和JS文件。具体来说，就是引用shCoreDefault.css文件和shCore.js文件,然后在页面中执行SyntaxHighlighter.all()即可。
5：IE6下初始化编辑器的时候报错，并提示“已终止操作”怎么办？
答：一般来说这种错误的出现是由于编辑器所在页面dom结构没有加载完成就实例化编辑器造成的，将实例化代码置于&/body&标签之前可以解决大部分这种错误。如果仍然不能解决可以尝试以下两种方法。代码示例如下：
&script type="text/plain" id="myEditor" class="myEditor"&
编辑器初始化内容
第一种方法：
&script type="text/javascript"&
var editor = new baidu.editor.ui.Editor({textarea:'myValue'});
setTimeout(function(){
editor.render("myEditor");
第二种方法(引用JQuery)：
$(document).ready(function(){
var editor = new baidu.editor.ui.Editor();
editor.render('myEditor');
6：大部分编辑器的容器都使用textarea，为什么UEditor采用了很特殊的script标签？
答：首先要说明一点的是，UEditor也支持textarea标签作为编辑器的外围容器，只要将对应的标签名字换成textarea即可。除此之外，UEditor还支持使用div和script标签作为其容器。之所以要这样做，只是为了尽最大可能去满足和适应用户的各种不同需求。官方推荐使用script标签的原因是textarea会在提交数据的时候自动对里面的部分html文本进行一次特殊字符转义，从而导致有些不熟悉的用户在再编辑的时候出现编码混乱的问题。而使用script标签可以很好地克服这个缺点。
7：如何禁用编辑器提供的右键菜单？
答：UEditor提供了自适应选区内容的右键菜单，建议用户不要禁用。如果非要禁用的话，可以在编辑器初始化的时候传入参数contextMenu:[]即可。
8：IE6下切换源码的时候明显感觉到延迟现象，怎么回事？
答：UEditor集成了codemirror第三方插件用来实现源码高亮模式，因此在切换的时候需要做很多的特殊处理从而导致了速度变慢。没有源码高亮需求的同学可以在配置项中设置sourceEditor:"textarea"来关闭这个效果。
9：图片上传的页面或者图片转存页面上的上传flash渲染不出来怎么办？
答：这种情况的出现一般是因为没有将编辑器相关文件部署到服务器，而是直接在本地打开demo页面造成的，具体原因是受到了flash安全机制的限制。请同学们在测试代码，尤其是图片上传等需要和后端交互的模块时，请务必将编辑器部署到服务器中运行。
10：从数据库中获取数据，然后通过initialContent参数或者script、textarea等标签设置到编辑器之后，出现语法错误提示或者显示内容不完整，怎么办？
答：出现这个问题的原因一般是初始化的内容中存在特殊的标签或者符号导致的。举例来说，如果通过设置initialContent的方式来初始化的话，那么其值中出现的所有内容必须对引号（' 或 "）进行转码，否则具体内容会和系统定义的单引号冲突，造成内容被截断，或者直接报错。如果用textarea标签或者script标签来初始化的话，那必须确保内容中不能出现script或者textarea标签，否则也会出现内容被截断的现象。
11：点击图片上传按钮之后，进度条到达60%左右，然后显示一个红叉，没有任何提示，怎么办？
答：UEditor的Flash上传在用户提示方面目前确实还有不完善的地方，我们正在不断改进。造成上述问题的原因主要有以下几个方面，同学们可以对照着调试：第一，后台程序出现运行错误，直接被中断，没有返回任何信息；第二，后台程序返回了错误的信息，所有非"SUCCESS"的state参数都将直接返回对应的提示，并显示红叉。第三，网络异常，编辑器没有收到后台程序返回的正确信息。排除了上述三方面的问题之后，如果还有问题，欢迎到群里或者邮件里向UEditor小组提出，不胜感激！
12：我插入的script,style等标签被过滤掉了,怎么办？
答：在editor_config.js里边搜索blackList,去掉里边相关的标签名，就不会被过滤掉了。
13：插入分页功能怎么用，预览时为啥只能看到一个“_baidu_page_break_”？
答：工具栏上的插入分页，会对html代码进行切分和补全操作，例如
&ul&&li&sdsddsf&/li&在这里插入分页&li&sdsddsf&/li&&/ul&
那么插入分页后
&ul&&li&sdsddsf&/li&&/ul&
&ul&&li&sdsddsf&/li&&/ul&
后台会接收到以上的代码，这个时候再用分页符标识切分html代码，展示的时候就不会出现展示补全，或者怪异的展示效果的问题。
注意：预览时是没有效果的
14：为什么我安装截图插件的时候会报错，提示“无法注册dll/ocx，regsvr32失败，退出代码0x3”？
答：这是由于安装环境缺少相应的库文件，请安装vs2008 sp1。
15：为什么我插入的代码没有代码高亮？
答：1.你的项目里要有我们下载包里的third-party/SyntaxHighlighter/下的2个文件，一个是css,一个js
2.editor_config.js里边有两个属性，用来让编辑器找到你的这两个文件，并在编辑器初始化时加载这两个文件。 highlightJsUrl，highlightCssUrl
3.editor_all.js里要包含高亮的插件代码，如果你用是我们提供的editor_all.js那就不用管这步，如果是你自己选的功能合成的js，那就要有plugins/highlight.js
4.上边的操作就可以在编辑器里实现代码高亮了，如果你想在展示时加上代码高亮，可以参考_examples/highlightDemo.html里边的代码
16：图片、附件上传需要涉及到的配置有哪些？为什么我每次上传都显示一个红叉？
答：1.请首先阅读文档中的图片上传部分！！！
2.图片上传需要前后端的协作：A.在前端，UEditor提取了几个常用的配置到editor_config.js中， 如imagePath，compressSide，maxImageSideLength具体代表的含义请参考对应注释。当然，更多的配置还需要在image.html文件中完成，比如提交地址url等，具体含义同样请参考对应位置的注释。B、在后端，需要配置文件的保存路径uploadPath，保存完成之后需要返回一个包含图片地址的json字符串给前端。C、返回的json字符串必须符合如下格式{'url':'图片地址','state':'SUCCESS','title':'图片title'}。其中state的值依据实际情况返回，只有当图片真正保存成功时才是“SUCCESS”.
3.完成了上述的配置之后，如果图片提示没有上传成功，则需要分以下几个步骤检查：A、确定图片是否已经正确保存到指定的目录。如果已经保存，则检查返回的json数据格式和内容，否则请检查图片保存路径是否正确、文件夹是否具有写入权限等。B、检查返回数据格式的方法：在image.html文件中的uploadCompleteCallback回调中设置一个断点，跟踪返回值是否如预期。
17：在编辑器中上传（图片，附件，截图，word图片转存）与传统上传的差异？
1、传统的上传文件需要两个配置，一个是前端form中的action地址，另外一个是服务器端保存地址。
2、在UEditor中，上述两个配置肯定不可缺少：前者在image.html中的flash创建参数中配置，后者在php文件中配置。
3、和传统上传不一样的是，UEditor不仅需要上传文件，还需要将其插入至编辑器中，因此必须实时得到服务器的返回地址，而这个地址的具体值是由后端程序决定的，相对还是绝对，得看具体情况。如果是相对路径（最好预先过滤掉“../”,“./”之类的字符，否则在前端会出现严重问题），那么由于后端的相对路径跟前端显示相对路径可能不一样，因此在显示页面必须手动修正，这个修正由config中的imagePath 来配置；如果是绝对路径，那么前端就无需再进行处理，imagePath置空即可。
4、如果需要更深层次的对服务器端返回的数据进行控制，那么就需要修改回调函数。标题中所列的四种涉及文件上传的模块均有对应的回调函数，具体来讲，图片的回调在image.html中，附件在attachment.html文件中，word转存在wordimage.html文件中，截图在snapscreen.js文件中，同学们可照此分别修改。
18：如何配置附件上传？
1、鉴于市场占有率，UEditor的附件上传采用了广为流传的第三方开源项目swfupload，具体的配置和用法请参考
2、上传后插入到编辑器中的附件有对应的图标，UEditor提供了"/dialogs/attachment/fileTypeMaps.js"文件用来配置文件类型与对应的图标，同学们可根据需要自行删改。PS：在此之前，请确保fileTypeImages文件夹中存在对应的图标！
19：UEditor提供的图片在线管理是指什么？需要注意哪些问题？
1、图片在线管理虽名为管理，但考虑到安全因素，目前版本的UEditor并未提供删除功能，仅仅实现了在线图片浏览并插入至编辑器的功能。
2、由于无法获取数据库相关信息，UEditor的图片浏览采用了遍历文件夹的方式来实现。同学们需要在imageManager.php文件中配置存放图片文件的文件夹路径，并最终返回如imageManager.php中所示的json数据即可。
3、获取服务器图片的请求通过ajax来发送，需要在editor_config.js中配置imageManagerPath参数来指定imageManager.php文件的路径。如果同学们有额外的参数需要向后台发送，比如想实现删除功能，可以修改dialog文件夹下的image.js文件中关于imageManager模块的代码。
4、建议后台配置的图片存放路径尽量指向缩略图存放文件夹，并在返回数据中同时返回缩略图地址和真实地址，否则在浏览时可能造成不必要的带宽和性能消耗！
20：远程图片抓取为什么有的时候能成功，有的时候不能成功？
1、图片远程抓取的原理是通过捕获粘贴时的远程图片地址，并将其提交到服务器，再由服务器从远程机器将图片抓取到本地服务器
2、不成功的原因可能是远程图片服务器做了防盗链处理或者远程图片不存在。
21：当在实例化编辑器页的页面手动设置了document.domain时，编辑器提示跨域并创建不成功怎么办？
为了数据获取的需要，有时候我们需要在页面上手动更改domain，此时必须开启编辑器的配置项customDomain为true，并同时在dialogs/internal.js的头部增加document.domain配置即可。
22：.net版本图片上传报网络错误怎么办？
1.如果你的.net framework版本小于4.0，请删掉/net/web.config，然后使用vs2008或者vs2005自带的web.config
2.如果你的版本等于4.0，请检查editor_config.js中的URL变量配置(注意：一定要用绝对路径)
23：UEditor的图片上传能支持动态绑定参数么？
从1.2.4最新版本开始，UEditor的图片上传开始支持参数动态绑定功能，也即可以在选择文件之后修改本次或者指定图片的上传参数，广泛用于添加水印，目录选择等场合。
1)、打开dialogs/image/image.html文件，在页面最后找到$G("upload").onclick事件函数。
2)、修改postParams对象中的内容，其中每个key值对应着一个自定义的post参数。注意：系统保留action参数作为提交地址参数，其余随意。
单张上传(非特殊用户请自行忽略下面信息，否则自负后果哦^-^)
1)、修改postParams对象针对的是本次提交的所有图片，特殊情况下可能需要对具体某张图片进行设置，如“给第五张图片添加水印效果”等case。
2)、image.html页面中存在一个postConfig的全局对象用于存储单张图片的post上传信息。其格式如下所示：
postConfig = [
{"id":0,"data":{"dir":"1","custom":"value"}},//序号为0的图片包含dir和custom两个动态自定义参数
{"id":1,"data":{"dir":"2"}}
//序号为1的图片包含dir一个动态自定义参数
3)、在页面任何位置(需在upload之前,可参考image.html中的示例)，都可以通过绑定事件并调用imageUploader.setPostParams(obj,index)接口来操作这个参数以达到为指定图片增加指定参数的目的。具体的调用方法为：
//为第五张（索引为4）图片添加一个dir和一个action参数，用于指定将第五张图片保存到upload1目录，
//且处理的地址是"/project/upload/up.php"
//PS:image.html页面中的示例没有传入index参数，在没有传入index参数的情况下，将会对所有图片执行相同的设置
imageUploader.setPostParams({
"dir":"2",
"action":"/project/upload/up.php"
编辑器讨论群
⑧群: (满)
③群: (满)最近在研究UEditor的使用，下面是附上传送门：
这是API文档
这是下载地址
这是java后台配置JSP的使用说明
在线文档对UEditor说明不够全面，收集了一些常用的方法和基本设置，以供参考。
1、创建编辑器
UE.getEditor(‘editor’, {
initialFrameWidth:”100%” //初始化选项
UE.getEditor(‘editor’)
2、删除编辑器
UE.getEditor(‘editor’).destroy();
3、设置焦点
UE.getEditor(‘editor’).focus();
4、获取编辑器内容
UE.getEditor(‘editor’).getContent()
5、编辑器是否有内容
UE.getEditor(‘editor’).hasContents()
6、获取编辑器内容纯文本格式
UE.getEditor(‘editor’).getContentTxt()
7、获取带格式的纯文本
UE.getEditor(‘editor’).getPlainTxt()
8、启用编辑器
UE.getEditor(‘editor’).setEnabled();
9、禁止编辑
UE.getEditor(‘editor’).setDisabled(‘fullscreen’);
10、获取整个html内容
UE.getEditor(‘editor’).getAllHtml()
11、常用设置
imageUrl:UEDITOR_HOME_URL + “../yunserver/yunImageUp.php”, //图片上传接口
imagePath:”http://”,
scrawlUrl:UEDITOR_HOME_URL + “../yunserver/yunScrawlUp.php”,//涂鸦接口
scrawlPath:”http://”,
fileUrl:UEDITOR_HOME_URL + “../yunserver/yunFileUp.php”,//文件上传接口
filePath:”http://”,
catcherUrl:UEDITOR_HOME_URL + “php/getRemoteImage.php”,//获取远程图片接口
catcherPath:UEDITOR_HOME_URL + “php/”,
imageManagerUrl:UEDITOR_HOME_URL + “../yunserver/yunImgManage.php”,//图片管理接口
imageManagerPath:”http://”,
snapscreenHost:’’,
snapscreenServerUrl:UEDITOR_HOME_URL + “../yunserver/yunSnapImgUp.php”,//截图接口
snapscreenPath:”http://”,
wordImageUrl:UEDITOR_HOME_URL + “../yunserver/yunImageUp.php”,//word图片转存接口
wordImagePath:”http://”, //
getMovieUrl:UEDITOR_HOME_URL + “../yunserver/getMovie.php”,//获取视频接口
lang:/^zh/.test(navigator.language || navigator.browserLanguage || navigator.userLanguage) ? ‘zh-cn’ : ‘en’,
langPath:UEDITOR_HOME_URL + “lang/”,
webAppKey:”9HrmGf2ul4mlyK8ktO2Ziayd”,
initialFrameWidth:860, //初始化宽度
initialFrameHeight:420, //初始化高度
focus:true //是否焦点
【正在看本人博客的这位童鞋，我看你气度不凡，谈吐间隐隐有王者之气，日后必有一番作为！下面有个“顶”字，你就顺手把它点了吧（要先登录CSDN账号哦 ）】
—–乐于分享，共同进步！
—–更多文章请看：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
本人的博客写的入门性的比较基本的东西，但隔行如隔山，入门实际上是最难的，一旦你入门了，再深入学习提高就简单了。遇到什么问题、想实现个什么功能，只需要搜索一下，百分之九十几的都能解决。所以我写博客的初衷就是将入门做细做精，做到甚至是不会电脑的人也能一看就懂。服务于只学了理论知识没有实战经验的或者已经懂一或两门语言，还想了解其它语言的人群。
访问：110162次
积分：2962
积分：2962
排名：第9585名
原创：172篇
评论：83条