HTMLArea stylesheet not working?

[Argos]

Hi,

I mentioned this already in a previous topic, but it was kind of hidden away so here I go another time. The WYSIWYG editor uses my template stylesheet only when publishing, but not in editor mode itself. So it is not really "what you see is what you get" at the moment. I know HTMLArea can do this properly, because I have seen it in other CMS's. I checked everything I know, but cannot find the cause of this. I have two questions:

1. Is this just the way WSB works? Are the CMS and HTMLArea not 100% connected in this respect? So, do all users have this?
2. If not, does anyone know how to correct this, so that HTMLArea shows and uses the stylesheet in the editor mode, as well in the published results?

This is rather important for me, because I want to offer my clients that wil use WSB true WYSIWYG, instead of a barebone version that "only" does bold, italic and so on.

Thanks for any comments.

[Ryan]

It is a setting you will have to change in htmlarea, and you will have to create a hack yourself to get it working. If you figure out how to relate the fonts in your sites stylesheet to HTMLArea with some simple (include/require?) code, please share it so I can include it in the next version.

[Argos]

Damn... I wrote an extensive reply and when I sent it, the database was gone... And so was my message. This forum is offline a lot these days. Not a very stable host so it seems

Anyway, I wrote that I cannot do it myself because I don't know php, or how to code. And I wrote that www.phpwcms.de (open source cms) features a working link between htmlarea and the custom template stylesheet, so it is possible to connect them. I suggested that you or another person with php knowledge might take a look at that csm to see how it was done...

If I get to know the way how it should be done, I will certainly post it here!

[Ryan]

Maybe, if i remember, then I could look at it for the next release of WB (2.3.2), which I should hopefully release on monday.

[Argos]

Hey that's cool!! I love updates

[Argos]

Yes! I found out how to include the stylesheet in HTMLArea so that it really exactly shows in the editor how it will look like on the site. And in fact it is a very simple solution once you know it

1. Open htmlarea.js

2. Search for:

Code:

// style included in the iframe document
this.pageStyle = "";

3. Change into:

Code:

// style included in the iframe document
this.pageStyle = '@import url(/cms/include/htmlarea/iframe.css);';

Presto!

I made a separate stylesheet based on the template stylesheet, and put it into the htmlarea folder. I left some things out and compressed it a bit by removing spaces and returns. But I guess you can just as well link to your template stylesheet, using some WSB tag.

Works like a charm! I tried it before but without succes. I suddenly realized it maybe needed the "@import url" bit added, and indeed that did the trick

[fienieg]

Thanks jurgen...

It really works like charm, even on Firefox  

[Stefan]

Works on IE for me but not on Firefox 1.0.1
Strange...

[fienieg]

I've got Firefox 1.0.1
And IE6, i never had any problems with IE... only with firefox.

And now it seems if it's broken again. It worked like 10 minutes....  

[Stefan]

I have written a rough draft of a possible interaction of WB with htmlarea. No big deal, just a first step...

It queries the pages table for the template of the page being modified and sets the htmlarea option accordingly.
If the page doesn't have a specific template, the default template is used.

In WB_PATH/modules/wysiwyg/modify.php change lines 66 to 69:

Code:

$query_wysiwyg = $database->query("SELECT section_id FROM ".TABLE_PREFIX."sections WHERE page_id = '$page_id' AND module = 'wysiwyg'");
if($query_wysiwyg->numRows() > 0) {
while($wysiwyg_section = $query_wysiwyg->fetchRow()) {
echo 'var editor = new HTMLArea("content'.$wysiwyg_section["section_id"].'");'

to the following

Code:

$query_pages=$database->query("SELECT template FROM ".TABLE_PREFIX."pages WHERE page_id = '$page_id'");
$page_row=$query_pages->fetchRow();
$templatename=$page_row['template'];
if ($templatename=='')
$templatename=DEFAULT_TEMPLATE;
echo 'var config = new HTMLArea.Config();
config.pageStyle = "@import url('.WB_PATH.'/templates/'.$templatename.'/screen.css);";';

$query_wysiwyg = $database->query("SELECT section_id FROM ".TABLE_PREFIX."sections WHERE page_id = '$page_id' AND module = 'wysiwyg'");
if($query_wysiwyg->numRows() > 0) {
while($wysiwyg_section = $query_wysiwyg->fetchRow()) {
echo 'var editor = new HTMLArea("content'.$wysiwyg_section["section_id"].'",config);'

Have fun!
Too bad Firefox is having an issue here...

[Argos]

Ain't it nice to know how to code
Cool, I'll give it  a try it tomorrow.

[Ryan]

Maybe someone could find a solution for firefox?

[Ryan]

Just thought I would let you guys know this problem will be solved as of 2.4.0-test4 - I have added a option where you specify the font to be used by default by HTMLArea.

[littlefishweb]

Is there a place to specify h1, h2, h3 styles, etc?

[Argos]

Both my and Stefan's solutions don't seem to work anymore in WSB 2.5.2... Is there a change somewhere in the way the WYSIWYG module is set up now?

[littlefishweb]

Actually, I got it to work.  You have to specify the stylesheet in the include/htmlarea/htmlarea.js file AND in the modules/wysiwyg/modify.php file.

[Argos]

Actually, I got it to work.  You have to specify the stylesheet in the include/htmlarea/htmlarea.js file AND in the modules/wysiwyg/modify.php file.

What should I exactly do in the modify.php file?

[Ryan]

Maybe try this:
WebsiteBaker Administration -> Settings -> Advanced Settings -> WYSIWYG Style: (change to what you want)
 

[Argos]

How can I put a whole stylesheet in there?
Or at least something about the H1 tag?

[Ryan]

Maybe try using "@import url('cssfilehere.css');" as the value for Administration -> Settings -> Advanced Settings -> WYSIWYG Style

[Argos]

Nope, that didn't work. However, I tried several other thinsg again, and now I found a working way. For the editor I only needed to have a style for H1, apart from the standard text. So now I have this, and it works:

Code:

{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;} h1{font-size: 14px;color: #C6423C;font-weight: bold;padding: 0;}

[ephraimt]

Stefan, could you post an update to your code (from March 13, 2005) for using the current page's template's screen.css as the .css for the wysiwyg editor?

The patch doesn't work for 2.6.1.

Thank you!

[crespowu]

Is this bug fixed now?

[ruebenwurzel]

Hello,

the developement of HTMLArea is closed and also the developement of features and bugfixes. Sorry. Try to use FCKEditor from our addons Page as WYSIWYG Editor.

Matthias