CKEditor4.x: запретить один тег внутри другого

Недавно я начал использовать CKEditor 4.x, но хочу, чтобы пользователь мог использовать только очень ограниченный набор тегов. Также не все комбинации тегов полезны.

В настоящее время я разрешаю только эти теги/форматы:

<p>, <h3>, <ul>, <ol>, <li>, <strong>, <em> (and maybe some more)

Мне нужно только, чтобы списки были сделаны в обычном стиле, а не в заголовках. Но вполне возможно создать заголовок внутри элемента списка. Результат выглядит забавно, но бесполезен. Список (точечный или нумерованный) оформляется как обычный текст, а текст заголовка как заголовок (другой шрифт, другой размер шрифта, другой цвет).

Я хочу запретить это. Также я обнаружил, что в некоторых случаях CKEditor также помещает теги <p> в список, чего я тоже не хочу. Я предполагаю, что это происходит в основном, когда я возвращаю заголовок внутри списка к нормальному состоянию, тогда CKEditor просто меняет теги заголовка на <p>.

Есть ли возможность предотвратить это от CKEditor 4? Я видел, что даже был тикет о похожей проблеме для CKEditor 3:

http://dev.ckeditor.com/ticket/6849

Но так как CKEditor 4 похоже переписан, то и решение похоже не применимо (было закрыто как исправленное).

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

Я хочу:

<h3>A simple headline</h3>
<p>A simple paragraph</p>
<ul>
    <li>First text</li>
    ...
</ul>

Чего я не хочу, так это:

<ul>
    <li><p>First text</p></li>
    ...

или даже:

<ul>
    <li><h3>First text</h3></li>
    ...

ckeditor ckeditor4.x
person Juergen    schedule 07.03.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Нет никакого способа достичь этого легко. Причина в том, что существует множество способов создания этого контента. Список можно вставить, заголовок можно создать в элементе списка, список можно создать в заголовке, возможно, вы можете сделать это с помощью удаления, перетаскивания и т. д. Можно обработать все эти случаи и предотвратить создание этих структур, но это будет много работы.

Вместо этого я думаю, что вы могли бы стилизовать li>p, li>h3 таким образом, чтобы внутренние блоки не были видны (без полей, тот же размер шрифта) внутри редактора. Затем вы также можете применить эти стили на странице, на которой отображается этот контент, или вы можете очистить контент при его извлечении из редактора. Последнее может быть сделано, например. таким образом (см. editor#toDataFormat событие):

editor.on( 'toDataFormat', function( evt ) {
    var filter = new CKEDITOR.htmlParser.filter( {
        elements: {
            p: function( el ) {
                if ( el.parent && el.parent.name == 'li' ) {
                    delete el.name; // This removes the element and leaves its content.
                }
            }
        }
    } );

    filter.applyTo( evt.data.dataValue );
}, null, 12 );
person Reinmar    schedule 09.03.2015
comment
Вау, это действительно подробный ответ! Большое спасибо! Я понимаю, что ограничить некоторые вещи в сложном редакторе непросто. Я уже кое-как ограничил редактор... так как я запретил событие перетаскивания, поэтому никакие изображения и прочее не могут быть переброшены. Но все же могут быть некоторые возможности. Я думал, будет какой-то способ сделать это. Но ваше решение также может очень помочь мне! Итак, мне нужно получить содержимое из самого CKEDITOR (в настоящее время я использую $(...).html() )? Можете ли вы просто дать мне имя или ссылку на метод API? - person Juergen; 09.03.2015