The forum operates in read-only mode. Please head to StackOverflow for support.

Tue, 03/01/2011 - 01:32

jannes

Joined: 01/03/2011

Posts: 5

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; 
}

I would love to see to see a diagram in the content area too when I write my article, but I can't seem to set the css right, or even active for that matter. I've created a nice template to insert a diagram with just a click of a button, here's the code for it:

<div class="diagram">
<div class="header">
<div>South Dealer</div>
<div>All Vul</div>
</div>
<div class="hand north">
<div class="seatname">North</div>
<div class="spade holding">K853</div>
<div class="heart holding">A62</div>
<div class="diamond holding">KQJ952</div>
<div class="club holding">-</div>
</div>
<div class="hand west">
<div class="seatname">West</div>
<div class="spade holding">A6</div>
<div class="heart holding">T8</div>
<div class="diamond holding">862</div>
<div class="club holding">J98632</div>
</div>
<div class="hand east">
<div class="seatname">East</div>
<div class="spade holding">T42</div>
<div class="heart holding">754</div>
<div class="diamond holding">4</div>
<div class="club holding">KQT754</div>
</div>
<div class="hand south">
<div class="seatname">South</div>
<div class="spade holding">QJ97</div>
<div class="heart holding">KQJ93</div>
<div class="diamond holding">AT7</div>
<div class="club holding">A</div>
</div>
</div>
<div style="clear: both;">&#160;</div>

So where do I need to inject the proper styles to see my diagrams in the content area?

That leaves just one question regarding when viewing the source: the original fckeditor leaves the formatting/indentation (in source view) nicely intact, while ckeditor makes a blurb of the template I insert. Is there perhaps a setting I missed?

Thanks so much for your help.

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: 3735

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: 3735

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: 3735

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....