Please help me configure some simple custom styles

Nov 26, 2014 at 2:18 AM
I'm going a little crazy trying to accomplish the simple task of getting my custom styles to appear in the editor's styles drop down. This is with CKEditor Provider 2.00.14 and DNN 07.03.04

I believe the place to configure this is on the "Main Settings" tab under "List of available styles".

I've tried specifying an XML file that contains the following:
<?xml version="1.0" encoding="utf-8" ?>
<Styles>
  <Style name="Bold Red" element="p">
    <Attribute name="class" value="stjohnboldred" />
  </Style>
  <Style name="Bold Purple" element="p">
    <Attribute name="class" value="stjohnboldpurple" />
  </Style>
 </Styles>
and that worked OK in Chrome and Firefox, but didn't work at all in IE11 where it threw up an error window saying "The <Styles> node was not found" so that's a no-go

I think custom styles can also be configured via javascript like so:
CKEDITOR.stylesSet.add( 'default', [
{ name : 'Bold Red', element : 'p', attributes : { 'class' : 'stjohnboldred' } },
{ name : 'Bold Purple', element : 'p', attributes : { 'class' : 'stjohnboldpurple' } }
] );
Or something like that? But that didn't work.

I've also tried specifying my javascript file with the above statement under "Custom JS File" but whenever I specify a file for that setting, it never persists after saving and reloading the editor config page. I reload the editor config page and it is back to filename = none specified. And in order to even get the .js file to appear to be chosen, I had to set my site to allow .js files to be uploaded and synch the file system, which doesn't seem like a great idea. I did disable the upload support for .js files after getting it to appear.

Maybe I am barking up the wrong tree with trying to specify this on the "Main Settings" tab. The documentation indicates it should be specified somewhere on the "Editor Config" tab but I can't figure out where in that long list to specify it. There is nothing there labeled as styleSet or anything like it which is what the docs say to look for.

I'm sure I'm missing something basic here. Or perhaps there is a bug or two I am running into. Any help or pointers on where to do more research would be much appreciated!

-Pat
Nov 26, 2014 at 11:28 PM
I got it sorted out by removing the ckeditor provider and then installing the RC version.

Still having a problem where IE11 doesn't apply my custom editor.css file, but the config settings are now persisting, and the custom styles are being loaded via the custom js file setting. I can live with the IE issue.
Coordinator
Nov 29, 2014 at 2:14 PM
You don't have to use the custom js, simply follow the documenation (which works with 02.01.00 or above)

https://dnnckeditor.codeplex.com/wikipage?title=Add%20Custom%20Styles&referringTitle=Documentation
May 30, 2016 at 9:32 AM
I don't think the current documentation is accurate: https://dnnckeditor.codeplex.com/wikipage?title=Add%20Custom%20Styles

At least: i can't find the "StylesSet" textbox wrt List of available styles'.

CK ed provider 2.0.14
Coordinator
May 31, 2016 at 2:28 PM
schotman wrote:
I don't think the current documentation is accurate: https://dnnckeditor.codeplex.com/wikipage?title=Add%20Custom%20Styles

At least: i can't find the "StylesSet" textbox wrt List of available styles'.

CK ed provider 2.0.14
I just checked the option exist in 2.0.14 in the tab Editor Config, just as in the documentation written.