Unable to add custom styles to editor

Jun 4, 2012 at 10:52 PM

Hi,

I am using DotNetNuke Community v. 6.1.5.  I installed CKEditor v. 1.14.05.  I have a custom skin that I created for a DotNetNuke site that I am working on.  I want to have the drop down Styles menu show my custom CSS.

I followed the directions on this page by creating my own CSS file - NexGENEditor.css - and my own .js file - CKEditor.js.  I then tried to upload both files under the Editor Styles tab -the JS file under List of available styles and the CSS file under Editor area CSS - but received the following error: 

A critical error has occurred.

Object reference not set to an instance of an object.

I then FTPd the files to the hosted server and within the Portal instance which corresponds to the folder structure in the drop down selection within Editor Styles tab but the files don't appear so that I can select them within the drop downs under List of available styles or Editor area CSS. 

I next FTPd the files to another website in order to use the URL link type.  However, the Styles drop down in the editor is blank.

How can I get this to work?

I'd be happy to send screenshots to you. 

Lisa

Coordinator
Jun 4, 2012 at 11:11 PM

The Upload Function will be removed in the next Version (Beta Version can be already downloaded). When you upload files with FTP they want appear because DNN does not recognize them, until you synchronize the file system. You can do that via the File Manager from dnn or the included File Browser in the Editor (Opening the Manger automatically syncs the File system).

Jun 5, 2012 at 1:32 AM

I can see the files now in the Editor Styles tab.  I selected them but I'm still seeing blank drop down.  Perhaps there is something wrong with the files themselves.  Here are some of the CSS styles in the CSS file and the contents of the JS file:

 

span.HomeMainText {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height:21px;
    color:#000000;
}

div#DealerForumText {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-style:italic;
    line-height:22px;
    color:#6c6e70;
    margin: 30px 10px 30px 10px;
    padding: 20px 0 20px 10px;
}

span.TechTextHead {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    line-height:22px;
    font-weight:bold;
    color:#000000;
}

 

CKEDITOR.addStylesSet('NexGEN',
[
// Block Styles
//{ name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },

// Inline Styles
//{ name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
{name: 'HomeMainText', element: 'span', attributes: { 'class': 'HomeMainText'} },
{ name: 'TechTextHead', element: 'span', attributes: { 'class': 'TechTextHead'} },
{ name: 'TopNewsTextHead', element: 'span', attributes: { 'class': 'TopNewsTextHead'} },
{ name: 'CenterColumnSubhead', element: 'span', attributes: { 'class': 'CenterColumnSubhead'} },
{ name: 'CenterColumnText', element: 'span', attributes: { 'class': 'CenterColumnText'} },


// Object Styles

])

Coordinator
Jun 5, 2012 at 1:20 PM

change

 

CKEDITOR.addStylesSet('NexGEN',

 

to

CKEDITOR.addStylesSet('CustomStyles',

then it should work (dont forget to clear the browser cache when you change the js file).

Jun 5, 2012 at 4:02 PM

Yeah!  It worked.  Thank you so much for your help.