1. 技术文章
  2. 百度UEditor本地化配置 笔记

百度UEditor本地化配置 笔记

由 拥有回忆 提交于 2019-12-04 07:15:35

一、修改默认字体

我将默认字体修改为：

1
2
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：

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


二、本地化list

官方的说明如下：

1
2
3
4
5
6
7
8
9
10
列表文件本地化使用说明：
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段改成如下：

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



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


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


在ueditor.parse.js中的table样式为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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样式为：

1
2
3
4
5
6
7
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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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中加上了下面一段：

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

在table中，改动了下面两处：

1
2
3
4
5
6
7
8
9
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方法修改为：

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


七、与bootstrap整合

注释掉预设的pre样式（采用bootstrap自带的样式），修改ueditor.all.js，找到insertcode，大概在13124行，注释掉：

1
2
3
//    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。修改如下：

1
2
3
4
5
6
7
( 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的代码如下：

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

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

1
2
3
4
5
.view {
  background-color: #C7EDCC;
  font-size: 18px;
  line-height: 1.8;
}


九、设置html过滤

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

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

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

2、我注释掉了如下几行代码，以便支持 font-awesome 图标（例如：星星图标）

1
2
3
4
5
6
7
8
9
10
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';
    }
});
标签
Ueditor
background
border
本地化
padding
table
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!