百度编辑器Ueditor内容编辑自动套P标签,及p标签替换和增加字体的修改方法

  • 时间:2018-02-01 15:00 编辑:佚名 来源:源码家 阅读:1342
  • 扫一扫,手机访问
摘要:这篇文章主要介绍了百度编辑器 ueditor 内容编辑自动套P标签,及p标签 替换,增加字体的修改方法,有时候我们需要为编辑器多加几种字体,那么就可以参考下面的方法,需要的朋友可以参考下。

这篇文章主要介绍了百度编辑器 ueditor 内容编辑自动套P标签,及p标签 替换,增加字体的修改方法,有时候我们需要为编辑器多加几种字体,那么就可以参考下面的方法,需要的朋友可以参考下

 

如图,红框为回车键和shift+回车 :

====>>>>

 

ueditor.all.js:

1:

搜索修改成falseallowDivTransToP: false

再搜索并修改以下:


1

2

3

4

5

//编辑器不能为空内容

 

if (domUtils.isEmptyNode(me.body)) {

me.body.innerHTML = '<div>' + (browser.ie ? '' : '<br/>') + '</div>';

}

2.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

//给文本或者inline节点套p标签

      if (me.options.enterTag == 'p') {

 

        var child = this.body.firstChild, tmpNode;

        if (!child || child.nodeType == 1 &&

          (dtd.$cdata[child.tagName] || isCdataDiv(child) ||

            domUtils.isCustomeNode(child)

            )

          && child === this.body.lastChild) {

          this.body.innerHTML = '<div>' + (browser.ie ? ' ' : '<br/>') + '</div>' + this.body.innerHTML;

 

        } else {

          var p = me.document.createElement('div');

          while (child) {

            while (child && (child.nodeType == 3 || child.nodeType == 1 && dtd.p[child.tagName] && !dtd.$cdata[child.tagName])) {

              tmpNode = child.nextSibling;

              p.appendChild(child);

              child = tmpNode;

            }

            if (p.firstChild) {

              if (!child) {

                me.body.appendChild(p);

                break;

              } else {

                child.parentNode.insertBefore(p, child);

                p = me.document.createElement('div');

              }

            }

            child = child.nextSibling;

          }

        }

      }

 

以上类似的有好几处,将p 改为 div

3

上代码框中 if (me.options.enterTag == 'p') 这个P根据以下开关来走

enterTag: 'p',//改后为回车换行增加br,不改为换行增加div

4

//进入编辑器的li要套p标签,我不需要套P,注释掉吧

1

2

3

4

5

6

//进入编辑器的li要套p标签

  /*这里开始注释掉 me.addInputRule(function(root){

    utils.each(root.getNodesByTagName('li'),function(li){

      var tmpP = UE.uNode.createElement('p');

      for(var i= 0,ci;ci=li.children[i];){

        if(ci.type == 'text' || dtd.p[ci.tagName]){

5:以下找到并注释

1

2

//注释掉,这个是自动给ul增加一个内置的样式,如<ul class=" list-paddingleft-2">

node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type;

 

1

2

//注释掉,这个是自动给ul增加一个内置的样式,如<ul class=" list-paddingleft-2">

node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type;

 

自动套P标签,及p标签替换到此就完成了

 

Ueditor本身自带11种字体

 

使用过程中这11种字体往往不能满足我们的需求,现在我要添加“仿宋”和“仿宋GB2312”两种字体

过程如下:

1、找到文件 ueditor/lang/zh-cn/zh-cn.js ,找到其中的fontfamily节点,添加“仿宋”和“仿宋GB2312

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

'fontfamily':{

   'songti': '宋体',

   'SimSun': '仿宋',

   'FangSong_GB2312': '仿宋_GB2312',

   'kaiti':'楷体',

   'heiti':'黑体',

   'lishu':'隶书',

   'yahei':'微软雅黑',

   'andaleMono':'andale mono',

   'arial': 'arial',

   'arialBlack':'arial black',

   'comicSansMs':'comic sans ms',

   'impact':'impact',

   'timesNewRoman':'times new roman'

 },

2、找到文件ueditor\ueditor.config.js文件(网上也看到一说是ueditor\editor_config.js文件,可能版本问题),找到其中被注释掉的fontfamily节点,去掉该节点的注释,添加“仿宋”和“仿宋GB2312

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//fontfamily

   //字体设置 label留空支持多语言自动切换,若配置,则以配置值为准

       ,'fontfamily':[

         { label: '', name: 'songti', val: '宋体,SimSun' },

         { label: '', name: 'SimSun', val: '仿宋,SimSun' },

         { label:'',name:'FangSong_GB2312',val:'仿宋_GB2312 ,FangSong_GB2312'},

         { 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]

添加好的效果图:

可以看到,仿宋和仿宋GB2312被成功添加上去了

最后,附上部分中文字体的英文名,方便添加字体

华文细黑:STHeiti Light [STXihei]

华文黑体:STHeiti

华文楷体:STKaiti

华文宋体:STSong

华文仿宋:STFangsong

俪黑 ProLiHei Pro Medium

俪宋 ProLiSong Pro Light

标楷体:BiauKai

苹果俪中黑:Apple LiGothic Medium

苹果俪细宋:Apple LiSung Light

新细明体:PMingLiU

细明体:MingLiU

标楷体:DFKai-SB

黑体:SimHei

宋体:SimSun

新宋体:NSimSun

仿宋:FangSong

楷体:KaiTi

仿宋_GB2312FangSong_GB2312

楷体_GB2312KaiTi_GB2312

微软正黑体:Microsoft JhengHei

微软雅黑体:Microsoft YaHei

隶书:LiSu

幼圆:YouYuan

华文细黑:STXihei

华文楷体:STKaiti

华文宋体:STSong

华文中宋:STZhongsong

华文仿宋:STFangsong

方正舒体:FZShuTi

方正姚体:FZYaoti

华文彩云:STCaiyun

华文琥珀:STHupo

华文隶书:STLiti

华文行楷:STXingkai

华文新魏:STXinwe

 

  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【源码编程|mssql2005】win2003 Server配置SQL Server 2005远程连接的方法(2018-06-15 21:15)
【源码编程|mssql2005】SQLServer2005 没有服务器名称的两种解决方法(2018-06-15 21:15)
【源码编程|mssql2005】在WIN7下安装和配置SQL Server 2005 Express Edition(精简版)(2018-06-15 21:15)
【源码编程|mssql2005】Access 导入到SQL Server 2005的方法小结(2018-06-15 21:15)
【源码编程|mssql2005】SQL2005Express中导入ACCESS数据库的两种方法(2018-06-15 21:15)
【源码编程|mssql2005】SQL Server 使用 SET FMTONLY ON 获得表的元数据(2018-06-15 21:15)
【源码编程|mssql2005】把CSV文件导入到SQL Server表中的方法(2018-06-15 21:15)
【源码编程|mssql2005】SQL Server中TRUNCATE事务回滚操作方法(2018-06-15 21:15)
【源码编程|mssql2005】SQL Server 2005恢复数据库详细图文教程(2018-06-15 21:15)
【源码编程|mssql2005】SQL Server 移动系统数据库(2018-06-15 21:14)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明
CopyRight 2014-2024 【源码家】 | 豫ICP备17010181号
展开