CODEWITHSUNDEEP
htmlreplacehtml-listsckeditorconfig
gesirdekatwork
gesirdekatwork

Reputation: 87

CKeditor removes ul list

I am copying html code which has "ul","li" tags, clicking "Source" and pasting it to CKEditor. However, when i go to design, it replaces those tags with "

". Is this a bug or did i configure something wrong? Below is the config.js file content.

CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config

// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
    { name: 'clipboard', groups: ['clipboard', 'undo'] },
    { name: 'editing', groups: ['find', 'selection', 'spellchecker'] },
    { name: 'links' },
    { name: 'insert' },
    { name: 'forms' },
    { name: 'tools' },
    { name: 'document', groups: ['mode', 'document', 'doctools'] },
    { name: 'others' },
    '/',
    { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
    { name: 'paragraph' },
    { name: 'styles' },
    { name: 'colors' },
    { name: 'about' }
];


// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.

config.removeButtons = 'Underline,Subscript,Superscript';
config.filebrowserImageBrowseUrl = '/Admin/BrowseImage';
config.filebrowserImageUploadUrl = '/Admin/UploadImage';

Upvotes: 1

Views: 3399

Answers (1)

oleq
oleq

Reputation: 15895

I'm assuming that you're using latest CKEditor (4.1) which comes with Advanced Content Filter. It means that lists will be cleared out of your content unless you have either list plugin loaded with all the features (buttons and commands) or explicitly defined config.allowedContent to accept lists.

It also means that if you remove list buttons, editor assumes that you don't want list in your content and they're simply gone. Your config.toolbarGroups has no list entry and this the root of your problem. You can check whether tag is allowed by typing this in your console:

CKEDITOR.instances.yourEditorInstance.filter.check( 'li' );
>> false

When you add something like this to your config, lists will be back in the editor with UI:

{ name: 'paragraph', groups: [ 'list' ] }

If you really want to preserve your toolbar but allow lists, you can specify:

config.extraAllowedContent = 'ul ol li'.

Also read more about allowedContent rules to know more and use things intentionally.

Upvotes: 4

Related Questions