怎么用好百度编辑器
百度编辑器ueditor的toolbars的各个元素代表的功能说明
fullscreen 功能解释:全屏source 功能:html源码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 功能:为选择文件【单个图片上传】scrawl 功能:涂鸦insertvideo 功能:视频music 功能:音乐attachment 功能:附件map 功能:百度地图gmap 功能:谷歌地图insertframe 功能:插入iframeinsertcode 功能:代码语言webapp 功能:百度应用pagebreak 功能:分页template 功能:模板background 功能:背景horizontal 功能:分隔线date 功能:日期time 功能:时间spechars 功能:特殊字符snapscreen 功能:截图wordimage 功能:图片转存inserttable 功能:插入表格deletetable 功能:删除表格insertparagraphbeforetable 功能:表格前插入行insertcol 功能:前插入列deletecol 功能:删除列mergecells 功能:合并多个单元格mergeright 功能:右合并单元格mergedown 功能:下合并单元格splittocells 功能:完全拆分单元格splittorows 功能:拆分成行splittocols 功能:拆分成列charts 功能:图表,print 功能:打印preview 功能:预览searchreplace 功能:查询替换help 功能:帮助drafts 功能:从草稿箱加载。
百度编辑器去掉图片间空隙,图片宽度自适应
增加一个普通按钮(上)让百度编辑器上传的图片无空行(空隙),在手机端展示的图片之间无空隙下面就让我们从最简单的功能开始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.htmlueditor1_4_3-utf8-jsp.zip。
FCKeditor使用方法详解
FCKeditor使用方法技术详解作者:深蓝色QQ:76863715本文PHPChina论坛首发本文特为《PHP5和MySQL5 Web开发技术详解》一书编写1、概述FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。
具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。
它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。
本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。
FCKeditor官方网站:/FCKeditor Wiki:/2、下载FCKeditor登录FCKeditor官方站(),点击网站右上角“Download”链接。
笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。
如图1所示:图1:下载FCKeditor 2.4.3(最新稳定版)注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到网站上自动下载。
如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。
3、安装FCKeditor解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。
目录结构如下图所示:图2:网站目录结构图fckeditor目录包含FCKeditor2.4.3程序文件。
check.php用于处理表单数据。
add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。
3.1、用PHP调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件。
ueditor百度编辑器的赋值方法
ueditor百度编辑器的赋值⽅法⽰例: /website/onlinedemo.html引⽤代码: window.UMEDITOR_HOME_URL = $CONFIG['domain'] + "/res/local/js/ueditor/"; //注意就是这⾥!window.UEDITOR_CONFIG.imageUrl = $CONFIG['domain'] + '/goodspic?type=2';window.UEDITOR_CONFIG.savePath= ['upload'];window.UEDITOR_CONFIG.imagePath = $CONFIG['domain'] + '/res/local/uploads/';UE.getEditor('addArea')UE.getEditor('areaBottom')⽰例代码var domUtils = UE.dom.domUtils;var ServerUrl = '/server/ueditor/';var options = {//图⽚上传配置区serverUrl:ServerUrl+"controller.php",imageUrl:ServerUrl+"imageUp.php" //图⽚上传提交地址,imagePath:ServerUrl //图⽚修正地址,引⽤了fixedImagePath,如有特殊需求,可⾃⾏配置//涂鸦图⽚配置区,scrawlUrl:ServerUrl+"scrawlUp.php" //涂鸦上传地址,scrawlPath:ServerUrl+"" //图⽚修正地址,同imagePath//附件上传配置区,fileUrl:ServerUrl+"fileUp.php" //附件上传提交地址,filePath:ServerUrl //附件修正地址,同imagePath,catchRemoteImageEnable: false// ,catcherUrl:ServerUrl +"getRemoteImage.php" //处理远程图⽚抓取的地址// ,catcherPath:ServerUrl //图⽚修正地址,同imagePath,imageManagerUrl:ServerUrl + "imageManager.php" //图⽚在线管理的处理地址,imageManagerPath:ServerUrl //图⽚修正地址,同imagePath,snapscreenHost: location.hostname //屏幕截图的server端⽂件所在的⽹站地址或者ip,请不要加http://,snapscreenServerUrl: ServerUrl +"imageUp.php" //屏幕截图的server端保存程序,UEditor的范例代码为“ServerUrl +"server/upload/snapImgUp.php"” ,snapscreenPath: ServerUrl,snapscreenServerPort: location.port //屏幕截图的server端端⼝,wordImageUrl:ServerUrl + "imageUp.php" //word转存提交地址,wordImagePath:ServerUrl //,getMovieUrl:ServerUrl+"getMovie.php" //视频数据获取地址,videoUrl:ServerUrl+"fileUp.php" //附件上传提交地址,videoPath:ServerUrl, //附件修正地址,同imagePathlang:/^zh/.test(nguage || navigator.browserLanguage || erLanguage) ? 'zh-cn' : 'en',langPath:UEDITOR_HOME_URL + "lang/",disabledTableInTable: false,webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",initialFrameWidth:860,initialFrameHeight:400,focus:true,shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]};function setLanguage(obj) {var value = obj.value,opt = {lang:value};UE.utils.extend(opt, options, true);UE.delEditor("editor");//清空语⾔if (!UE._bak_I18N) {UE._bak_I18N = UE.I18N;}UE.I18N = {};UE.I18N[ng] = UE._bak_I18N[ ng ];UE.getEditor('editor', opt);}function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插⼊html代码', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor', {initialFrameWidth:"100%"})}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使⽤editor.getContent()⽅法可以获得编辑器的内容");arr.push("内容为:");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使⽤editor.getPlainTxt()⽅法可以获得编辑器的带格式的纯⽂本内容");arr.push("内容为:");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使⽤editor.setContent('欢迎使⽤ueditor')⽅法可以设置编辑器的内容");UE.getEditor('editor').setContent('欢迎使⽤ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//当你点击按钮时编辑区域已经失去了焦点,如果直接⽤getText将不会得到内容,所以要在选回来,然后取得内容 var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使⽤editor.getContentTxt()⽅法可以获得编辑器的纯⽂本内容");arr.push("编辑器的纯⽂本内容为:");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使⽤editor.hasContents()⽅法判断编辑器⾥是否有内容");arr.push("判断结果为:");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}function enableBtn() {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button"); for (var i = 0, btn; btn = btns[i++];) {domUtils.removeAttributes(btn, ["disabled"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" )); }function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")}window.onkeydown = function (e){if (!ue.isFocus()) {var keyCode = e.keyCode || e.which;if (keyCode == 8) {e.preventDefault();}}};。
百度编辑器(UEditor)上传图片
上传图片配置文件:
一开始我上传图片的时候失败,网上有人说需要把net文件夹下的wen.config给删除掉。
修改配置文件后需要到imageUp.ashx页面做如下处理
把箭头指的这段头引用文件给删除掉。
图片就可以上传成功了
效果如下:
到此为止图片上传就搞定了。
附件上传:
附件上传这块需要到配置文件editor_config.js里面做如下处理
然后把net文件夹下面的web.config文件里面的
把这一句加到你项目的跟目录下的web.config
然后这块需要注意的是fileUp.ashx这个页面有设置上次文件大小限制的参数可以根绝自己的实际需求更改。
如果没有上面的操作上传附件的时候很有可能失败!失败情况可能是:
,成功的效果是这样的:
希望能给大家带来方便。
跟我学百度UEditor在线文本编辑器及应用实例——在J2EE Web应用系统中如何配置UEditor在线文本编辑器
1.1跟我学百度UEditor在线文本编辑器及应用实例——在J2EE Web应用系统中如何配置UEditor在线文本编辑器1.1.1UEditor在线文本编辑器的浏览器前端配置相关的属性选项1、修改UEditor在线文本编辑器配置的两种方式(1)第一种方法是通过重新定义ueditor.config.js配置文件中的如下的属性选项window.UEDITOR_HOME_URL的值在引用editor_config.js文件之前,在JavaScript程序代码中需要重新设置ueditor.config.js 配置文件中的window.UEDITOR_HOME_URL变量的值为“编辑器资源文件根路径”,如下为代码示例:<script type="text/javascript">window.UEDITOR_HOME_URL = "./baiduUEditor/";</script>一般都采用网站根目录的相对路径,也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
(2)第二种方法是在对UEditor在线文本编辑器进行对象实例化的时传入相关的属性选项的配置参数,如下为代码示例:var ue = UE.getEditor('ueditorTextAreaID', {toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold']],autoHeightEnabled: true,autoFloatEnabled: true});2、在引用UEditor在线文本编辑器的页面中重新定义window.UEDITOR_HOME_URL (1)采用相对目录路径的示例<script type="text/javascript">window.UEDITOR_HOME_URL = "./baiduUEditor/";</script><script type="text/javascript" src="./baiduUEditor/ueditor.config.js"></script><script type="text/javascript" src="./baiduUEditor/ueditor.all.min.js"></script><script type="text/javascript" charset="utf-8"src="./baiduUEditor/lang/zh-cn/zh-cn.js"></script> 注意UEDITOR_HOME_URL、config、all这三个顺序不能改变。
百度编辑器Ueditor增加字体的修改方法
百度编辑器Ueditor增加字体的修改⽅法Ueditor本⾝⾃带11种字体使⽤过程中这11种字体往往不能满⾜我们的需求,现在我要添加“仿宋”和“仿宋GB2312”两种字体过程如下:1、找到⽂件 ueditor/lang/zh-cn/zh-cn.js ,找到其中的fontfamily节点,添加“仿宋”和“仿宋GB2312”'fontfamily':{'songti': '宋体','SimSun': '仿宋','FangSong_GB2312': '仿宋_GB2312','kaiti':'楷体','heiti':'⿊体','lishu':'⾪书','yahei':'微软雅⿊','andaleMono':'andale mono','arial': 'arial','arialBlack':'arial black','comicSansMs':'comic sans ms','impact':'impact','timesNewRoman':'times new roman'},2、找到⽂件ueditor\ueditor.config.js⽂件(⽹上也看到⼀说是ueditor\editor_config.js⽂件,可能版本问题),找到其中被注释掉的fontfamily节点,去掉该节点的注释,添加“仿宋”和“仿宋GB2312”//fontfamily//字体设置 label留空⽀持多语⾔⾃动切换,若配置,则以配置值为准,'fontfamily':[{ label: '', name: 'songti', val: '宋体,SimSun' },{ label: '', name: 'SimSun', val: '仿宋,SimSun' },{ label:'',name:'FangSong_GB2312',val:'仿宋_GB2312 ,FangSong_GB2312'},{ label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},{ label:'',name:'yahei',val:'微软雅⿊,Microsoft YaHei'},{ label:'',name:'heiti',val:'⿊体, SimHei'},{ label:'',name:'lishu',val:'⾪书, SimLi'},{ label:'',name:'andaleMono',val:'andale mono'},{ label:'',name:'arial',val:'arial, helvetica,sans-serif'},{ label:'',name:'arialBlack',val:'arial black,avant garde'},{ label:'',name:'comicSansMs',val:'comic sans ms'},{ label:'',name:'impact',val:'impact,chicago'},{ label:'',name:'timesNewRoman',val:'times new roman'}]//fontsize//字号//,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]添加好的效果图:可以看到,仿宋和仿宋GB2312被成功添加上去了最后,附上部分中⽂字体的英⽂名,⽅便添加字体华⽂细⿊:STHeiti Light [STXihei]华⽂⿊体:STHeiti华⽂楷体:STKaiti华⽂宋体:STSong华⽂仿宋:STFangsong俪⿊ Pro:LiHei Pro Medium俪宋 Pro:LiSong Pro Light标楷体:BiauKai苹果俪中⿊:Apple LiGothic Medium苹果俪细宋:Apple LiSung Light新细明体:PMingLiU细明体:MingLiU标楷体:DFKai-SB⿊体:SimHei宋体:SimSun新宋体:NSimSun仿宋:FangSong楷体:KaiTi仿宋_GB2312:FangSong_GB2312楷体_GB2312:KaiTi_GB2312微软正⿊体:Microsoft JhengHei微软雅⿊体:Microsoft YaHei⾪书:LiSu幼圆:YouYuan华⽂细⿊:STXihei华⽂楷体:STKaiti华⽂宋体:STSong华⽂中宋:STZhongsong华⽂仿宋:STFangsong⽅正舒体:FZShuTi⽅正姚体:FZYaoti华⽂彩云:STCaiyun华⽂琥珀:STHupo华⽂⾪书:STLiti华⽂⾏楷:STXingkai华⽂新魏:STXinwei。
跟我学百度UEditor在线文本编辑器及应用实例——UEditor在线文本编辑器功能特性及官方技术文档
1.1跟我学百度UEditor在线文本编辑器及应用实例——UEditor在线文本编辑器功能特性及官方技术文档1.1.1UEditor在线文本编辑器功能特性及官方技术文档1、UEditor在线文本编辑器功能特性UEditor是一个开源免费的Web方式下的富文本编辑器(Rich Text Editor,简称RTE),而Web方式下的富文本编辑器其实也就是一种可内嵌于浏览器页面,并且实现所见即所得编辑功能的文本编辑器。
UEditor是由百度Web前端研发部开发并发布的一款所见即所得的富文本Web编辑器。
具有轻量、可定制和注重用户体验等技术特点,而且开源基于BSD协议,允许自由使用和修改代码。
UEditor在线文本编辑器官方网站上介绍的相关功能特性如下:如下示例图为应用UEditor在线文本编辑器所编辑的一篇新闻稿件的局部截图:2、官方网站/website/(1)官方网站地址读者可以在UEditor在线文本编辑器官方网站上(/website/)下载与UEditor相关的系统库文件。
(2)系统库下载页面的网址/website/download.html在UEditor在线文本编辑器官方网站上为开发人员提供了中文“UTF-8”和“GBK”两种不同的中文编码版本的下载链接,而且分为完整版和Mini定制版。
由于目前的Web应用系统开发平台有多种不同的语言形式,因此也为开发人员提供了PHP、ASP、和JSP等不同平台的版本。
开发人员然后根据自己的Web应用系统的开发平台选择不同版本的下载包。
本文下载JSP版本。
另外,还提供其它的资源文件,读者可以根据应用的需要选择性地下载。
3、UEditor在线文本编辑器在线Demo示例4、UMeditor(满足论坛系统的发帖框或回复框的应用需求在线文本编辑器)在线Demo示例5、UEditor在线文本编辑器提供在线入门帮助参考文档Ueditor提供了功能说明文档和使用说明文档。
百度UEditor使用详解
百度UEditor使用详解(作者:老卢)相关视频教程下载:当我们还在使用FCKeditor时候,百度已经悄悄开发出了一套比它更强大的文本编辑器ueditor,专为中国人打造,请看--------:web文本编辑器被广泛的使用在论坛,留言系统,微博等网站,凡是用户能发布文字的网站,几乎到会使用到文本编辑器,老卢今天给大家介绍一款中国人自己开放的开源文本编辑器,全球最大中文搜索引擎--百度推出的UEditor。
Ueditor 是由百度web前端研发部开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和使用代码.详细可参见网站:/index.html。
最新版1.1.7,可以在JSP,PHP,ASP等网站使用。
好,现在跟老卢来看看如何使用:以JSP网站为例1下载ueditor访问这个网址:/index.html,找到下载然后下载ueditor1.1.7.zip或者其他的版本2 解压后我们会看到6个文件夹和3个js文件以及一个更新日志文本其中:官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:_examples:编辑器完整版的示例页面_demos:编辑器的各种使用案例dialogs:弹出对话框对应的资源和JS文件themes:样式图片和样式文件server:涉及到服务器端操作的PHP、JSP等文件third-party:第三方插件editor_all.js:_src目录下所有文件的打包文件editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录3 在你的web工程或网站根目录下,新建一个名称叫ueditor文件夹。
复制所有这些文件夹和js到这个文件夹到此准备工作完成4 在JSP页面包含所需要的JS和css<script type="text/javascript" charset="utf-8"src="ueditor/editor_config.js"></script><script type="text/javascript" charset="utf-8"src="ueditor/editor_all_min.js"></script><link rel="stylesheet" type="text/css"href="ueditor/themes/default/ueditor.css" />在此注意:引用的js或css必须正确,否则显示不出来我的ueditor文件夹和JSP文件同在根目录,所以写成以上。
百度输入法皮肤编辑器使用说明
百度输入法皮肤编辑器使用说明请您在使用百度输入法皮肤编辑器的过程中不定时保存,以防止所做的修改意外丢失。
1、百度输入法编辑器界面:编辑器总分为三个区域(1) 菜单栏、(2) 编辑区、(3) 预览区。
(如下图所示)2、菜单栏:【新建】- 新建皮肤【打开】- 如果更改已经做好的皮肤,可以点击【文件】-【打开】【保存】- 对文件进击保存【另存为】- 对文件进行另外保存【退出】- 退出编辑器【导出预览图】- 可以导出PNG格式效果图3、编辑区:编辑区总共分为6个选项卡。
(1)信息选项:【信息】可以在信息栏中填写皮肤相关信息。
当皮肤制作完成后可以单击【发布】或点击【文件】-【保存】即可生成本地的bps百度输入法皮肤文件。
(2)字体选项:【字体】这里可以对字体\颜色进行详细的配置可以让预览图的输入框大小随字体大小变化。
(3)状态栏选项:【状态栏】可以对状态栏的图标进行更换。
1、例如:更换输入法状态栏背景,点击背景,然后再点导入浏览,选择图片即可。
2、除背景外,每一个按钮项会对应标准状态、鼠标悬停、和鼠标按下三个图标,需要逐个修改。
3、面的位置选项可以通过更改数字修改图标的大小和位置,也可以直接在预览图上拖动来实。
(如下图所示)(4)横排窗口\竖排窗口选项:1、横排摸式下我怎么取消右上角的logo?当不需要用到某些工具时,可进行隐藏只要在列表中找到它然后点击√即可。
2、拉伸和平铺有什么区别?拉伸方式选择平铺的话,当输入框长度超过输入框背景长度时候,会以输入框背景平铺方式来扩展。
拉伸顾名思义。
(下图以波浪展示拉伸和平铺区别)3、这里可以调整字符串和输入框背景之间的位置关。
4、可以通过这里调整输入法和输入位置。
5、这里可以根据个人需要设置分割线、颜色、长度以及翻页按钮之间间隔等。
(5)检错选项:皮肤完成后通过【检错】功能进行检查,确定无误就可以发布。
Ueditor百度编辑器中的setContent()方法的使用
Ueditor百度编辑器中的setContent()⽅法的使⽤百度编辑器Ueditor所提供的setContent()⽅法作⽤是:设置或者改变编辑器⾥⾯的⽂字内容或html内容函数说明:setContent(string,boolean);参数string 是需要设置到编辑器⾥⾯的内容,可以含有HTML代码,最后插⼊到编辑器中的内容是经过编辑器内置过滤器过滤后的内容,同时该函数会出发selectionchange 事件。
参数:boolean,(true/false) true表⽰清空编辑器俩⾯的内容,在内容后⾯添加内容,不传,默认是true;false表⽰清空当前编辑器的内容后,在插⼊内容。
问题:当我第⼀次⽤editor.setConten()向编辑其中插⼊数据的时候始终提⽰下⾯的错误:$(function(){var content =$('#daily_content').val();ue.setContent(content);});[object Object]最后在⽹上查阅资料了解到:不能单独使⽤setContent(string,boolean);必须是在创建好编辑器后才能使⽤,那么如何知道编辑器创建好并且准备好了呢?使⽤⼀下⽅法就可实现在编辑器中插⼊内容了:$(function(){var content =$('#daily_content').val();//判断ueditor 编辑器是否创建成功ue.addListener("ready", function () { // editor准备好之后才可以使⽤ ue.setContent(content);});});。
百度编辑器ueditor内容编辑自动套P标签,及p标签替换
百度编辑器ueditor内容编辑⾃动套P标签,及p标签替换如图,红框为回车键和shift+回车:===>>ueditor.all.js中:1:搜索修改成false:allowDivTransToP: false再搜索并修改以下://编辑器不能为空内容if (domUtils.isEmptyNode(me.body)) {me.body.innerHTML = '<div>' + (browser.ie ? '' : '<br/>') + '</div>';}2://给⽂本或者inline节点套p标签if (me.options.enterTag == 'p') {var child = this.body.firstChild, tmpNode;if (!child || child.nodeType == 1 &&(dtd.$cdata[child.tagName] || isCdataDiv(child) ||domUtils.isCustomeNode(child))&& child === stChild) {this.body.innerHTML = '<div>' + (browser.ie ? ' ' : '<br/>') + '</div>' + this.body.innerHTML;} else {var p = me.document.createElement('div');while (child) {while (child && (child.nodeType == 3 || child.nodeType == 1 && dtd.p[child.tagName] && !dtd.$cdata[child.tagName])) {tmpNode = child.nextSibling;p.appendChild(child);child = tmpNode;}if (p.firstChild) {if (!child) {me.body.appendChild(p);break;} else {child.parentNode.insertBefore(p, child);p = me.document.createElement('div');}}child = child.nextSibling;}}}以上类似的有好⼏处,将p 改为 div3:上代码框中 if (me.options.enterTag == 'p') 这个P根据以下开关来⾛enterTag: 'p',//改后为回车换⾏增加br,不改为换⾏增加div4://进⼊编辑器的li要套p标签,我不需要套P,注释掉吧//进⼊编辑器的li要套p标签/*这⾥开始注释掉 me.addInputRule(function(root){utils.each(root.getNodesByTagName('li'),function(li){var tmpP = UE.uNode.createElement('p');for(var i= 0,ci;ci=li.children[i];){if(ci.type == 'text' || dtd.p[ci.tagName]){5:以下找到并注释//注释掉,这个是⾃动给ul增加⼀个内置的样式,如<ul class=" list-paddingleft-2">node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type; //往下隔⼀⾏的这个注释掉,这个是⾃动去除粘贴进去的代码的li的style样式,为何清除我的样式?li.style.cssText && (li.style.cssText = '');到此就完成了。
ueditor 用法
ueditor 用法【原创版】目录1.Ueditor 简介2.Ueditor 的基本使用方法3.Ueditor 的进阶使用方法4.Ueditor 的注意事项正文一、Ueditor 简介Ueditor 是由百度推出的一款开源的 HTML 可视化编辑器,其基于jQuery 框架开发,具有体积小、功能强大、操作简单、高度定制化等特点,被广泛应用于各种网站和应用中的文本编辑功能。
二、Ueditor 的基本使用方法1.引入 Ueditor 的 CSS 和 JS 文件:在网页中引入 Ueditor 的CSS 文件(ueditor.css)和 JS 文件(ueditor.all.js),以及 jQuery 库文件(jquery.min.js)。
2.初始化 Ueditor:在 HTML 文件中创建一个文本域(textarea),并为其添加一个唯一的 ID,然后在 JS 代码中使用 Ueditor 的 API 初始化编辑器。
3.配置 Ueditor:通过设置 Ueditor 的配置项,可以定制编辑器的样式、功能等。
三、Ueditor 的进阶使用方法1.添加自定义按钮:通过创建自定义按钮,可以实现更多的编辑功能,如插入图片、表格等。
2.实现图片上传:通过编写后端接口,实现图片上传功能,并在编辑器中添加相应的按钮,方便用户插入图片。
3.实现实时预览:通过编写后端接口,实现实时预览功能,让用户在编辑过程中实时查看到页面效果。
四、Ueditor 的注意事项1.确保引入的文件顺序正确:应先引入 jQuery 库,然后是 Ueditor 的 CSS 和 JS 文件。
2.配置项要放在初始化 Ueditor 之后:否则可能会导致配置项无法生效。
3.使用过程中要注意兼容性:部分浏览器可能存在兼容性问题,需要进行相应的调整。
总的来说,Ueditor 是一款功能强大且易于使用的 HTML 可视化编辑器,通过掌握其基本使用方法和进阶使用方法,可以为我们的网站和应用提供更好的文本编辑体验。
百度编辑器
百度编辑器百度编辑器是一款功能强大的在线编辑器,具备多种实用的编辑功能和插件,是许多网站和个人用户的首选工具。
本文将介绍百度编辑器的特点、优势和使用方法。
1.特点:百度编辑器具有以下几个特点:1)多种编辑模式:百度编辑器支持所见即所得(WYSIWYG)模式和源代码模式,方便用户根据自己的需求进行编辑;2)格式化功能:百度编辑器提供了丰富的格式化功能,用户可以轻松地设置字体、颜色、段落样式等,使编辑的内容更加美观和易读;3)表格编辑:百度编辑器内置了表格编辑功能,用户可以创建和编辑复杂的表格,方便展示数据和布局内容;4)插件支持:百度编辑器支持大量的插件,如图片上传、链接管理、代码高亮等,可以满足用户的各种需求;5)兼容性强:百度编辑器兼容主流的浏览器,并且能够在多种设备上进行使用,包括电脑、平板和手机。
2.优势:与其他编辑器相比,百度编辑器有以下优势:1)易于使用:百度编辑器的界面简洁明了,用户只需简单的操作即可完成编辑任务;2)速度快:百度编辑器在加载和编辑大量内容时的速度非常快,节省用户的时间;3)稳定性高:百度编辑器经过了多次测试和优化,具有很高的稳定性和安全性,不易出现崩溃或漏洞;4)扩展性强:百度编辑器支持插件扩展,用户可以根据自己的需求选择和添加各种功能,使编辑器更加丰富多样。
3.使用方法:使用百度编辑器进行编辑非常简单,只需按照以下步骤进行操作:1)打开百度编辑器:在浏览器中输入百度编辑器的网址,打开编辑器界面;2)创建新文档:点击编辑器界面上的“新建文档”按钮,创建一个新的编辑文档;3)编辑文档内容:在编辑器的编辑区域中输入、粘贴或拖拽文本内容,进行排版和格式化;4)插入图片:在需要插入图片的位置,点击编辑器上的“插入图片”按钮,选择要插入的图片文件,并进行相应的设置;5)保存文档:在编辑完成后,点击编辑器上的“保存”按钮,将文档保存到本地或服务器上;6)发布文档:如果需要将文档发布到网站上,可以点击编辑器上的“发布”按钮,将文档上传到服务器。
ueditor百度编辑器增加行间距与字间距工具按钮
ueditor百度编辑器增加⾏间距与字间距⼯具按钮⼀、⾏间距百度编辑器⾃带⾏间距⼯具,在toolbars⾥⾯加上'lineheight'即可⼆、字间距字间距⼯具需要⾃定义,修改的⽂件有点多1、UE\lang\zh-cn\zh-cn.js在labelMap⾥⾯加上'letterspacing':'字间距'UE\lang\en\en.js在labelMap⾥⾯加上'lineheight':'LineHeight'2、ueditor.config.js⾥⾯toolbars时增加letterspacing3、ueditro.css⾥⾯加上图标,因为有下拉框⽽且是⾃定义图标,不能单纯的修改.edui-default .edui-for-letterspacing .edui-icon,中间要加上.edui-button-body .edui-default .edui-for-letterspacing .edui-button-body .edui-icon {background: url(../images/editor_localization.png) center no-repeat;background-size: 100%;}4、ueditor.all.js⾥⾯修改三处(1)UE.plugins⾥⾯加上['letterspacing']⽅法/*** 设置字间距* @file* @since 1.2.6.1*/UE.plugins['letterspacing'] = function () {var me = this;me.setOpt({ 'letterspacing': ['0', '0.25', '0.5', '1', '1.5', '2', '2.5', '3', '4', '5'] });/*** 字间距* @command letterspacing* @method execCommand* @param { String } cmdName 命令字符串* @param { String } value 传⼊的⾏⾼值,该值是当前字体的倍数,例如: 1.5, 2.5* @example* ```javascript* editor.execCommand( 'letterspacing', 1.5);* ```*//*** 查询当前选区内容的⾏⾼⼤⼩* @command letterspacing* @method queryCommandValue* @param { String } cmd 命令字符串* @return { String } 返回当前⾏⾼⼤⼩* @example* ```javascript* editor.queryCommandValue( 'letterspacing' );* ```*/mands['letterspacing'] = {execCommand: function (cmdName, value) {this.execCommand('paragraph', 'p', { style: 'letter-spacing:' + (value == "1" ? "normal" : value + 'em') });return true;},queryCommandValue: function () {var pN = domUtils.filterNodeList(this.selection.getStartElementPath(), function (node) { return domUtils.isBlockElm(node) }); if (pN) {var value = domUtils.getComputedStyle(pN, 'letter-spacing');return value == 'normal' ? 1 : value.replace(/[^\d.]*/ig, "");}}};};(2)btnCmds⾥⾯加上'letterspacing'(3)ui/splitbutton.js部分添加⽅法,展⽰下拉框editorui.letterspacing = function (editor) {var val = editor.options.letterspacing || [];if (!val.length) return;for (var i = 0, ci, items = []; ci = val[i++];) {items.push({//todo:写死了label: ci,value: ci,theme: editor.options.theme,onclick: function () {editor.execCommand("letterspacing", this.value);}})}var ui = new editorui.MenuButton({editor: editor,className: 'edui-for-letterspacing',title: belMap['letterspacing'] || editor.getLang("labelMap.letterspacing") || '',items: items,onbuttonclick: function () {var value = editor.queryCommandValue('LetterSpacing') || this.value;editor.execCommand("LetterSpacing", value);}});editorui.buttons['letterspacing'] = ui;editor.addListener('selectionchange', function () {var state = editor.queryCommandState('LetterSpacing'); if (state == -1) {ui.setDisabled(true);} else {ui.setDisabled(false);var value = editor.queryCommandValue('LetterSpacing'); value && ui.setValue((value + '').replace(/cm/, ''));ui.setChecked(state)}});return ui;};。
百度UEditor编辑器使用教程与使用方法(图文)
百度UEditor编辑器使⽤教程与使⽤⽅法(图⽂)我们在做⽹站的时候,⽹站后台系统⼀般都会⽤到web编辑器,今天笔者就给⼤家推荐⼀款百度UEditor编辑器。
关于这款百度UEditor编辑器官⽹上也有简单的教程,不过看着⽐较费劲,今天笔者就跟⼤家分享⼀下百度UEditor编辑器使⽤教程与使⽤⽅法,希望对⼤家有所帮助。
第⼀:百度UEditor编辑器的官⽅下载地址第⼆:百度UEditor编辑器的功能版本选择当我们进⼊百度UEditor编辑器官⽹点击下载选项后,我们发现⼀共有两个版本供我们选择,⼀个是UBuilder,⼀个是开发版,通过下⾯注释的红⾊⼩字我们可以了解到UBuilder和开发版的区别。
⼀般情况下我们选择UBuilder版本即可。
跟我们以往下载软件的⽅式不同,UEditor采⽤选择性下载。
⾸先是可见功能的选择,共有基本,插⼊,格式化,表格四⼤组,每组下⾯都有若⼲功能按钮,我们可以根据⾃⼰的需求来进⾏选择,如果双击四⼤组则表⽰全选该组按钮。
如果对选择的按钮不满意还可以点击清空选择,有⼀点要提⽰的是如果点击清空选择会清楚掉你原先做过的所有选择。
接着就是隐藏功能,语⾔,服务端版本的选择,隐藏功能默认的是全选,如⾮必要还是不要更改为好。
语⾔选项共分为了中⽂和英⽂两种,默认的是只下载中⽂语⾔包,如果你有需要⽤到英⽂的话可以把英⽂包也加上。
服务端版本⽬前提供了三种,分别为PHP,.NET,JSP,选择完毕后我们就可以点击下载资源包了。
第三:百度UEditor编辑器的配置⽅法技巧1、从官⽹上下载完整源码包,解压到任意⽬录,解压后的源码⽬录结构如下所⽰:_examples:编辑器完整版的⽰例页⾯dialogs:弹出对话框对应的资源和JS⽂件themes:样式图⽚和样式⽂件 php/jsp/.net:涉及到服务器端操作的后台⽂件,根据你选择的不同后台版本,这⾥也会不同,这⾥我们选择phpthird-party:第三⽅插件(包括代码⾼亮,源码编辑等组件)editor_all.js:_src⽬录下所有⽂件的打包⽂件(⽤于发布版本)editor_api.js: API接⼝配置⽂件(开发版本)editor_all_min.js:editor_all.js⽂件的压缩版,建议在正式部署时才采⽤editor_config.js:编辑器的配置⽂件,建议和编辑器实例化页⾯置于同⼀⽬录2、编辑器的实例化页⾯,导⼊编辑器需要的三个⼊⼝⽂件,⽰例代码如下:<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>3、然后在编辑器的实例化页⾯中创建编辑器实例及其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')</script>4、在editor_config.js中查找URL变量配置编辑器在你项⽬中的路径。
百度富文本编辑器使用(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"],}');}。
【原创】百度编辑器Ueditor1.4.3开发版独立上传文件功能
【原创】百度编辑器Ueditor1.4.3开发版独⽴上传⽂件功能咳咳!最近⽤这个百度编辑器,⽤了独⽴上传图⽚,这个⽹上⼀⼤堆都是对的,这个没啥问题,关键就是独⽴上传⽂件功能部分,由于它内置的⽂件上传模块中没有相关的Event事件,因此我们得⼿动添加!⽹上⼤部分的做法都是在ueditor_jsp/dialogs/attachment/attachment.html⽂件⾥⾯editor.execCommand('insertfile', list);的前⾯加⼊下⾯这句editor.fireEvent('afterUpfile', list);天哪噜!!谁跟你讲的html⽂件⾥⾯写这玩意⼉咯都在JS⾥⾯的好不好?!估计这是旧版本的修改⽅式~于是乎,找到了同⽬录下的attachment.js⽂件很⾼兴!我们在这个⽂件⾥⾯还是找到了editor.execCommand('insertfile', list);这局那我们就试试吧,在它前⾯添加editor.fireEvent('afterUpfile', list);哼哼~结果咧~还是不⾏真的不⾏不信你试试得!肿么破?然后我们通过在全⽬录下搜索“图⽚上传”事件beforeinsertimage,在ueditor_jsp/ueditor.all.js找到if(me.fireEvent('beforeinsertimage', opt) === true){return;}嗯嗯~找到点⼉头绪,这是事件抛出的⽅法那我们在这个⽂件⾥⾯找找有⽊有⽂件上传相关的代码!真是太棒了!在该⽂件下找到了如下的内容// plugins/insertfile.jsUE.plugin.register('insertfile', function (){var me = this;function getFileIcon(url){var ext = url.substr(stIndexOf('.') + 1).toLowerCase(),maps = {"rar":"icon_rar.gif","zip":"icon_rar.gif","tar":"icon_rar.gif","gz":"icon_rar.gif","bz2":"icon_rar.gif","doc":"icon_doc.gif","docx":"icon_doc.gif","pdf":"icon_pdf.gif","mp3":"icon_mp3.gif","rmvb":"icon_mv.gif","wmv":"icon_mv.gif","flv":"icon_mv.gif","swf":"icon_mv.gif","rm":"icon_mv.gif","exe":"icon_exe.gif","psd":"icon_psd.gif","txt":"icon_txt.gif","jpg":"icon_jpg.gif","png":"icon_jpg.gif","jpeg":"icon_jpg.gif","gif":"icon_jpg.gif","ico":"icon_jpg.gif","bmp":"icon_jpg.gif"};return maps[ext] ? maps[ext]:maps['txt'];}return {commands:{'insertfile': {execCommand: function (command, filelist){filelist = utils.isArray(filelist) ? filelist : [filelist];var i, item, icon, title,html = '',URL = me.getOpt('UEDITOR_HOME_URL'),iconDir = URL + (URL.substr(URL.length - 1) == '/' ? '':'/') + 'dialogs/attachment/fileTypeImages/'; for (i = 0; i < filelist.length; i++) {item = filelist[i];icon = iconDir + getFileIcon(item.url);title = item.title || item.url.substr(stIndexOf('/') + 1);html += '< p style="line-height: 16px;" >' +'< img style="vertical-align: middle; margin-right: 2px;" src="'+ icon + '" _src="' + icon + '" / >' + '< a style="font-size:12px; color:#0066cc;" href="' + item.url +'" title="' + title + '">' + title + '</ a>' + '</ p>';}me.execCommand('insertHtml', html);}}}}});这与我们刚刚搜索到的图⽚上传⼗分的像!就是差了⼀点点,此时不妨加上去试试// plugins/insertfile.jsUE.plugin.register('insertfile', function (){var me = this;function getFileIcon(url){var ext = url.substr(stIndexOf('.') + 1).toLowerCase(),maps = {"rar":"icon_rar.gif","zip":"icon_rar.gif","tar":"icon_rar.gif","gz":"icon_rar.gif","xls":"icon_xls.gif","chm":"icon_chm.gif","ppt":"icon_ppt.gif","pptx":"icon_ppt.gif","avi":"icon_mv.gif","rmvb":"icon_mv.gif","wmv":"icon_mv.gif","flv":"icon_mv.gif","swf":"icon_mv.gif","rm":"icon_mv.gif","exe":"icon_exe.gif","psd":"icon_psd.gif","txt":"icon_txt.gif","jpg":"icon_jpg.gif","png":"icon_jpg.gif","jpeg":"icon_jpg.gif","gif":"icon_jpg.gif","ico":"icon_jpg.gif","bmp":"icon_jpg.gif"};return maps[ext] ? maps[ext]:maps['txt'];}return {commands:{'insertfile': {execCommand: function (command, filelist){filelist = utils.isArray(filelist) ? filelist : [filelist];// 抛出完成上传事件if(me.fireEvent('afterUpfile', filelist) === true){return;}var i, item, icon, title,html = '',URL = me.getOpt('UEDITOR_HOME_URL'),iconDir = URL + (URL.substr(URL.length - 1) == '/' ? '':'/') + 'dialogs/attachment/fileTypeImages/'; for (i = 0; i < filelist.length; i++) {item = filelist[i];icon = iconDir + getFileIcon(item.url);title = item.title || item.url.substr(stIndexOf('/') + 1);html += '< p style="line-height: 16px;" >' +'< img style="vertical-align: middle; margin-right: 2px;" src="'+ icon + '" _src="' + icon + '" / >' + '< a style="font-size:12px; color:#0066cc;" href="' + item.url +'" title="' + title + '">' + title + '</ a>' + '</ p>';}me.execCommand('insertHtml', html);}}}}});好!然后就是前台~之前不说就是因为之前的⽅法肯定不成功的啦~var _editor;// 隐藏的编辑器var _input;// 获取地址的Input框ID的字符串//实例化⼀个编辑器,防⽌在上⾯的editor编辑器中显⽰上传的图⽚或者⽂件 _editor = UE.getEditor('upload_ue');// 对该编辑器进⾏设置_editor.ready(function () {// 不能设置编辑器不可⽤!否则将⽆法获取到路径的返回值// _editor.setDisabled();// 隐藏编辑器,因为不会⽤到这个编辑器实例,所以要隐藏_editor.hide();// 侦听⽂件上传_editor.addListener('afterUpfile', function (t, arg) {// 上传限制,仅限⼀张if(arg.length > 1){alert("⼀次只能上传⼀个⽂件!");return;}// 获取本次上传的所有路径信息,⽤|分隔var pathAll = "";for(var i = 0; i < arg.length; i++){if(i < arg.length - 1){pathAll += arg[0].url + "|"; // 注意!这⾥图⽚上传是src,⽂件的则是url }else{pathAll += arg[0].url;}}// 将地址赋值给相应的input$("#" + _input).attr("value", pathAll);})});});// 弹出图⽚上传的对话框// 参数1:关联的input控件id;参数2:调⽤该⽅法的控件id;function uploadfile(inputId, btnId){var upFileDialog = _editor.getDialog("attachment");// 获取上传⽂件窗体_input = inputId;// 获取到需要获取路径的Input框upFileDialog.open();// 显⽰该窗体}OK!调⽤⼀下~完美!。
修改百度在线编辑器(UEDITOR)自动排版首行缩进四个字符问题技术部
修改百度在线编辑器(UEDITOR )自动排版首行缩进四个字符问题技术部百度开源在线编辑器ueditor 从用户来说非常的好用,如果网站使用了这个编辑器那网站的体验度会增加很多。
但是ueditor 是通用在线编辑器,不是对某网站定制的,所以难免有一些不符合用户习惯的地方。
我们网站添加了百度在线编辑器后编辑们一直反应自动排版功能经常出现缩进四个字符的情况。
经过分析是编辑们从别的网页复制过来内容后直接粘贴进编辑器,由于其它网站已经用空格代替了缩进功能,所以再自动排版的时候会在段落前面再缩进两个字符,这样就成了缩进四个字符。
之前没有缩进的段落是正常缩进两个字符。
为了解决这个问题方便编辑们录入新闻只能修改在线编辑器的代码了。
修改方法如下:在文件editor_all.js 中查找1 2 3 4 5 6 7 8 9 10 11 12 if(isLine(ci,true) ){if(opt.indent){ ci.style.textIndent = opt.indentValue; } if(opt.textAlign){ ci.style.textAlign = opt.textAlign; } // if(opt.lineHeight) // ci.style.lineHeight =opt.lineHeight + 'cm';} 在前面添加以下代码:1 2 3 4 //去除段落开始空格re = new RegExp("^((\ \;)+)*","g");ci.innerHTML=ci.innerHTML.replace(re, "");ci.innerHTML=ci.innerHTML.replace(/(^\s*)/g, "");保存后刷新后台测试一下,应该没问题了。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
怎么用好百度编辑器
UEditor百度编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码;
编辑器功能区,鼠标经过功能按钮上都会有文字描述,可以多图上传、添加视频、添加百度动态地图,每个功能都可以去尝试,这里就不一一介绍了
如何用好内容编辑器,关键在于内容的排版:
1、内容的流畅性
文章正文内容,主要是合理利用加粗标签以及合理段落。
正文核心关键词第一次出现加粗、段落总起的说明文字加粗、内容合理段落,从用户的阅读体验考虑,文章中的关键词合理均匀排布,遇到相关性内容可加内部链接指向相关页面。
2、字体段落前面需要空两格、适当的行距和字距
3、采用总-分-总,分段的形式编写
内容采用总-分-总的形式来写,文章分段编写,有段落,用户看了条理清晰。
文章编写也可以在分段落同时,每一段落用几个字概括段落大意或是用数字(有序列表)、符号(无序列表)分段,建议采用有序列表,更受搜索引擎亲耐。
4、图文并茂
文章可以放置图片,但是图片要相关性,图片大小尽量小,这样打开网页加载的速度会快些。
放置图片的位置可以放在文章开始,也可以放在文章段落中间,图片周围的文字描述可以带上关键字。
5、关键字密度大概在2%到8%之间
关键字密度是指关键字在网页中出现的总字数和其他文字的百分比。
不要刻意去增加关键字密度,只要关键字每个页面包含四到五个,客户体验度好就行。
6、用word排版好,再添加到网站
图片转存步骤:
1.点击顶部复制按钮,将地址复制到剪贴板;
2.点击添加照片按钮,在弹出的对话框中使用Ctrl+V粘贴地址;
3.点击打开后选择图片上传流程。
利用编辑器自带的功能,同时注意内容排版技巧,让你的网站内容更具吸引力。