强制CKEditor将类添加到p-tags

时间:2011-10-20 13:03:46

标签: css ckeditor

我必须配置CKEditor为内容中的每个p-tag添加一个class-attribute。您可以使用config.format_p执行类似的操作,但它只会将class-attribute应用于标记为“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_p选项仅在用户从格式菜单中选择“正常”时生效,config.removeFormatTags仅在用户手动点击清洁按钮时才有效。两者都应该像在TinyMCE中一样自动工作。

3 个答案:

答案 0 :(得分:10)

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

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

此外,如果在将内容发送到服务器之前不需要将其创建为ckedito插件,则可以使用jQuery更改内容

$("iframe", "#cke_editor1").contents().find("p").addClass("tiny_p");

或者,如果textarea(来源)是活跃的

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

你应该调整一点.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'
        });
    }
} );

将其放入plugins/customparagraph/plugin.js 还可以创建图标图像plugins/customparagraph/images/icon.gif

在配置中,您必须添加以下配置选项config.js of CKEdito installation

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
};

在加载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>

用户必须在保存

之前单击工具栏按钮

答案 1 :(得分:3)

嗯..不确定你是否因某些特定原因需要它...但如果你在显示器端做你想做的事情,生活会不会轻松得多?

就像我在前端显示一些文本(从ckeditor保存)一样,显示类似

的内容
<div class="ckcontent" > ... </div>

所有

 <p>
其中的

标签可以通过符号应用样式或应用jquery:

 .ckcontent p { margin-left:5px;........ }

OR

 $('.ckcontent p').addClass('ckparagraphs');

答案 2 :(得分:-1)

我遇到了完全相同的问题,经过一段时间的捣乱,我终于找到了一个单线解决方案:

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

您需要做的就是将此代码放在config.js中,它将起作用:)