强制CKEditor向p标签添加一个类

Question

强制CKEditor向p标签添加一个类

12

我必须配置CKEditor，以便将class属性添加到内容中的每个p标签中。您可以使用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_p选项仅在用户从格式菜单中选择“normal”时才会生效，config.removeFormatTags仅在用户手动单击清除按钮时起作用。两者都应该像TinyMCE一样自动工作。

- dwalldorf

CKEditor的哪个版本？你目前的配置是什么？ - yunzen

@HerrSerker 在我的问题中进行了更新。 - dwalldorf

3个回答

2

我不确定你是否有特殊需求，但如果在显示端执行想要的操作，生活会更加轻松。

比如说，如果我在前端显示一些文本（从 ckeditor 中保存），可以使用类似于

的方式进行显示。

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

And all

<p>

标签内可以通过以下方式应用样式或使用jQuery：

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

或者

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

- zarun

不，我无法在前端进行任何操作。我没有权限，他们希望内容看起来像那样。不能改变任何东西... p 标签必须以“tiny_p”类保存。 - dwalldorf

0

我曾经遇到过完全相同的问题，经过一番折腾后，我终于找到了一行解决方案：

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

你只需要把这段代码放在config.js中，它就会工作 :)

- Daniel

1

这个操作会自动添加类名为“yourClaseName”吗？还是用户需要手动选择“normal”？谢谢。 - daniel blythe

这对我来说可行。但我会找到更好的解决方案。谢谢。 - Andres Manuel Diaz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Milan Jaric · Accepted Answer

你可以添加HTML处理器过滤器。

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

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

$("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'>"))

你需要微调一下 .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

在配置中，您需要在CKEditor安装的config.js中添加以下配置选项。

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>

用户需要在保存之前单击工具栏按钮。