百度UEditor本地化配置 笔记

一、修改默认字体

我将默认字体修改为：

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自动将空格转义、转换成' '的问题）

  解决办法，在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';      } });