ueditor 怎么实现ueditor 语言切换换的

为织梦dedecms不同页面中百度ueditor编辑器设置不同宽度
& & & &相信正在使用织梦dedecms作为网站管理程序的朋友对织梦自带的ckeditor编辑器一定感到非常纠心:其难看的外观,不太好用的添加视频功能,超级弱智的图片上传项,就连按个&tab&键都要跳出编辑框...这些无不让我们对其深恶痛绝(可能说得有点夸张)! & & & &本人最近开了一个新站,最初因为这个ckeditor编辑器给编辑工作带来了诸多不便,所以最后痛下决心:改成百度ueditor。 & & & &为什么改成ueditor而不是别的编辑器呢?原因主要有三点: & & & &一、ueditor界面相当美观,用起来舒服; & & & &二、功能强悍,比如图片上传功能:它支持批量上传,图片搜索,还有非常不错的图片管理器;再比如视频添加功能:直接填写优酷土豆等视频网址即可,不用像ckeditor那样非常麻烦地去找&.swf&的flash地址; & & & &三、基于百度雄厚的实力,相信这个ueditor功能也会越来越强大。 & & & 是不是心动了?想体验ueditor的朋友可以去我的小创意网()看看,相信会带给你不错的体验。 & & & 不过ueditor装上后也不是马上就能用的(至于怎么安装,大家可以在官方上找),一般都会存在一些小问题。下面我就来谈谈其中一个非常重要的问题的解决方案。 & & & &安装完ueditor后,我们可以在ueditor的配置文件中对其界面宽度进行设置,但问题就出在这里,在这里设置的宽度是对全局而言,即所有网站内的编辑器宽度都一样。但对于我们dedecms用户而言,一般前台和后台编辑器宽度不一致,这样就会造成编辑器越界的问题。解决方案:将ueditor宽度设置放在编辑器调用阶段,具体做法如下: 1.中增加以下代码: '))
($fname, $fvalue, $nheight=&350&, $etype=&Basic&, $gtype=&print&, $isfullpage=&FALSE&,$bbcode=false)
($fname, $fvalue, $nheight, $etype, $gtype, $isfullpage, $bbcode);
2. 中增加以下代码: ($fname,$fvalue,$nheight=&350&,$etype=&Basic&,$gtype=&print&,$isfullpage=&false&,$bbcode=false)
);ue.render(&'.$fname.'&); & & //红色处为修改宽度
,暂时取消dedehtml编辑器的支持
3. 在编辑器调取页面将以下代码:
改为: etEditorD(&body&,&&,350,&Member&); ?& 以上方案的思想是:在不同界面使用不同的编辑器调用函数。 当然你可以根据需要对以上代码进行删改,还有什么问题可以去小创意网()咨询。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'[小安万能框架]易语言代码高亮结合ueditor自定义按钮弹窗_绵阳网站建设
&&&&最近总是想将易语言代码高亮加入到ueditor编辑器中,由于一致没有找到易语言代码高亮的解析代码,而自己有懒得写,所以,搁置如今,前不久精易论坛找到了一个,是去年一个网友开发的解析器,小安找到了该开发人员的论坛爱注释准备买一个,但是这位网友好像没怎么在网络上,曾经给discuz提供的易语言代码高亮插件也下架,再联系不到的情况下,过了几日,小安无意中在易语言官方论坛找到了一个网友写的js代码解析,虽然不完美,但是可以基本上满足小安的需求,于是结合ueditor开始了集成实验,过程分享如下:&&&&该插件已经集成到小安万能框架中,需要的可以下载,不过高亮解析有一些地方存在bug,原作者不在更新,小安只有抽时间在修复下了。&&&&第一,系在ueditor最新版,1.4.3,然后自定义一个按钮,需要找到ueditor.config.js文件中的toolbars数组,添加一个ecode字符&&&&&&&&//工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义
&&&&&&&&,&toolbars:&[['ecode',
&&&&&&&&&&&&'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',&'webapp',&'pagebreak',&'template',&'background',&'|',
&&&&&&&&&&&&'horizontal',&'date',&'time',&'spechars',&'snapscreen',&'wordimage',&'|',
&&&&&&&&&&&&'inserttable',&'deletetable',&'insertparagraphbeforetable',&'insertrow',&'deleterow',&'insertcol',&'deletecol',&'mergecells',&'mergeright',&'mergedown',&'splittocells',&'splittorows',&'splittocols',&'charts',&'|',
&&&&&&&&&&&&'print',&'preview',&'searchreplace',&'help',&'drafts'
&&&&&&&&]]
&&&&&&&&//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
&&&&&&&&,labelMap:{
&&&&&&&&&&&&'ecode':'易语言代码',&'undo':''
&&&&&&&&}&&&&labelMap是鼠标移动上去提示的文字信息。&&&&二:打开ueditor.all.js文件,在btnCmds 添加一个‘ecode’;//为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起
&&&&var&btnCmds&=&['ecode'&,&'undo',&'redo',&'formatmatch',
&&&&&&&&'bold',&'italic',&'underline',&'fontborder',&'touppercase',&'tolowercase',
&&&&&&&&'strikethrough',&'subscript',&'superscript',&'source',&'indent',&'outdent',
&&&&&&&&'blockquote',&'pasteplain',&'pagebreak',
&&&&&&&&'selectall',&'print','horizontal',&'removeformat',&'time',&'date',&'unlink',
&&&&&&&&'insertparagraphbeforetable',&'insertrow',&'insertcol',&'mergeright',&'mergedown',&'deleterow',
&&&&&&&&'deletecol',&'splittorows',&'splittocols',&'splittocells',&'mergecells',&'deletetable',&'drafts'];&&&&三:添加css样式:打开ueditor hemesdefaultcssueditor.css,在末尾添加 .edui-for-ecode&.edui-icon&{
&&&&background-position:&-700px&-40
}&&&&具体的偏移量自定义,.edui-for-ecode ecode必须写上。二主要易语言的图标暂时没找到,可以直接将图标通过ps放到ueditor的ueditor/themes/default/images/icons.png,然后通过&background-position: -700px -40偏移量在显示。&&&&然后找到前台的ueditor初始化的地方
&&&&var&ue2&=&UE.getEditor('content',{&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&initialFrameHeight:200&&&&
&&&&&&&&&&&&});
&&&&&&&&&&&&mands['ecode']&=&{
&&&&&&&&&&&&&&&&execCommand:&function()&{
&&&&&&&&&&&&&&&&&&&&this.execCommand(&'insertcode',&'ecode');
&&&&&&&&&&&&&&&&&&&&return&
&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&queryCommandState:&function()&{}
&&&&&&&&&&&&};&&&&mands['ecode']对这个按钮的点击做出响应,它会创建一个代码框,如图:&&&&这和右侧的代码选择框差不多,有兴趣可以直接集成到右侧的代码选择框中去,小安图简单就不在移动位置了。这时候发布就能存储置顶格式的易语言代码了,接下来是前台的易语言代码高亮解析,需要用到网友的一个js解析类。&&&&在这之前,先说下ueditor弹窗的操作,作开始的设想是,点击按钮,出现一个框,然后点击确定将易代码加入到编辑器,不过ueditor自动过滤html的div标签,于是被迫放弃这个方法。&&&&那么添加弹窗的方法如下:第一步同上,然后找到ueditor.all.js 搜索‘iframeUrlMap’ 添加加载的页面路径:'ecode':&'~/dialogs/ecode/ecode.html'&&&&在ueidtor下dialogs添加ecode的文件夹,创建一个ecode.html页面,可以拷贝其他的文件夹文件做参考。&&&&继续找到这里,在添加ok和取消按钮var&dialogBtns&=&{
&&&&&&&&noOk:['searchreplace',&'help',&'spechars'&,'webapp','preview'],
&&&&&&&&ok:['attachment',&'anchor',&'link'&,&'insertimage',&'map',&'gmap',&'insertframe',&'wordimage',&'ecode'&,
&&&&&&&&&&&&'insertvideo',&'insertframe',&'edittip',&'edittable',&'edittd',&'scrawl',&'template',&'music',&'background',&'charts']
&&&&};&&&&在ok中添加‘ecode’;这时候点击图标,发现页面乱码,在上面的ueditor。css中添加样式如下:&.edui-for-ecode&.edui-dialog-content&{
&&&&width:&560&&
&&&&height:&350&
&&&&overflow:&
}&&&&继续打开dialogs/ecode/ecode.html文件,添加点击ok[确认]按钮的处理事件function&handleDialogOk(){
&&&&&&&&editor.execCommand(&'insertcode',&'ecode');//执行了一个在编辑器中添加代码框的命令
&&&&&&&&&&dialog.close();
&&&&dialog.onok&=&handleDialogOk;&&&&如果需要执行插入html代码,就用这一句,editor.execCommand(&'inserthtml',&'html_code');&&&&可以插入图片等,不过无法插入div等元素,会被编辑器自动过滤&&&&弹窗的方式就是这样,下面继续前段对易语言代码高亮的解析方式。&&&&文章最后有高亮js解析代码的包下载。共有三个文件,ecode.html[demo],ecode.css,ecode.&&&&在前段文章的解析页面处引用
&&&&之前记得需要引用jquery文件。&&&&在页面加载完毕后执行一个函数,该函数会自动寻找是否有易语言代码,并转换为高亮显示,可以切换视图方便复制代码&&&&现在js高亮解析包 点击这里&&&&发一个演示代码.版本&2
.支持库&iext
.子程序&交好友循环
.局部变量&index,&整数型
.局部变量&time,&文本型,&,&"2",&间隔时间数组
.局部变量&id,&文本型
.局部变量&sjindex,&整数型
.局部变量&userpwd,&文本型,&,&"2"
.局部变量&idnum,&文本型,&,&"0"
.局部变量&j,&整数型
.局部变量&uidms,&整数型
.局部变量&留言文本,&文本型,&,&"0"
.局部变量&jtime,&,&,&,&随机间隔时间
.局部变量&url,&文本型
.局部变量&res,&文本型
.局部变量&listInx,&整数型
.局部变量&re,&文本型
'&获取表项
listInx&=&超级列表框1.现行选中项
userpwd&=&分割文本&(超级列表框1.取标题&(listInx,&8),&“----”,&)
url&=&超级列表框1.取标题&(listInx,&1)
res&=&post登陆账号&(url,&userpwd&[1],&userpwd&[2])
.如果真&(res&=&“”)
&&&&状态条1.置文本&(1,&“网站”&+&超级列表框1.取标题&(listInx,&1)&+&“&登陆账号失败!”)
&&&&返回&()
.如果真结束
idnum&=&分割文本&(超级列表框1.取标题&(listInx,&2),&“@@@”,&)
uidms&=&到整数&(超级列表框1.取标题&(listInx,&5))&&'&选择uid模式
留言文本&=&分割文本&(超级列表框1.取标题&(listInx,&3),&“@@@”,&)&&'&取出留言条数
time&=&分割文本&(超级列表框1.取标题&(listInx,&4),&“至”,&2)&&'&取出时间的最大和最小
.计次循环首&(取数组成员数&(idnum),&j)
&&&&置随机数种子&()
&&&&.如果真&(uidms&=&0)&&'&随机取id值
&&&&&&&&sjindex&=&取随机数&(1,&取数组成员数&(idnum))
&&&&&&&&id&=&idnum&[sjindex]
&&&&.如果真结束
&&&&.如果真&(uidms&=&1)&&'&如果不随机就一次向下执行
&&&&&&&&id&=&idnum&[j]
&&&&.如果真结束
&&&&index&=&取随机数&(1,&取数组成员数&(留言文本))&&'&获取随机留言数组下标
&&&&jtime&=&取随机数&(到整数&(time&[1]),&到整数&(time&[2]))&&'&间隔时间
&&&&'&接下来执行交好友函数
&&&&re&=&dz_加好友&(url,&到整数&(id),&res,&留言文本&[index])
&&&&超级列表框1.置标题&(listInx,&7,&res)
&&&&高精度等待&(到整数&(jtime))
.计次循环尾&()
'&线程_销毁&()
绵阳 · 史安平博客 - 锉其锐、解其纷、和其光、同其尘 版权所有 &UEditor入门部署和感受 - 开源软件当前位置:& &&&第一篇
UEditor入门部署和感受第一篇
UEditor入门部署和感受&&网友分享于:&&浏览:0次第一篇
UEditor入门部署和体验UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。
UEditor富文本编辑器,轻量,可定制,注重用户体验。
1 入门部署和体验
1.1 下载编辑器
到官网下载 UEditor 最新版:
或是直接在网盘下载:JSP- UTF-8版本。(本文用的环境)
1.2 创建demo文件
解压下载的包,在解压后的目录创建 demo.html 文件,填入下面的html代码
(最小配置的代码)
&!DOCTYPE HTML&
&html lang="en-US"&
&meta charset="UTF-8"&
&title&ueditor demo&/title&
&!-- 加载编辑器的容器 --&
&script id="container" name="content" type="text/plain"&&/script&
&!-- 配置文件 --&
&script type="text/javascript" src="ueditor.config.js"&&/script&
&!-- 编辑器源码文件 --&
&script type="text/javascript" src="ueditor.all.js"&&/script&
&!-- 实例化编辑器 --&
&script type="text/javascript"&
var ue = UE.getEditor('container');
1.3 在浏览器打开demo.html
如果看到了下面这样的编辑器,恭喜你,初次部署成功!
1.4 传入自定义的参数
1.编辑器在初始化的时候可以传入给编辑器:
&!-- 加载编辑器的容器 --&
&script id="container" name="content" type="text/plain"&
欢迎使用百度编辑器!
刷新页面如下:
2.配置项也可以通过 ueditor.config.js 文件修改
&!-- 配置文件 --&
&script type="text/javascript" src="ueditor.config.js"&&/script&
ueditor.config.js 具体内容详情:
* ueditor完整配置项
* 可以在这里配置整个编辑器的特性
/**************************提示********************************
* 所有被注释的配置项均为UEditor默认值。
* 修改默认配置请首先确保已经完全明确该参数的真实用途。
* 主要有两种修改方案,一种是取消此处注释,然后修改成对应参数;另一种是在实例化编辑器时传入对应参数。
* 当升级编辑器时,可直接使用旧版配置文件替换新版配置文件,不用担心旧版配置文件中因缺少新功能所需的参数而导致脚本报错。
**************************提示********************************/
(function () {
* 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。
* 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
* "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。
* 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。
* 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。
* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
* 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径,这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统一请求接口路径
, serverUrl: URL + "jsp/controller.jsp"
//工具栏上的所有的功能按钮和下拉框,可以在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', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'help', 'drafts'
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
// ,labelMap:{
'anchor':'', 'undo':''
//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件:
//lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,langPath:URL +"lang/"
//主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换,当然,前提条件是themes文件夹下存在对应的主题文件:
//现有如下皮肤:default
//,theme:'default'
//,themePath:URL +"themes/"
//,zIndex : 900
//编辑器层级的基数,默认是900
//针对getAllHtml方法,会在对应的head标签中增加该编码设置。
//,charset:"utf-8"
//若实例化编辑器的页面手动修改的domain,此处需要设置为true
//,customDomain:false
//常用配置项目
//,isShow : true
//默认显示编辑器
//,textarea:'editorValue' // 提交表单时,服务器获取编辑器提交内容的所用的参数,多实例时可以给容器name属性,会将name给定的值最为每个实例的键值,不用每次实例化的时候都设置这个值
//,initialContent:'欢迎使用ueditor!'
//初始化编辑器的内容,也可以通过textarea/script给值,看官网例子
//,autoClearinitialContent:true //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了
//,focus:false //初始化时,是否让编辑器获得焦点true或false
//如果自定义,最好给p标签如下的行高,要不输入中文时,会有跳动感
//,initialStyle:'p{line-height:1em}'//编辑器层级的基数,可以用来改变字体等
//,iframeCssUrl: URL + '/themes/iframe.css' //给编辑器内部引入一个css文件
//indentValue
//首行缩进距离,默认是2em
//,indentValue:'2em'
//,initialFrameWidth:1000
//初始化编辑器宽度,默认1000
//,initialFrameHeight:320
//初始化编辑器高度,默认320
//,readonly : false //编辑器初始化结束后,编辑区域是否是只读的,默认是false
//,autoClearEmptyNode : true //getContent时,是否删除空的inlineElement节点(包括嵌套的情况)
//启用自动保存
//,enableAutoSave: true
//自动保存间隔时间, 单位ms
//,saveInterval: 500
//,fullscreen : false //是否开启初始化时即全屏,默认关闭
//,imagePopup:true
//图片操作的浮层开关,默认打开
//,autoSyncData:true //自动同步编辑器要提交的数据
//,emotionLocalization:false //是否开启表情本地化,默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹
//粘贴只保留标签,去除标签所有属性
//,retainOnlyLabelPasted: false
//,pasteplain:false
//是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
//纯文本粘贴模式下的过滤规则
//'filterTxtRules' : function(){
function transP(node){
node.tagName = 'p';
node.setStyle();
//直接删除及其字节点内容
'-' : 'script style object iframe embed input select',
'p': {$:{}},
'br':{$:{}},
'div':{'$':{}},
'li':{'$':{}},
'caption':transP,
'th':transP,
'tr':transP,
'h1':transP,'h2':transP,'h3':transP,'h4':transP,'h5':transP,'h6':transP,
'td':function(node){
//没有内容的td直接删掉
var txt = !!node.innerText();
node.parentNode.insertAfter(UE.uNode.createText(' & &'),node);
node.parentNode.removeChild(node,node.innerText())
//,allHtmlEnabled:false //提交到后台的数据是否包含整个html字符串
//insertorderedlist
//有序列表的下拉配置,值留空时支持多语言自动识别,若配置值,则以此值为准
//,'insertorderedlist':{
//自定的样式
'num':'1,2,3...',
'num1':'1),2),3)...',
'num2':'(1),(2),(3)...',
'cn':'一,二,三....',
'cn1':'一),二),三)....',
'cn2':'(一),(二),(三)....',
//系统自带
'decimal' : '' ,
//'1,2,3...'
'lower-alpha' : '' ,
// 'a,b,c...'
'lower-roman' : '' ,
//'i,ii,iii...'
'upper-alpha' : '' , lang
'upper-roman' : ''
//'I,II,III...'
//insertunorderedlist
//无序列表的下拉配置,值留空时支持多语言自动识别,若配置值,则以此值为准
//,insertunorderedlist : { //自定的样式
'dash' :'& 破折号', //-破折号
'dot':' 。 小圆圈', //系统自带
'circle' : '',
// '○ 小圆圈'
'disc' : '',
// '● 小圆点'
'square' : ''
//'■ 小方块'
//,listDefaultPaddingLeft : '30'//默认的左边缩进的基数倍
//,listiconpath : '/listicon/'//自定义标号的路径
//,maxListLevel : 3 //限制可以tab的级数, 设置-1为不限制
//,autoTransWordToList:false
//禁止word中粘贴进来的列表自动变成列表标签
//fontfamily
//字体设置 label留空支持多语言自动切换,若配置,则以配置值为准
//,'fontfamily':[
{ label:'',name:'songti',val:'宋体,SimSun'},
{ 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]
//paragraph
//段落格式 值留空时支持多语言自动识别,若配置,则以配置值为准
//,'paragraph':{'p':'', 'h1':'', 'h2':'', 'h3':'', 'h4':'', 'h5':'', 'h6':''}
//rowspacingtop
//段间距 值和显示的名字相同
//,'rowspacingtop':['5', '10', '15', '20', '25']
//rowspacingBottom
//段间距 值和显示的名字相同
//,'rowspacingbottom':['5', '10', '15', '20', '25']
//lineheight
//行内间距 值和显示的名字相同
//,'lineheight':['1', '1.5','1.75','2', '3', '4', '5']
//customstyle
//自定义样式,不支持国际化,此处配置值即可最后显示值
//block的元素是依据设置段落的逻辑设置的,inline的元素依据BIU的逻辑设置
//尽量使用一些常用的标签
//参数说明
//tag 使用的标签名字
//label 显示的名字也是用来标识不同类型的标识符,注意这个值每个要不同,
//style 添加的样式
//每一个对象就是一个自定义的样式
//,'customstyle':[
{tag:'h1', name:'tc', label:'', style:'border-bottom:#ccc 2padding:0 4px 0 0;text-align:margin:0 0 20px 0;'},
{tag:'h1', name:'tl',label:'', style:'border-bottom:#ccc 2padding:0 4px 0 0;margin:0 0 10px 0;'},
{tag:'span',name:'im', label:'', style:'font-style:font-weight:bold'},
{tag:'span',name:'hi', label:'', style:'font-style:font-weight:color:rgb(51, 153, 204)'}
//打开右键菜单功能
//,enableContextMenu: true
//右键菜单的内容,可以参考plugins/contextmenu.js里边的默认菜单的例子,label留空支持国际化,否则以此配置为准
//,contextMenu:[
//显示的名称
cmdName:'selectall',//执行的command命令,当点击这个右键菜单时
//exec可选,有了exec就会在点击时执行这个function,优先级高于cmdName
exec:function () {
//this是当前编辑器的实例
//this.ui._dialogs['inserttableDialog'].open();
//快捷菜单
//,shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]
//elementPathEnabled
//是否启用元素路径,默认是显示
//,elementPathEnabled : true
//wordCount
//,wordCount:true
//是否开启字数统计
//,maximumWords:10000
//允许的最大字符数
//字数统计提示,{#count}代表当前字数,{#leave}代表还可以输入多少字符数,留空支持多语言自动切换,否则按此配置显示
//,wordCountMsg:''
//当前已输入 {#count} 个字符,您还可以输入{#leave} 个字符
//超出字数限制提示
留空支持多语言自动切换,否则按此配置显示
//,wordOverFlowMsg:''
//&span style="color:"&你输入的字符个数已经超出最大允许值,服务器可能会拒绝保存!&/span&
//点击tab键时移动的距离,tabSize倍数,tabNode什么字符做为单位
//,tabSize:4
//,tabNode:'&'
//removeFormat
//清除格式时可以删除的标签和属性
//removeForamtTags标签
//,removeFormatTags:'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var'
//removeFormatAttributes属性
//,removeFormatAttributes:'class,style,lang,width,height,align,hspace,valign'
//可以最多回退的次数,默认20
//,maxUndoCount:20
//当输入的字符数超过该值时,保存一次现场
//,maxInputCount:1
//autoHeightEnabled
// 是否自动长高,默认true
//,autoHeightEnabled:true
//scaleEnabled
//是否可以拉伸长高,默认true(当开启时,自动长高失效)
//,scaleEnabled:false
//,minFrameWidth:800
//编辑器拖动时最小宽度,默认800
//,minFrameHeight:220
//编辑器拖动时最小高度,默认220
//autoFloatEnabled
//是否保持toolbar的位置不动,默认true
//,autoFloatEnabled:true
//浮动时工具栏距离浏览器顶部的高度,用于某些具有固定头部的页面
//,topOffset:30
//编辑器底部距离工具栏高度(如果参数大于等于编辑器高度,则设置无效)
//,toolbarTopOffset:400
//pageBreakTag
//分页标识符,默认是_ueditor_page_break_tag_
//,pageBreakTag:'_ueditor_page_break_tag_'
//autotypeset
//自动排版参数
//,autotypeset: {
mergeEmptyline: true,
//合并空行
removeClass: true,
//去掉冗余的class
removeEmptyline: false,
//去掉空行
textAlign:"left",
//段落的排版方式,可以是 left,right,center,justify 去掉这个属性表示不执行排版
imageBlockLine: 'center',
//图片的浮动方式,独占一行剧中,左右浮动,默认: center,left,right,none 去掉这个属性表示不执行排版
pasteFilter: false,
//根据规则过滤没事粘贴进来的内容
clearFontSize: false,
//去掉所有的内嵌字号,使用编辑器默认的字号
clearFontFamily: false,
//去掉所有的内嵌字体,使用编辑器默认的字体
removeEmptyNode: false,
// 去掉空节点
//可以去掉的标签
removeTagNames: {标签名字:1},
indent: false,
// 行首缩进
indentValue : '2em',
//行首缩进的大小
bdc2sb: false,
tobdc: false
//tableDragable
//表格是否可以拖拽
//,tableDragable: true
//,disabledTableInTable:true
//禁止表格嵌套
//sourceEditor
//源码的查看方式,codemirror 是代码高亮,textarea是文本框,默认是codemirror
//注意默认codemirror只能在ie8+和非ie中使用
//,sourceEditor:"codemirror"
//如果sourceEditor是codemirror,还用配置一下两个参数
//codeMirrorJsUrl js加载的路径,默认是 URL + "third-party/codemirror/codemirror.js"
//,codeMirrorJsUrl:URL + "third-party/codemirror/codemirror.js"
//codeMirrorCssUrl css加载的路径,默认是 URL + "third-party/codemirror/codemirror.css"
//,codeMirrorCssUrl:URL + "third-party/codemirror/codemirror.css"
//编辑器初始化完成后是否进入源码模式,默认为否。
//,sourceEditorFirst:false
//iframeUrlMap
//dialog内容的路径 ~会被替换成URL,垓属性一旦打开,将覆盖所有的dialog的默认路径
//,iframeUrlMap:{
'anchor':'~/dialogs/anchor/anchor.html',
//webAppKey 百度应用的APIkey,每个站长必须首先去百度官网注册一个key后方能正常使用app功能,注册介绍,/static/cms/getapikey.html
//, webAppKey: ""
function getUEBasePath(docUrl, confUrl) {
return getBasePath(docUrl || self.document.URL || self.location.href, confUrl || getConfigFilePath());
function getConfigFilePath() {
var configPath = document.getElementsByTagName('script');
return configPath[ configPath.length - 1 ].
function getBasePath(docUrl, confUrl) {
var basePath = confU
if (/^(\/|\\\\)/.test(confUrl)) {
basePath = /^.+?\w(\/|\\\\)/.exec(docUrl)[0] + confUrl.replace(/^(\/|\\\\)/, '');
} else if (!/^[a-z]+:/i.test(confUrl)) {
docUrl = docUrl.split("#")[0].split("?")[0].replace(/[^\\\/]+$/, '');
basePath = docUrl + "" + confU
return optimizationPath(basePath);
function optimizationPath(path) {
var protocol = /^[a-z]+:\/\//.exec(path)[ 0 ],
tmp = null,
path = path.replace(protocol, "").split("?")[0].split("#")[0];
path = path.replace(/\\/g, '/').split(/\//);
path[ path.length - 1 ] = "";
while (path.length) {
if (( tmp = path.shift() ) === "..") {
res.pop();
} else if (tmp !== ".") {
res.push(tmp);
return protocol + res.join("/");
window.UE = {
getUEBasePath: getUEBasePath
3. 通过释放注释来观看效果。
(1)修改语言
//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件:
//lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,lang:"en"
//,langPath:URL +"lang/"
因为编辑器默认使用的语言是中文,那我们可以尝试改一下为英文。
//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换,当然,前提条件是lang文件夹下存在对应的语言文件:
//lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
,lang:"en"
//,langPath:URL +"lang/"
观察效果如下:
(2)修改编辑框的大小
释放以下的代码
//,initialFrameWidth:1000
//初始化编辑器宽度,默认1000
//,initialFrameHeight:320
//初始化编辑器高度,默认320
效果如下:
(3) 修改编辑器上面的工具。
修改配置项的方法:
1. 方法一:修改 ueditor.config.js 里面的 toolbars
2. 方法二:实例化编辑器的时候传入 toolbars 参数
这里我直接在ueditor.config.js里面替换了。
简单的列表
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
效果如下:
多行列表:
toolbars: [
['fullscreen', 'source', 'undo', 'redo'],
['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
效果如下:
toolbars: [
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
效果如下:
(4)其他的配置以此类推。
12345678910
12345678910
12345678910 上一篇:下一篇:文章评论相关解决方案 1234567891011 Copyright & &&版权所有

我要回帖

更多关于 html网页实现语言切换 的文章

 

随机推荐