Making the Editor WYSIWYG

Jun 27, 2011 at 9:08 AM

Hi Watcher

I'm trying to make the editor WYSIWYG with our Artisteer generated skin, but so far no luck. Nothing from the skin can be seen in the editor field. Would you mind telling me how to make the editor WYSIWYG compliant with my skin? or perhaps where to look for info. Please be specific if you can, since I've searched quite a bit for this with no luck yet.

Kind Regards
Rune 

Jun 27, 2011 at 10:01 AM

Can you be more specific what the actually problem is? Did you want that the editor have the same look as your skin?

If yes, please be aware that the editor uses its own skins, and you need no modify them or create a new one.

Jun 27, 2011 at 10:08 AM

No no, I should not have mentioned "skin". This has nothing to do with the editor skin or how the tools look. The Editing area is using some other CSS than the DNN skin installed on the portal. I can't make it pick up the styles that are applied after the HTML is saved. This essentially makes the editor WYSINOTWYG.

I think an example would be good here.

I'm editing an HTML module on a site with one of my Artisteer skins installed for look & feel of the site. The Editor is displaying the text contents in Times New Roman, even though Arial is defined in the portal skin. Also the text is black, although all text is defined green on the site. I can easily edit the text and save it, and after it's saved, the text is Arial and green. Only problem is: the Editor is not WYSIWYG.

Now how do I apply the portal skin to my editor? :)

Jun 27, 2011 at 11:13 AM

ok i understand. You need to parse your css file in to the editor. Go the Editor Settings (Bellow The Editor there is a Link "Custom Editor Options"). On the Settings Page there is a Setting "Editor area CSS" where you can select your css file. Click Save to Save the Changes. And the Editor parses the Css Classes.

But here comes the tricky part.  The Editor parses only the Css Classes in to the styles dropdown, that have an html tag defined.

For Example if you want all your Links to be red you need to have this in your css file

a.RedLink {color:red;}

and it will be appearing in the Styles Drop Down.

.RedLink {color:red} will not work.

In your case if you have defined Arial in the body class like

body {

font-family: Arial;

}

The Editor will display your text correctly as Arial.

Jun 27, 2011 at 12:04 PM

Well I actually tried that as one of the first things to make it happen, but it didn't work. I'm beginning to think it's a bug...

I've downloaded the latest version of the CKEditor 1.12.13 last week and I'm running DNN 5.6.2 Professional.

So far I'm using Google Chrome 12.0.742.100 as my browser since IE9 seems to have an issue with showing dialogs (but that's a topic for another thread).

I've tried to create a css file with this simple contents:

body {
  color: #0F572D;

And I've used the tool to point the editor CSS to the file I've created. But nothing happens. All the text is still black in the Editor.

So what should I do now?

Jun 27, 2011 at 12:43 PM

I tested it and noticed the same problem, it didnt work.

But i found the Problem, the browser Caches the css and didnt show the updated css file. You need to Clear the Browser Cache then it should work (The easiest way to update the css file in the browser is to directly open the url to the css file inside the browser)

Jun 27, 2011 at 1:25 PM

I'm sorry but this does not look like a cache problem to me.

I've tried emptying all cache, opening the css file directly, browse through loaded resources, manually work my way through the code with Chrome element-Inspector. The css file I've specified is simply not there anywhere.

The Iframe seems to use only 2 css files: contents.css which is module specific and editor.css which is module skin specific (like office2003).

Have I missed something somewhere? It sounds like it works for you...

Jun 27, 2011 at 1:44 PM

If you added a css file under "Editor area CSS" you should see something like this in the html source output

contentsCss = '/contents.css,custom.css'; which should contain the css from the settings.

you can also try to modify the main css file for the editor from Providers/HtmlEditorProviders/CKEditor/contents.css

Jun 27, 2011 at 3:00 PM

Ok now it's getting weird..

I've tried to test this both on my local computer used for development and on the live server.

My local development computer can register the skin file correctly.. although i have to remove styles from contens.css to make the styles appear on body - the contents.css seems to override anything in an added css file.

My live server has an empty tag for the skin file...

http://rune.bigom.dk/missingstyle.aspx

this looks like some kind of issue with saving the css file location rather than referring it afterwards. Maybe a security issue?

Jun 28, 2011 at 10:40 AM

Ok the first problem with the overriden styles, i change that in the next release, the contents.css will be loaded first then the custom one.

For the other Problem with the other Problem, it looks like the file is not correctly found. Can you see the css file in the dnn file manager?