CKEditor: Styling nested flow elements

[ottogal]

Hi all,

Obviously CKEditor doesn't allow nested flow elements like in this example:

<div class="foo">
    <p>Some Text</p>
    <p>More Text</p>
</div>

I want to wrap a colored box around the two paragraphs:

.foo {
    background-color: #bdf;
    border: 1px solid #000;
    }

In the mystyles.js I added the following:

CKEDITOR.stylesSet.add( 'mystyles', [
 { name: 'Box',
    element: 'div',
    attributes: { 'class': 'foo' } },

and added   div(*)[*]{*}   to the extraAllowedContent setting.


In the editor, when I just have the two p elements in the CKE textarea; source is

    <p>Some Text</p>
    <p>More Text</p>

I mark them and apply the style "Box". The result is

<div class="foo">Some Text</div>
<div class="foo">More Text</div>

which of course is not what I want.

Is there a way to overcome this behaviour of the CKEditor?

(This same issue always drove me crazy in TinyMCE, and I hoped that CKEditor would handle this situation in a more rational way.)

Of course, very likely I overlook some simple way to achieve that...

I'm thankful for any hints!

Edit:

AFC and HTML Purifier are switched off.

[Robin S]

I mark them and apply the style "Box".

I think this is the problematic step. CKEditor can't know that you want to wrap these selected elements in a new element.

Try creating an empty paragraph (maybe with a space or temporary character in it), select and apply the "Box" style, then cut and paste your paragraphs into it.

You're probably aware of this already: it will be easier to see your box element if you add some styles for .box in your CKEditor "contents.css".

[ottogal]

CKEditor can't know that you want to wrap these selected elements in a new element.

And there's no way to let "him" know? Nesting of these elements is allowed, so why CKE is not taking this option into account?

Try creating an empty paragraph (maybe with a space or temporary character in it), select and apply the "Box" style, then cut and paste your paragraphs into it.

I tried this before. Sometimes it works, sometimes one of the paragraph texts looses it's wrapping p element... In any case, this is not a very intuitive way for "editor" users, they would need a special instruction in advance. I don't want them to have to check the source code and to instruct them how to "repair" the strange things that occur.

add some styles for .box in your CKEditor "contents.css"

I replaced the contents.css file with my own css file which contains all the relevant styles. And these are diplayed correctly (after source code is corrected).

[Robin S]

There is a CKEditor plugin that looks like it's designed for what you want: http://ckeditor.com/addon/div

You can try it out in the demo, third toolbar row.

[ottogal]

Thank you very much, Robin S, for your hint to this plugin - it helped to solve my problem.

Yet I've got another tiny issue: If a div like that is the last element in the source, ist not possible (in the editor area) to set the cursor below this div. Do you know a workaround for this? (Other than going into the source and adding some dummy character.)

[Robin S]

The demo shows an "insert paragraph here" feature when you hover on the bottom of the div. Not sure if that's part of the div plugin or a different plugin you'd need to install.

[ottogal]

This "insert paragraph here" functionality seems not to be part of the "div" plugin. Scanning the list of CKE plugins up and down I didn't find any which would provide this feature. Does anybody know, what it is and where to find it?

(I think it extremely strange that something basic like putting the cursor to the very end of a textarea needs a plugin...)

[tpr]

http://ckeditor.com/addon/magicline

[ottogal]

Thank you so much, @tpr!

I'll try it.

[ottogal]

I gave it a try but it does'nt work.

These are the steps I did:

• Download of the module's ZIP file.
• Upload and unpack the file via FTP into the folder  /site/modules/InputfieldCKEditor/plugins/
• In the PW Admin, edit the CKEditor settings of the field body: tick the checkbox magicline in Extra Plugins
• In the file config.js, add the line    config.extraPlugins = 'magicline';  to the CKEDITOR.editorConfig function.

Did I miss some other necessary setting?

[ottogal]

Searching the forums I found this post refering to a similar problem. It says

It was the line "'enterMode' => 'CKEDITOR.ENTER_P'" in "InputfieldCKEditor.module". Removing it brings "magicline" fully back to life.

In the file InputfieldCKEditor.module, line 249 is

// 'enterMode' => 'CKEDITOR.ENTER_P', // already the default, can be left out

So it seems changing the enterMode value to something else might help. Where and how would I change it?

[Robin S]

In the file config.js, add the line    config.extraPlugins = 'magicline';  to the CKEDITOR.editorConfig function.

I don't think this step is necessary.

Checking the page source of the Edit Page screen to see the rendered CKEditor config is revealing.

For your CKEditor field: Edit Field > Input > Plugins > Remove Plugins

Delete 'magicline' if it is shown here.

[ottogal]

For your CKEditor field: Edit Field > Input > Plugins > Remove Plugins

Delete 'magicline' if it is shown here.

That was the crucial point!

I'm quite sure to have read about the "Removed Plugins" setting in the forums, but it didn't reach my brain...

Now all is working fine - thank you again, Robin S, for your helping thoughts!