Заставить CKEditor добавить класс в p-теги

Question

Я должен настроить CKEditor для добавления атрибута класса к каждому p-тегу в содержимом.Вы можете сделать что-то подобное с config.format_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 =
    {
        element: 'p',
        attributes:
        {
            'class': 'tiny_p'
        }
    };
    config.skin = "office2003";
    config.entities_processNumerical = true;
}

Опция config.format_p вступает в силу только тогда, когда пользователь выбирает «обычный» из формата меню и config.removeFormatTags работает только когда пользователь вручную нажимает кнопку очистки,Оба должны работать автоматически, как в TinyMCE.

Answer 1

Вы можете добавить фильтр процессора 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");

или, если текстовая область (источник) активна

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

Вы должны немного подправить .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");
                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 вашей установки CKEdito

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

на странице загрузки 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>

Пользователь должен нажать на кнопку панели инструментов перед сохранением

Answer 2

Ну ... не уверен, если вам это нужно по какой-то конкретной причине ... но разве жизнь не будет намного проще, если вы будете делать то, что хотите делать на дисплее?

Например, если я отображаю некоторый текст (сохраненный из ckeditor) в передней части, отображаю что-то вроде

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

И все

 <p>

теги внутри него могут быть применены стили или применены jquery с пометкой:

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

OR

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

Answer 3

У меня была точно такая же проблема, и через некоторое время я начал искать решение в одну строку:

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

Все, что вам нужно сделать, это поместить этот код в config.js, и он будет работать:)