ueditor 编辑器增加css样式_UEditor踩坑记：解决自动添加<p>标签的方法

为了在UEditor编辑器中增加CSS样式，可以通过以下步骤来实现：

1. 打开UEditor的配置文件，一般来说是config.js文件。
2. 在“UEDITOR_CONFIG”对象中添加如下代码：

// 自定义样式
    , 'customstyle':[
        {
            tag:'h1', 
            name:'tc f-26 lh-66',
            label:'大标题',
            style:'border-bottom:2px solid #000;font-size:26px;padding:26px 10px 10px;margin:10px 0 20px;'
        },
        {
            tag:'h2', 
            name:'tc f-20 lh-48',
            label:'中标题',
            style:'border-bottom:1px solid #ccc;font-size:20px;padding:10px;margin:10px 0 15px;'
        },
        {
            tag:'p', 
            name:'tc f-14 lh-30',
            label:'段落',
            style:'font-size:14px;line-height:30px;padding:10px;margin:10px 0;'
        }
    ]

以上代码中，我们定义了三种自定义样式：大标题、中标题和段落。其中，每种样式都包括了标签、名称、标签显示的文字和CSS样式。

3. 在配置文件中找到“UEDITOR_CONFIG.toolbars”对象，找到需要使用自定义样式的工具栏按钮，例如“字号”按钮，将其配置修改为：

['fontfamily', 'fontsize', '|', 'customstyle', 'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'insertimage', 'insertvideo', '|', 'removeformat', 'source']

4. 保存配置文件，重新加载页面，即可在编辑器中看到自定义样式按钮。选中需要应用样式的文本，点击对应的按钮即可。

至于自动添加<p>标签的问题，可以在配置文件中找到“UEDITOR_CONFIG.filterRules”对象，将其中的“p”标签过滤规则删除即可。具体代码如下：

, filterRules: {
        // <!-- 过滤的标签 -->
        tagNames: {
            style: true,
            script: true,
            div: 1,
            p: 1
        },
        ...
    }

将其中的“p: 1”删除即可。