Css 强制CKEditor将类添加到p标记

我必须配置CKEditor，为内容中的每个p标记添加一个class属性。您可以使用config.format_p执行类似的操作，但它只会将class属性应用于标记为“normal”（非默认）的文本

编辑：
我正在使用当前版本3.6.2。以下是我的配置的相关部分：

CKEDITOR.editorConfig = function( config )
{   
    config.removeFormatTags = 'b,div,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var,form,input,textarea';

    config.format_p =
    {
        element: 'p',
        attributes:
        {
            'class': 'tiny_p'
        }
    };
    config.skin = "office2003";
    config.entities_processNumerical = true;
}

---

config.format\u p

选项仅在用户从“格式”菜单选择“正常”时生效，

config.removeFormatTags

仅在用户手动单击“清除”按钮时有效。两者都应该像在TinyMCE中一样自动工作。

很好。。不确定你是否因为某些特定的原因需要。。但是如果你在展示端做了你想做的事情，生活会不会更轻松呢

例如，如果我在前端显示一些文本（从ckeditor保存），则以类似

<div class="ckcontent" > ... </div>

或

---

您可以添加html处理器过滤器

editor.dataProcessor.htmlFilter.addRules({
    elements :{
        p : function( element ){
            if ( element.className.indexOf("thiny_p") < 0){
                element.className += 'thiny_p';
            }
        }
    }
});

或者，如果textarea（源）处于活动状态

var editor= $("textarea", "#cke_editor1"); 
editor.val(editor.val().replace(/<p>/gi, "<p class='thiny_p'>"))

或

在加载编辑器的页面中

<script type="text/javascript">
//<![CDATA[
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace( 'editor1',
        {
            extraPlugins : 'customparagraph',
            toolbar :
            [
                [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                [ 'ThinyP' ]
            ]
        });
//]]>
</script>

//用编辑器
//实例，使用默认配置。
CKEDITOR.replace（'editor1'，
{
extraPlugins:'CustomParagation'，
工具栏：
[
['Bold'、'Italic'、'-'、'NumberedList'、'BulletedList'、'-'、'Link'、'Unlink']，
['ThinyP']
]
});
//]]>

---

用户必须在保存之前单击工具栏按钮

我遇到了完全相同的问题，经过一段时间的混乱之后，我终于找到了一个单行解决方案：

config.format_p = { element : 'p', attributes : { 'class' : 'yourClassName' } };

---

你所需要做的就是把这段代码放到

config.js中，它就会工作：）
什么版本的CKEditor？到目前为止你的配置是什么？@HerrSerker在我的问题中更新了这个。不，我不能在前端做任何操作。我没有访问权限，他们希望内容是这样的。这是无法改变的。。p-tags必须与类“tiny_p”一起保存。是否有办法在config.js中进行配置？因为没有我能接触到的任何东西。因此，你对jQuery的建议（可能很好）也是无可替代的。一种方法是创建插件并在init方法中添加
editor.dataProcessor.htmlFilter.addRules({…
。之后，只需在config.js中包含插件。第二种解决方案是可以的，但我认为您会有一些问题，因为当编辑的文本将被发送到服务器时，您必须钩住每一种可能的情况，并在此时应用此jquery修复程序（如果您要求我，我会尝试第一种解决方案）：）谢谢你，我明天会试试。好吧，不起作用。我有一个插件，它包含了你的脚本，放在它的init函数中，但似乎没有任何效果。没有。只是什么都没有发生。这是自动添加类“yourClaseName”还是用户必须选择“normal”？谢谢。这对我来说很有效。但我会找到一个更好的s谢谢，谢谢。
$("iframe", "#cke_editor1").contents().find("p").addClass("tiny_p");

var editor= $("textarea", "#cke_editor1"); 
editor.val(editor.val().replace(/<p>/gi, "<p class='thiny_p'>"))

CKEDITOR.plugins.add( 'customparagraph',
{
    init: function( editor )
    {
        editor.addCommand('addParagraphClassName',{
            exec : function( editor ){    
                var ps = editor.document.$.getElementsByTagName("p");
                for (var i=0; i < ps.length; i++){

                    if(ps[i].className.indexOf("thiny_p") < 0){
                        ps[i].className += "thiny_p";
                    }

                }

            }
        });

        editor.ui.addButton( 'ThinyP',{
            label: 'Appends thiny_p class',
            command: 'addParagraphClassName',
            icon: this.path + 'images/icon.gif'
        });
    }
} );

CKEDITOR.editorConfig = function( config )
{
    config.extraPlugins = "customparagraph";
    config.toolbar = [ [ 'ThinyP' ] ]; // add other toolbars and keep in mid this can be overwritten in page which loads CKEditor
};

<script type="text/javascript">
//<![CDATA[
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace( 'editor1',
        {
            extraPlugins : 'customparagraph',
            toolbar :
            [
                [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                [ 'ThinyP' ]
            ]
        });
//]]>
</script>

config.format_p = { element : 'p', attributes : { 'class' : 'yourClassName' } };