Custom Styles not Displayed in Editor - Printable Version +- GetSimple Support Forum (http://get-simple.info/forums) +-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3) +--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16) +--- Thread: Custom Styles not Displayed in Editor (/showthread.php?tid=2193) |
Custom Styles not Displayed in Editor - Alan-A - 2011-09-18 I'm wanting to give users the possibility of adding custom styles that are defined in the standard theme 'style.css' file. (The 'standard' method of implementing custom styles via the GS's CKEditor's "Styles" drop-down selector: Code: { name : 'Marker: Yellow' , element : 'span', styles : { 'background-color' : 'Yellow' } }, I've followed Connie's excellent "WYSIWYG-Editor" tutorial in the GS Wiki (http://get-simple.info/wiki/how_to:wysiwyg_editor) and made my own custom style sheet. I've also found out that you can define your own CSS classes for the 'Styles' window using: Code: { name : 'Footnote', element : 'p', attributes : { 'class' : 'footnote' } }, This works, in so far as the editor applies my 'footnote' class to the 'p' tag correctly and when I look at my newly coded page from outside I can see that the browser is correctly applying the formatting that I've specified in the 'style.css' file. However, what doesn't work is that this isn't WYSIWYG. Whilst clicking on the 'Marker: Yellow' default custom style shows a yellow background behind the text once the focus is changed from the editor toolbar back to the editor window, users can only see that they've applied my 'Footnote' class when they switch over to the editor's 'Source' view. Which means that chaos and therefore an unhappy customer is almost certain to occur sometime along the line. Does anyone know how to get the CKEditor to read the GS 'style.css' file 'realtime'? Custom Styles not Displayed in Editor - Alan-A - 2011-09-18 So, it looks like I've found I a partial answer, if not a particularly useful one. In the CKEditor documentation site http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles they describe their 'Stylesheet Parser Plugin', which after a third reading sounds as if it might do what I'm looking for. Unfortunately they only introduced it with version 3.6 and the current GetSimple version uses CKEditor 3.5.2. So, three questions; - Does anyone know of a workaround for the current CKEditor version? - Is it possible for mere mortals (that once upon a time did a php course) to update the editor themselves? - Is an official editor update planned? Custom Styles not Displayed in Editor - Connie - 2011-09-18 Alan, try this: How Do I Add Existing CSS Styles from an External File to Editor Output and the Styles Drop-Down List? [url] http://docs.cksource.com/CKEditor_3.x/Howto/External_CSS_Styles[/url] If it works, tell us and I will add it to the tutorial, I had no time to test it until now Cheers, Connie Custom Styles not Displayed in Editor - mvlcek - 2011-09-18 I'm using the following setup, which shows the styles in the styles dropdown as well as showing the site's styles in the WYSIWYG area. gsconfig.php: Code: define('GSEDITOROPTIONS', theme/Choice/styles.js: Code: CKEDITOR.addStylesSet( 'my_styles', theme/Choice/template.php (important: use same ID for content div as for bodyId in CKEDITOR settings): Code: ... theme/Choice/default.css (important: use body#content for editor specific styles, like reset padding, margin, etc.; specify the styles for the style dropdown without #content) Code: body#content { /* for the editor */ Finally press F5 multiple times in your browser, clear the cache, etc. until the editor looks the same as the site ;-) Custom Styles not Displayed in Editor - Alan-A - 2011-09-19 Many thanks both Connie and Mvieck, I've got to concentrate on other projects now (deadlines, deadlines) but I'll get back to you on this when I've got more time. Until later, A. Custom Styles not Displayed in Editor - Alan-A - 2011-09-28 Connie, many thanks but your link Quote:http://docs.cksource.com/CKEditor_3.x/Howto/External_CSS_Stylesis about their "Stylesheet Parser", which is included in CKEditor 3.6 and later. GetSimple currently uses CKEditor 3.5.2 so it's not a solution for us at the moment. I'll take a look at mvlcek's posting now. A. Custom Styles not Displayed in Editor - Connie - 2011-09-28 you can always update the editor in GS, that will be no problem Custom Styles not Displayed in Editor - Alan-A - 2011-09-28 Connie Wrote:you can always update the editor in GS, that will be no problemThanks for that "rescue ring" but I'd like to get avoid a custom setup as far as possible because of the almost certain memory leaks that will happen ;-) Custom Styles not Displayed in Editor - Alan-A - 2011-09-30 Hallo mvlcek, once more many thanks for your posting. I'm in the process of working through it and there are three things I don't understand:
Many thanks in advance, Alan Custom Styles not Displayed in Editor - mvlcek - 2011-09-30 Alan-A Wrote:I'm in the process of working through it and there are three things I don't understand: I'm using my own theme file default.css and I have no idea if it is combined with CKEditor's style sheet or replaces it ;-) Alan-A Wrote: It's to get exactly the styles for the content div in my template, which looks like this: Code: ... And you might need to add additional rules for the editor (because you don't have a body > ... > div#content hierarchy) by specifying rules for body#content ... - they will only apply to the editor, e.g. I have a rule Code: body#content { Alan-A Wrote: Yes, you just have to make sure to have a simple rule (like .code or span.code) in your style sheet and not just a too specific one (like #content span.code which will not match). Custom Styles not Displayed in Editor - Alan-A - 2011-09-30 Hallo mvlcek, and many thanks. I think I understand you better now - it's a bit more complex than 'normal CSS'. One last question: mvlcek Wrote:Yes, you just have to make sure to have a simple rule (like .code or span.code) in your style sheet and not just a too specific one (like #content span.code which will not match).It works for me with such simple styles but I don't want to use them as they're coded directly into the HTML tag with something like " style='color:red;' ". What I was wondering was if you have it working for your own classes, like the "Code" example you gave in your post #4, where the editor would enter something like " class='code' " into the HTML tag? Best wishes, A. Custom Styles not Displayed in Editor - mvlcek - 2011-09-30 Alan-A Wrote:It works for me with such simple styles but I don't want to use them as they're coded directly into the HTML tag with something like " style='color:red;' ". I don't understand your question. I always use classes as you can see in the example, e.g. motto1 on a paragraph level or code on span level. They are e.g. defined as follows in the style sheet: Code: .motto1 { Custom Styles not Displayed in Editor - Connie - 2011-09-30 I think I explained how to define in your custom file http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles http://docs.cksource.com/CKEditor_3.x/Howto/Custom_Styles It is described and it is not so difficult to do. Custom Styles not Displayed in Editor - Alan-A - 2011-10-03 Hallo mvlcek, mvlcek Wrote:Then the user can select the desired class from the styles dropdown and doesn't have to remember that highlighting is done with red - or was it light red?This is exactly what I'm seeking. mvlcek Wrote:I'm afraid I wasn't very exact....Alan-A Wrote:It works for me with such simple styles but I don't want to use them as they're coded directly into the HTML tag with something like " style='color:red;' ".I don't understand your question. I'm getting the formatting from my style sheet correctly displayed in the editing window when it is applied using the styles dropdown (In my case I've a class called "footnote" which causes text to be shown in italics). What I was wondering is whether, taking your example from your post #12 above, when you open your styles dropdown, is the class name "Code" in the dropdown displayed in the 'Courier New',monospace; you define or is it displayed in some default style? My "Footnote" name is, as you've probably guessed, not shown in italics in the dropdown, although once I've applied it, my text in the editing window is shown in italics. Many thanks in advance, A. Custom Styles not Displayed in Editor - mvlcek - 2011-10-03 Alan-A Wrote:What I was wondering is whether, taking your example from your post #12 above, when you open your styles dropdown, is the class name "Code" in the dropdown displayed in the 'Courier New',monospace; you define or is it displayed in some default style? Yes, it is shown correctly. It is important to specify the CSS rules without further conditions, that is e.g. .code { ... } and not #content .code { ... }. Custom Styles not Displayed in Editor - Alan-A - 2011-10-03 Hallo mvlcek, mvlcek Wrote:Yes, it is shown correctly. It is important to specify the CSS rules without further conditions, that is e.g. .code { ... } and not #content .code { ... }. Thanks for the info and the tip. I'll have a good look again at what I've done to see if I can find where the worm is. But I now know that it is possible. Many thanks, A. |