强制CKEditor向p-tags添加一个类 [英] Force CKEditor to add a class to p-tags

问题描述

我必须配置CKEditor为内容中的每个p标签添加一个类属性。你可以使用config.format_p做类似的事情，但它只会将class-attribute应用于标记为normal的文本，而不是默认的。

任何人？ / p>

编辑：
我使用的是当前版本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 = 
 {
元素：'p'，
属性：
 {
'class'：'tiny_p'
} 
}; 
 config.skin =office2003; 
 config.entities_processNumerical = true; 
} 
  

config.format_p 选项只在用户从格式菜单中选择正常并且 config.removeFormatTags 仅在用户手动单击清除按钮时有效。

解决方案

您可以添加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 ）.addClass（tiny_p）; 
  

或如果textarea（来源）已启用

  var editor = $（textarea，＃cke_editor1）; 
 editor.val（editor.val（）。replace（/< p> / gi，< p class ='thiny_p'>））
  / pre> 
 
 
您应该调整 .replace（/< p> / gi，< p class ='thiny_p'> ）正则表达式支持其他情况。 
 
 
 
 EDIT 
 
 
 
最后有时间下载和设置编辑器在我的盒子，这里是工作插件
  CKEDITOR.plugins.add（'customparagraph'，
 {
 init：function（editor）
 {
 editor.addCommand（'addParagraphClassName'，{
 exec：function（editor）{
 var ps = editor.document。$。getElementsByTagName（p）; 
 （var i = 0; i  
 if（ps [i] .className.indexOf（thiny_p）< 0）{
 ps [ i] .className + =thiny_p; 
} 
 
} 
 
} 
}）; 
 
编辑器。 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  
 
 
 
必须添加以下配置选项CKEdito安装的config.js 
  CKEDITOR.editorConfig = function（config）
 {
 config.extraPlugins =customparagraph; 
 config.toolbar = [['ThinyP']]; //添加其他工具栏并保持在中间这可以在加载CKEditor 
}的页面中覆盖; 
  
 或 
 
 
 <加载CKEditor的页面中的p> 
 < script type =text / javascript> 
 //<！[CDATA [
 //替换< textarea id =editor1>用CKEditor 
 //实例，使用默认配置。 
 CKEDITOR.replace（'editor1'，
 {
 extraPlugins：'customparagraph'，
工具栏：
 [
 ['Bold'，'Italic' ，' - '，'NumberedList'，'BulletedList'，' - '，'Link'，'Unlink']，
 ['ThinyP'] 
] 
} 
 //]]> 
< / script> 
  
用户必须在保存前点击工具栏按钮
 
I must configure CKEditor to add a class-attribute to every p-tag in the content. You can do something similar with config.format_p but it will only apply the class-attribute to text that is marked as "normal" wich is not default.

Anyone?

Edit:
I'm using the current version 3.6.2. Here are the relevant parts of my config:
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;
}
The config.format_p option only takes effect when user chooses "normal" from format-menu and config.removeFormatTags only works when user manually clicks the clean-button. Both should work automatically like it does in TinyMCE.
解决方案
You can add html processor filter
editor.dataProcessor.htmlFilter.addRules({
    elements :{
        p : function( element ){
            if ( element.className.indexOf("thiny_p") < 0){
                element.className += 'thiny_p';
            }
        }
    }
});
Also, if it is not required to be created as ckedito plugin maybe before you send content to server you can use jQuery to change content
$("iframe", "#cke_editor1").contents().find("p").addClass("tiny_p");
or, if textarea (source) is active
var editor= $("textarea", "#cke_editor1"); 
editor.val(editor.val().replace(/<p>/gi, "<p class='thiny_p'>"))
you should tweak a bit .replace(/<p>/gi, "<p class='thiny_p'>") regular expression to support other cases. 

EDIT

Finally got time to download and setup editor on my box, here is working plugin
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'
        });
    }
} );
put it in plugins/customparagraph/plugin.js
also create icon image plugins/customparagraph/images/icon.gif

in configuration you will have to add following configuration options config.js of you 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
};
OR

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>
User will have to click on toolbar button before save

                        
这篇关于强制CKEditor向p-tags添加一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！