22467人阅读
UEditor 的配置项分为两类：前端配置项&和&后端配置项
后端配置项具体看这个文档L：
本文档介绍如何通过设置前端配置项，定制编辑器的特性，配置方法主要通过修改ueditor.config.js，另外在编辑器实例化的时候也可以传入配置参数
var ue = UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
autoHeightEnabled: true,
autoFloatEnabled: true
读取配置项
读取配置项可以通过getOpt方法读取
var lang = ue.getOpt('lang'); //默认返回：zh-cn
前端配置项说明
以下的&URL&是ueditor.config.js文件所在目录
UEDITOR_HOME_URL&{Path String} [默认值：根据config文件路径自动获取] // 为编辑器实例添加一个路径，这个不能被注释
serverUrl&{Path String} [默认值：URL + &php/controller.php&] // 服务器统一请求接口路径
toolbars&{2d Array} //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
labelMap&{Object} [默认：从lang包的labelMap项获取] //参数格式是键值对，键名对应toolbar参数的项：{&bold&: &加粗&}
]，当鼠标放在工具栏上时显示的tooltip提示，留空支持自动多语言配置，否则以配置值为准
lang&{String} [默认值：&zh-cn&] //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage
||navigator.userLanguage).toLowerCase()，语言配置项，默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
langPath&{Path String} [默认值：URL +&lang/&] //语言包文件存放目录
theme&{String} [默认值：'default'] //主题配置项，默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
themePath&{Path String} [默认值：URL +&themes/&] //现有如下皮肤：default
zIndex&{Number} [默认值：900] //编辑器在页面上的z-index层级的基数，默认是900
charset&{String} [默认值：&utf-8&] //针对getAllHtml方法，会在对应的head标签中增加该编码设置。
customDomain&{Boolean} [默认值：false] //若实例化编辑器的页面手动修改的domain，此处需要设置为true
isShow&{Boolean} [默认值：true] //默认显示编辑器
textarea&{String} [默认值：'editorValue'] // 提交表单时，服务器获取编辑器提交内容的所用的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不用每次实例化的时候都设置这个值
initialContent&{String} [默认值：'欢迎使用ueditor!'] //初始化编辑器的内容，也可以通过textarea/script给值，看官网例子
autoClearinitialContent&{Boolean} [默认值：true] //是否自动清除编辑器初始内容，注意：如果focus属性设置为true，这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
focus&{Boolean} [默认值：false] //初始化时，是否让编辑器获得焦点true或false
initialStyle&{String} [默认值：'p{line-height:1em}']//编辑器层级的基数，可以用来改变字体等 //如果自定义，最好给p标签如下的行高，要不输入中文时，会有跳动感
iframeCssUrl&{Path String} [默认值：URL + '/themes/iframe.css'] //给编辑器内部引入一个css文件
indentValue&{String} [默认值：'2em'] //首行缩进距离，默认是2em
initialFrameWidth&{Number} [默认值：1000] //初始化编辑器宽度，默认1000
initialFrameHeight&{Number} [默认值：320] //初始化编辑器高度，默认320
readonly&{Boolean} [默认值：false] //编辑器初始化结束后，编辑区域是否是只读的，默认是false
autoClearEmptyNode&{Boolean} [默认值：true] //getContent时，是否删除空的inlineElement节点（包括嵌套的情况）
enableAutoSave&{Boolean} [默认值：true] //启用自动保存
saveInterval&{Number} [默认值：500] //自动保存间隔时间，单位ms
imageScaleEnabled&{Boolean} [默认值：true] //启用图片拉伸缩放
fullscreen&{Boolean} [默认值：false] //是否开启初始化时即全屏，默认关闭
imagePopup&{Boolean} [默认值：true] //图片操作的浮层开关，默认打开
autoSyncData&{Boolean} [默认值：true] //自动同步编辑器要提交的数据
emotionLocalization&{Boolean} [默认值：false] //是否开启表情本地化，默认关闭。若要开启请确保emotion文件夹下包含官网提供的images表情文件夹
retainOnlyLabelPasted&{Boolean} [默认值：false] //粘贴只保留标签，去除标签所有属性
pasteplain&{Boolean} [默认值：false] //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
filterTxtRules&{Object} //纯文本粘贴模式下的过滤规则
//默认值：
function() {
function transP(node) {
node.tagName = 'p';
node.setStyle();
//直接删除及其字节点内容
'-': 'script style object iframe embed input select',
'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();
if (txt) {
node.parentNode.insertAfter(UE.uNode.createText(' & &'), node);
node.parentNode.removeChild(node, node.innerText())
allHtmlEnabled&[默认值：false] //提交到后台的数据是否包含整个html字符串
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': '' , //'A,B,C'
'upper-roman': '' //'I,II,III...'
insertunorderedlist&//无序列表的下拉配置，值留空时支持多语言自动识别，若配置值，则以此值为准
{ //自定的样式
'dash': '— 破折号', //-破折号
'dot': ' 。 小圆圈', //系统自带
'circle': '', // '○ 小圆圈'
'disc': '', // '● 小圆点'
'square': '' //'■ 小方块'
listDefaultPaddingLeft&[默认值：'30'//默认的左边缩进的基数倍
listiconpath&[默认值：'/listicon/']//自定义标号的路径
maxListLevel&[默认值：3] //限制可以tab的级数， 设置-1为不限制
autoTransWordToList&[默认值：false] //禁止word中粘贴进来的列表自动变成列表标签
fontfamily&//字体设置 label留空支持多语言自动切换，若配置，则以配置值为准
//默认值：
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&{Array} //字号
//默认值：
[10, 11, 12, 14, 16, 18, 20, 24, 36]
paragraph&{Object} //段落格式 值留空时支持多语言自动识别，若配置，则以配置值为准
//默认值：
rowspacingtop&{Array} //段间距 值和显示的名字相同
//默认值：
['5', '10', '15', '20', '25']
rowspacingbottom&//段间距 值和显示的名字相同
//默认值：
['5', '10', '15', '20', '25']
lineheight&[默认值：['1', '1.5','1.75','2', '3', '4', '5'] ] //行内间距 值和显示的名字相同
customstyle&[Array] //自定义样式，不支持国际化，此处配置值即可最后显示值block的元素是依据设置段落的逻辑设置的，inline的元素依据BIU的逻辑设置，尽量使用一些常用的标签
//默认值：
tag: 'h1', //tag 使用的标签名字
name: 'tc', //
label: '', //label 显示的名字也是用来标识不同类型的标识符，注意这个值每个要不同
style: 'border-bottom:#ccc 2padding:0 4px 0 0;text-align:margin:0 0 20px 0;' //style 添加的样式
}, //每一个对象就是一个自定义的样式
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&{Boolean} [默认值：true] //打开右键菜单功能
contextMenu&{Object} //右键菜单的内容，可以参考plugins/contextmenu.js里边的默认菜单的例子，label留空支持国际化，否则以此配置为准
//默认值：
label: '', //显示的名称
cmdName: 'selectall', //执行的command命令，当点击这个右键菜单时
exec: function() { //exec可选，有了exec就会在点击时执行这个function，优先级高于cmdName
//this是当前编辑器的实例
//this.ui._dialogs['inserttableDialog'].open();
shortcutMenu&{Array} //快捷菜单
//默认值
[&fontfamily&, &fontsize&, &bold&, &italic&, &underline&, &forecolor&, &backcolor&, &insertorderedlist&, &insertunorderedlist&]
elementPathEnabled&{Boolean} [默认值：true] //是否启用元素路径，默认是显示
wordCount&{Boolean} [默认值：true] //是否开启字数统计
maximumWords&{Number} [默认值：10000] //允许的最大字符数wordCountMsg&{String} [默认值：] //当前已输入 {#count} 个字符，您还可以输入{#leave} 个字符，字数统计提示，{#count}代表当前字数，{#leave}代表还可以输入多少字符数，留空支持多语言自动切换，否则按此配置显示
\\默认值：
'当前已输入{#count}个字符, 您还可以输入{#leave}个字符。 '
wordOverFlowMsg&{String} [默认值：] //超出字数限制提示 留空支持多语言自动切换，否则按此配置显示
\\默认值：
'&span style=&color:&&你输入的字符个数已经超出最大允许值，服务器可能会拒绝保存！&/span&'
tabSize&{Number} [默认值：4] //点击tab键时移动的距离，tabSize倍数，tabNode什么字符做为单位
tabNode&{String} [默认值：'&']
removeFormatTags&//清除格式时可以删除的标签和属性
//默认值：
'b,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var'
removeFormatAttributes&[默认值：'class,style,lang,width,height,align,hspace,valign'
maxUndoCount&{Number} [默认值：20] //undo操作，可以最多回退的次数，默认20
maxInputCount&{Number} [默认值：1] //undo操作，当输入的字符数超过该值时，保存一次现场
autoHeightEnabled&{Boolean} [默认值：true] //是否自动长高，默认true
scaleEnabled&{Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
minFrameWidth&{Number} [默认值：800] //编辑器拖动时最小宽度，默认800
minFrameHeight&{Number} [默认值：220] //编辑器拖动时最小高度，默认220
autoFloatEnabled&[默认值：true] //是否保持toolbar的位置不动，默认true
topOffset&[默认值：30] //浮动时工具栏距离浏览器顶部的高度，用于某些具有固定头部的页面
toolbarTopOffset&[默认值：400] //编辑器底部距离工具栏高度(如果参数大于等于编辑器高度，则设置无效)
pageBreakTag&[默认值：'ueditorpagebreaktag']
//分页标识符，默认是ueditorpagebreaktag
autotypeset&{Object} //自动排版参数 默认值：
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&{Boolean} [默认值：true] //表格是否可以拖拽
disabledTableInTable&{Boolean} [默认值：true] //禁止表格嵌套
sourceEditor&{String} [默认值：&codemirror&] //源码的查看方式，codemirror是代码高亮，textarea是文本框，默认是codemirror，注意默认codemirror只能在ie8+和非ie中使用
codeMirrorJsUrl&{Path String} [默认值：URL + &third-party/codemirror/codemirror.js&]
//如果sourceEditor是codemirror需要配置这项，codeMirror js加载的路径
codeMirrorCssUrl&{Path String} [默认值：URL + &third-party/codemirror/codemirror.css&]
//如果sourceEditor是codemirror需要配置这项，codeMirror css加载的路径
sourceEditorFirst&{String} [默认值：false] //编辑器初始化完成后是否进入源码模式，默认为否。
iframeUrlMap&{Object} //dialog内容的路径 ～会被替换成URL，垓属性一旦打开，将覆盖所有的dialog的默认路径
//默认值：
'anchor': '~/dialogs/anchor/anchor.html',
webAppKey&{String} //webAppKey 百度应用的APIkey，每个站长必须首先去百度官网注册一个key后方能正常使用app功能，注册介绍，/static/cms/getapikey.html
allowDivTransToP&{Boolean} 默认会将外部进入的html数据中的Div标签转换成P标签，外部进入的数据包括粘贴和调用setContent接口进入编辑器的数据。如果设置成false将不在做这个转换。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：619887次
积分：6815
积分：6815
排名：第2817名
原创：96篇
转载：341篇
评论：51条
(3)(1)(3)(1)(4)(2)(24)(20)(22)(22)(14)(27)(38)(47)(4)(15)(7)(6)(5)(2)(3)(1)(1)(1)(1)(2)(18)(2)(7)(1)(1)(2)(1)(3)(3)(2)(2)(2)(2)(2)(3)(13)(2)(4)(6)(4)(22)(18)(12)(34)(1)60047人阅读
【前端】（20）
& & 最近刚被分配了以个消息发布的任务，其中用到了富文本编辑器。以前也用过，不过这次我选择的是百度富文本编辑器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步，其实每一步都很简单了。为了让小伙伴们看得更清楚些，来张效果图吧：& & 效果还不错吧，其实，看起来复杂的功能，实现起来却很简单。而简单的功能，实现起来可能会很复杂。我们不只是使用那么看起来复杂，使用起来简单的各种开源组件，更要学习，如何把复杂的功能封装起来，对外提供简单的接口，让别人也能简单使用。&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1215250次
积分：17054
积分：17054
排名：第469名
原创：203篇
转载：19篇
译文：10篇
评论：3044条
文章：16篇
阅读：77669
阅读：28913
阅读：16450
文章：16篇
阅读：136385
阅读：23341
文章：12篇
阅读：41305
(2)(2)(1)(1)(1)(1)(15)(7)(2)(1)(2)(4)(4)(4)(4)(4)(4)(4)(4)(5)(4)(4)(4)(4)(4)(4)(4)(5)(4)(4)(4)(4)(4)(4)(4)(5)(4)(4)(4)(4)(4)(3)(4)(4)(4)(4)(9)(4)(6)(5)(2)(12)(15)3007人阅读
首先弹出的是easyui-dialog,在里面加载了百度的ueditor,当用户点击插入图片时，却显示上图，被dialog遮挡。
找到引用的ueditor js文件，例我引用的是ueditor.all.min.js
打开此文件，在里面搜索zIndex，然后将数值改成9999即可
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：9014次
排名：千里之外
评论：10条
(1)(3)(1)(1)(1)(1)& & & & 最近需要使用到网页后台富文本编辑器。经过同学推荐，最后决定使用百度家的Ueditor.
官方地址：
贴吧地址：
官方提供了网页上非常方便的自定义工具栏的功能。自定义之后直接下载对应的代码包并按照文档部署到项目中即可。其中主要的问题是路径的配置。
首先是将下载好的代码包发布到我们项目的根目录下面。然后在需要添加富文本编辑器的页面头部添加如下代码：
[javascript]&
&script&type="text/javascript"&src="相对该文档的路径/ueditor/ueditor.config.js"&&/script&&&
&script&type="text/javascript"&src="相对该文档的路径/ueditor/ueditor.all.js"&&/script&&&
&script&&&
&span&style="white-space:pre"&&&&/span&window.UEDITOR_HOME_URL&=&"/项目相对网址池绝对路径/ueditor";&&
&/script&&&
配置路径这一块是非常重要的。特别是下面的Ueditor的路径，是相对我们整个代码库的目录的。
配置完成之后，直接在我们网页中的&textarea&标签下面添加ueditor的初始化代码：
[javascript]&
&script&type="text/javascript"&&&
&&&&var&editor&=&new&UE.ui.Editor({initialFrameHeight:100,initialFrameWidth:400&});&&
&&&&&&&&editor.render("actDescribe");&&
&/script&&&
官方的文档并没有给出如何设置ueditor的宽度和高度的说明。这是我在网上网友那里找到的解决方法。在声明编辑器的变量的时候，在参数列表中添加对initialFrameHeight和initialFrameWidth的设置即可。注意，数值后面不需要添加px。
可是，这种方法有时候奏效有时候也不奏效，因为我碰过一种情况就是无论如何调整initialHeight和initialWidth的数值，编辑器的大小都还是不会改变。这个时候，我发现，可以通过调整editor所跟随的textarea的宽高来撑开editor的大小。这也是一种方法，各位同学在官方说明文档出来之前可以两种方法都尝试一下。
当然，好用的文本编辑器还是有很多的，例如kindeditor，之前准备使用这个的，而其文档方面也比较齐全，同时，整个编辑器的size也比较小，对网页的加载速度比较有利。百度的Ueditor还是有点庞大。加载时会有卡顿的速度。估计是我对底层代码的研究不够，多了很多不必要的内容。慢慢研究或许可以使得Ueditor变小。
阅读(...) 评论()