photoman355 Posted March 24, 2013 Share Posted March 24, 2013 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? Link to comment Share on other sites More sharing options...
AnotherAndrew Posted March 25, 2013 Share Posted March 25, 2013 See my post here. This will explain how to do that. Its a little cumbersome but possible. Link to comment Share on other sites More sharing options...
photoman355 Posted March 25, 2013 Author Share Posted March 25, 2013 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? Link to comment Share on other sites More sharing options...
photoman355 Posted March 25, 2013 Author Share Posted March 25, 2013 Update: This may have something to do with browser formatting but it still could be CKeditor. Link to comment Share on other sites More sharing options...
AnotherAndrew Posted March 26, 2013 Share Posted March 26, 2013 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. Link to comment Share on other sites More sharing options...
ryan Posted March 27, 2013 Share Posted March 27, 2013 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. Link to comment Share on other sites More sharing options...
photoman355 Posted March 29, 2013 Author Share Posted March 29, 2013 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? Link to comment Share on other sites More sharing options...
ryan Posted March 31, 2013 Share Posted March 31, 2013 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. Link to comment Share on other sites More sharing options...
Kai Posted November 23, 2016 Share Posted November 23, 2016 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! =) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now