百度UEditor本地化配置 笔记
2015年06月24日


一、修改默认字体

我将默认字体修改为:

font-family: "Helvetica Neue", "Helvetica", "Microsoft YaHei",
    "WenQuanYi Micro Hei", "Hiragino Sans GB", Simsun, Arial, sans-serif;

需要做的工作如下:

1)在/themes/iframe.css文件中,添加body字体。

2)在/dialogs/preview/preview.html文件中,注释掉css:#preview *{font-family:sans-serif;font-size:16px;},并且引入iframe.css:

<link rel="stylesheet" type="text/css" href="../../themes/iframe.css">
        <title></title>


二、本地化list

官方的说明如下:

列表文件本地化使用说明:
1、解压放到你的themes/文件夹下(可以按照需求放置路径)
2、修改editor_config.js文件,修改listiconpath配置项:
    listiconpath : URL+'themes/ueditor-list/'  //如果是自己的目录,请使用  '/'开头的绝对路径
3、在发布文章的页面,引用uparse.js,并运行 uParse 函数,传入列表路径:
    <script type="text/javascript">
    uParse('.content',{
        'liiconpath':'/UTest/ueditor/themes/ueditor-list/'    //使用 '/' 开头的绝对路径
    })
    </script>

在第3步中,每次都要制定liiconpath,而编辑文章预览时,并没有配置此项,解决方法:

  找到/dialogs/preview/preview.html文件,把里面的uParse段改成如下:

uParse('#preview',{
            rootPath : '../../',
            liiconpath: '../../themes/ueditor-list/',
            chartContainerHeight:500
        })



三、解决table样式编辑和预览时不一致的BUG


BUG说明:UEditor有两段重复的代码——ueditor.parse.js的内容在ueditor.all.js里面基本上重复了一遍。前者用于发布或预览文章时,对html内容进行渲染(二次加工),后者用于初始化编辑器时,为编辑窗口提供样式等支持。


ueditor.parse.js中的table样式为:

UE.parse.register('table', function (utils) {
    ...
	var selector = this.selector;
	//追加默认的表格样式
	utils.cssRule('table',
		selector + ' table.noBorderTable td,' +
			selector + ' table.noBorderTable th,' +
			selector + ' table.noBorderTable caption{border:1px dashed #ddd !important}' +
			selector + ' table.sortEnabled tr.firstRow th,' + selector + ' table.sortEnabled tr.firstRow td{padding-right:20px; background-repeat: no-repeat;' +
				'background-position: center right; background-image:url(' + this.rootPath + 'themes/default/images/sortable.png);}' +
			selector + ' table.sortEnabled tr.firstRow th:hover,' + selector + ' table.sortEnabled tr.firstRow td:hover{background-color: #EEE;}' +
			selector + ' table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
			selector + ' td,' + selector + ' th{ background:white; padding: 5px 10px;border: 1px solid #DDD;}' +
			selector + ' caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
			selector + ' th{border-top:1px solid #BBB;background:#F7F7F7;}' +
			selector + ' table tr.firstRow th{border-top:2px solid #BBB;background:#F7F7F7;}' +
			selector + ' tr.ue-table-interlace-color-single td{ background: #fcfcfc; }' +
			selector + ' tr.ue-table-interlace-color-double td{ background: #f7faff; }' +
			selector + ' td p{margin:0;padding:0;}',
		document);

大约在源码的第386行。

而ueditor.all.js里面,定义的table样式为:

me.ready(function () {
	//添加表格可排序的样式
	utils.cssRule('tablesort',
		'table.sortEnabled tr.firstRow th,table.sortEnabled tr.firstRow td{padding-right:20px;background-repeat: no-repeat;background-position: center right;' +
			' background-image:url(' + me.options.themePath + me.options.theme + '/images/sortable.png);} ' + 
			'table.sortEnabled tr.firstRow th:hover,table.sortEnabled tr.firstRow td:hover{background-color: #EEE;}',
		me.document);
me.ready(function () {
	utils.cssRule('table',
	//选中的td上的样式
	'.selectTdClass{background-color:#edf5fa !important}' +
		'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' +
		//插入的表格的默认样式
		'table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
		'td,th{background: white;padding: 5px 10px;border: 1px solid #DDD;}' +
		'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
		'th{border-top:1px solid #BBB;background-color:#F7F7F7;}' +
		'table tr.firstRow th{border-top-width:2px;background: #F7F7F7;}' +
		'.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }' + 'td p{margin:0;padding:0;}', me.document);

	var tableCopyList, isFullCol, isFullRow;

上面的代码已经是我更正过后的,我在tablesort中加上了下面一段:

table.sortEnabled tr.firstRow th:hover,table.sortEnabled tr.firstRow td:hover{
  background-color: #EEE;
}

在table中,改动了下面两处:

td,th {
  background: white;
  padding: 5px 10px;
  border: 1px solid #DDD;
}
table tr.firstRow th {
  border-top: 2px solid #BBB;
  background: #F7F7F7;
}


六、解决table编辑时和发布时高度不一致的问题(实际上是ueditor自动将空格转义、转换成'&nbsp;'的问题)

  解决办法,在ueditor.all.js  大约8696行  isText方法修改为:

function isText(node, arr) {
    arr.push(node.data);
}


七、与bootstrap整合

注释掉预设的pre样式(采用bootstrap自带的样式),修改ueditor.all.js,找到insertcode,大概在13124行,注释掉:

//    me.ready(function(){
//        utils.cssRule('pre','pre{margin:.5em 0;padding:.4em .6em;border-radius:8px;background:#f8f8f8;}',me.document)
//    });

给编辑器引入boostrap的css和js,修改ueditor.all.js,搜索 'http://www.w3.org/1999/xhtml'  找到大概6898行的位置,加上bootstrap的css和js。修改如下:

( options.iframeCssUrl ? '<link rel=\'stylesheet\' href=\'http://cdn.staticfile.org/twitter-bootstrap/3.3.0/css/bootstrap.min.css\'>' +
'<link rel=\'stylesheet\' href=\'http://cdn.staticfile.org/font-awesome/4.2.0/css/font-awesome.min.css\'>' +
'<link rel=\'stylesheet\' href=\'../themes/base.css\'>' +
'<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils....'

...
"var _tmpScript = document....<script type=\'text/javascript\' src=\'...js/jquery-1.10.2.min.js\'></script><script type=\'text/javascript\' src=\'.../js/bootstrap.min.js\'></script></html>";



八、统一编辑器和发布后的背景颜色

    修改ueditor.all.js,大约在10803行,修改正则表达式reg的代码如下:

UE.plugin.register('background', function () {
    var me = this,
        cssRuleId = 'editor_background',
        isSetColored,
        reg = new RegExp('\.view[\\s]*\\{(.+)\\}', 'i'); //body改成\.view
function setBackground(obj) {
    if (obj) {
        ...
        // body 改成.view
        utils.cssRule(cssRuleId, styles.length ? ('.view{' + styles.join("") + '}') : '', me.document);
    } else {

这样修改后,就可以由外部定义.view背景,去重载body的背景。例如,我定义的编辑器默认颜色为 淡豆沙护眼色:

.view {
  background-color: #C7EDCC;
  font-size: 18px;
  line-height: 1.8;
}


九、设置html过滤

1、主要有三个选项,其中后两个是我自己增加的:

,allowDivTransToP: false // 设置成true,div标签会自动转换成p标签
,addPInLi: true //设置成true,表示自动给li内部增加p标签
,removeLiStyle: true //设置成true,表示会自动去除li的样式

后两个在ueditor.all.js里面可以搜索到。

2、我注释掉了如下几行代码,以便支持 font-awesome 图标(例如:星星图标

utils.each(root.getNodesByTagName('b i'),function(node){
    switch (node.tagName){
        case 'b':
            node.tagName = 'strong';
            break;
        // ADD BY ZOLLTY
        //case 'i':
        //    node.tagName = 'em';
    }
});


十、解决粘贴word文档图片上传问题


现象:

    chrome浏览器下,ueditor粘贴word文档,自动上传word文档中的图片报错:

Not allowed to load local resource


    文档中的图片路径全部被替换成:

themes/default/images/spacer.gif

    实际路径类似于:

<img width="554" height="269" src="file:///C:/Users/zollty/AppData/Local/Temp/msohtmlclip1/01/clip_image038.jpg"/>


解决方法为:

  1、避免图片路径被替换成themes/default/images/spacer.gif,

    在 ueditor.all.js 中搜索:wordimage,将如下代码注释掉:

inputRule : function (root) {
    /* utils.each(root.getNodesByTagName('img'), function (img) {
        var attrs = img.attrs,
            flag = parseInt(attrs.width) < 128 || parseInt(attrs.height) < 43,
            opt = me.options,
            src = opt.UEDITOR_HOME_URL + 'themes/default/images/spacer.gif';
        if (attrs['src'] && /^(?:(file:\/+))/.test(attrs['src'])) {
            img.setAttr({
                width:attrs.width,
                height:attrs.height,
                alt:attrs.alt,
                word_img: attrs.src,
                src:src,
                'style':'background:url(' + ( flag ? opt.themePath + opt.theme + '/images/word.gif' : opt.langPath + opt.lang + '/images/localimage.png') + ') no-repeat center center;border:1px solid #ddd'
            })
        }
    }) */
}

  2、手动将图片上传到网站 image目录,然后手动全局替换 粘贴文章html格式里面的image src,

    替换前:

<img width="554" height="269" src="file:///C:/Users/zollty/AppData/Local/Temp/msohtmlclip1/01/clip_image038.jpg"/>

   替换后:

<img width="554" height="269" src="http://s.h230.cn/my/img/apollo-portal-usage/clip_image038.jpg"/>


如此,虽然麻烦一点,但问题很快解决。

十一、解决粘贴文档中html的id属性消失的问题


  原因是,ueditor对粘贴的文档进行了xss过滤处理。可以配置哪些属性是白名单(不需要处理),

  在ueditor.config.js 里面,搜索xss,找到如下所示:

,whitList: {
	a:      ['target', 'href', 'title', 'class', 'style'],

在上述whitList里面,为 a 标签,添加一个 id 属性即可。