Viewing a custom class in the editor area

So I have a pretty complicated setup. Currently I use an old modified fckeditor (for Wordpress) to post articles on my blog containing bridge diagrams (http://www.vikingsinspace.nl). It's probably crummy css to generate these diagrams, but it's all I have.

I try to move to ckeditor-for-wordpress 3.5.2.

Here's some sample css:

.diagram .header { 
   font-size: smaller; 
   margin-left: 0.25em; 
   margin-right: 0.25em; 
   margin-bottom: 0; 
   margin-top: auto; 
   padding: 0.25em; 
   border: 0.1em outset; 
   width: 6.5em; 
   float: left; 
   background: #FFFFFF; 
} 

.diagram { 
   width: 25em; 
} 

.diagram .hand { 
   width: 9em; 
} 

.diagram .south , .diagram .north { 
   margin-left: 8em; 
} 

.diagram .north { 
   padding-bottom: 1ex; 
} 

.diagram .south { 
   clear: both; 
   padding-top: 1ex; 
} 

.diagram .west { 
   float: left; 
   clear: left; 
} 

.diagram .east { 
   float:right; } 
   
.hand .seatname { 
   margin-left: 1em; 
   font-size: smaller; 
   font-style: italic; 
}

Thu, 03/03/2011 - 00:18

jannes

Joined: 01/03/2011

Posts: 5

Re: Viewing a custom class in the editor area

Solved.

In the CKEditor - Advanced options screen:
"Use theme css", leave CSS path empty, cleared the cache and suddenly the diagrams appeared the way they should in the editor-area.
Set the output formatting to your liking with break lines and indentation options.

I manually edited these files:
ckeditor.config.js
- config.enterMode = CKEDITOR.ENTER_BR;
- config.templates_replaceContent = false;

ckeditor.templates.js
- added my templates for bridge diagrams

Thu, 03/03/2011 - 20:25

jannes

Joined: 01/03/2011

Posts: 5

Re: Viewing a custom class in the editor area

Still one issue remaining.

So I added config.enterMode = CKEDITOR.ENTER_BR; to my ckeditor.config.js, but when I save an article still all the linebreaks get replaced by <p> tags. I understand it's semantically desired, and I will consider using it. But where can I find the option to disable this for now? What config-setting do I have to flag?

Thanks.

Thu, 03/03/2011 - 21:43

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Viewing a custom class in the editor area

"all linebreaks" or just when you press enter in the editor?
If it's every linebreak then it's probably some other external code.

If it's just when you press enter, then clear your cache, browsers are a little stupid sometimes.

Thu, 03/03/2011 - 23:22

jannes

Joined: 01/03/2011

Posts: 5

Re: Viewing a custom class in the editor area

Cleared cache completely, fresh browser instance.

If I press Enter (and some txt) in wysiwyg mode, the source looks like:

Hello<br />
Today<br />
it's<br />
Thursday!<br />

All good. But when I Save Draft (Wordpress functionality), and then review the source, it looks like this:

<p>Hello</p>
<p>Today</p>
<p>it's</p>
<p>Thursday!</p>

I have compared this to what happens in my old FCKEditor plugin, but absolutely no replacement of <br />'s.
To me it looks like CKEditor parses/formats stuff before it gets committed to the db. But I might be wrong here. Any ideas?

Fri, 03/04/2011 - 00:22

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Viewing a custom class in the editor area

If it's working fine in source mode then I would say that it's something external to the editor

Fri, 03/04/2011 - 18:26

jannes

Joined: 01/03/2011

Posts: 5

Re: Viewing a custom class in the editor area

But this works fine with the old FCKEditor. Confirmed and reconfirmed in my current setup.

All I know is when I save my work it seems as if things get processed/parsed before committing. And thus <br /> tags get replaced by <p> tags.

Fri, 03/04/2011 - 19:06

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Viewing a custom class in the editor area

Sorry but I can't help you more about this. I don't have your setup, I don't know what other tools you are using, I can't modify your server script to check what's going on, I can't use any kind of logger....