百度UEditor编辑器自定义标题样式修改教程

因为自己运营的某个网站后台编辑器使用的是百度UEditor，用这个编辑器自带功能给文章可以加四个自带标题样式，但这个标题样式令人难以满意，故决定自己动手修改。从网上搜索教程，发现可能涉及到两个文件的修改，一个是该编辑器目录下editor/ueditor.config.js另一个是lang/zh-cn/zh-cn.js文件。经过测试发现，不用修改zh-cn.js文件，只需要修改ueditor.config.js文件即可。找到如下代码

       //,'customstyle':[
        //    {tag:'h1', name:'tc', label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'},
        //    {tag:'h1', name:'tl',label:'', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'},
        //    {tag:'span',name:'im', label:'', style:'font-style:italic;font-weight:bold'},
        //    {tag:'span',name:'hi', label:'', style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'}
        //]

上面代码就是这四行标题样式，自己可以在这里任意修改和增加样式，本人也搞不懂为什么这些地方都是注释掉的（或许哪里默认的？），修改后必须去掉注释代码，然后上传覆盖文件，清理浏览器缓存即可生效。

        ,'customstyle':[
           {tag:'span', name:'tc', label:'titlecenter', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;text-align:center;margin:0 0 20px 0;'},
           {tag:'span', name:'tl',label:'titleleft', style:'border-bottom:#ccc 2px solid;padding:0 4px 0 0;margin:0 0 10px 0;'},
           {tag:'span',name:'im', label:'titleblack', style:'font-style:italic;font-weight:bold'},
           {tag:'span',name:'hi', label:'titleblue', style:'font-style:italic;font-weight:bold;color:rgb(51, 153, 204)'},
        {tag:'span',name:'wsy', label:'titlewsy', style:'font-weight:bold;color:rgb(51, 153, 204)'}
        ]

这里lable我都改为英文了，如果用中文，则前台这个标题内联css样式中会出现恶心的中文。