CKEditor setting up Styles?

[photoman355]

I'm a little stuck with customising CKEditor.  I want to build something similar to the following code using the custom styles function of the editor. 

<ul>
    <li><i class="icon-medium icon-link"></i><a href="#">Link 1</a></li>
    <li><i class="icon-medium icon-link"></i><a href="#">Link 1</a></li>
</ul> 

I found this link in the CKEditor documentation which explains what's needed from the plugin side but I'm not quite sure how to implement this in Processwire.  

Any ideas?

[AnotherAndrew]

See my post here. This will explain how to do that. Its a little cumbersome but possible.

[photoman355]

Thanks Andrew.  I've been through your post and have it working up to a point.  It's not exactly what one would call an easy process especially because the formatting options are all hidden in the documentation.  

What I'm having trouble with now is the editor won't print my html.  <i>Some Text</i> is getting rendered as <em>Some Text</em> for no apparent reason.

I've even excluded <em> tags in my setup.  Here's my config file settings:

// Load My Custom Styles
    config.stylesSet = 'default';
// Remove formatting
    config.forcePasteAsPlainText = 'true';
    config.removeFormatTags = 'b,big,code,del,dfn,em,font,ins,kbd'; 

And my Processwire settings 

Bold, Italic, -, RemoveFormat
NumberedList, BulletedList, -, Blockquote
PWLink, Unlink, Anchor
PWImage, Table, HorizontalRule, SpecialChar
PasteText, PasteFromWord
Scayt, -, Sourcedialog, Styles 

Any ideas?

[photoman355]

Update: This may have something to do with browser formatting but it still could be CKeditor. 

[AnotherAndrew]

Did you add in your declarations for the I element in the styles.js?

Also in your PW settings above you need to include "styles" somewhere. Where depends on where you want it to be appear on the editor toolbar.

And for the styling formatting to appear you need to also include the css formatting relevant to the I tag in the contents.css file.

[ryan]

The CKEditor module is beta, and if you guys any config options that you think we should add to it or anything like that, just let us know. 

[photoman355]

Will do Ryan.  One thing that I would like to do is bring CKEditor's inline edit mode to the front end much in the same way as it's demonstrated on their website here.  I'd need to add a save button that hooks up to the database but other than that it would just be mimicking what's on the admin site.  Is this possible?

[ryan]

Will do Ryan.  One thing that I would like to do is bring CKEditor's inline edit mode to the front end much in the same way as it's demonstrated on their website here.  I'd need to add a save button that hooks up to the database but other than that it would just be mimicking what's on the admin site.  Is this possible?

For front-end use, I would just follow any instructions that come with CKEditor itself. ProcessWire really tries to give you an environment on the front-end where you can implement anything without having to worry about the system itself. The only reason I would use InputfieldCKEditor on the front-end is if you are already using other Inputfields and including their scripts, css, etc. Otherwise, better to just use CKEditor and implement the same way they do on their website. 

[Kai]

Can I reactivate this post? I want to add a simple: 

<div style="width:400px;"> 
  ... 
</div>

But it does not work with CKEditor. 

I am in the setup of a "body" field where the editor is used. In the "Input" tab I have: 

1. Use ACF: Yes (as required, but tried also No)

2. Use HTML Purifier: No

3. Extra Allowed Content: 
div(*)
div{*}
span(*)
span{*}

3B. Also tried: div(*){*}[*] 

But it still does not work  

Has somebody solved this already?

----

Ouch ... There was an option above enabled that I overlooked: 

"Convert div tags to paragraph tags"

The culprit! =)