Styling content in wysiwyg

Hi,


I have been updating the style of the wysiwyg editor. So far I have been able to style the toolbar and the bodycopy content area’s iframe successfully. However as the content in the iframe will not pick up the style I was wondering if there is any feedback out there on how to apply style to it. I notice the iframe does not have a class attached… I’ve considered attempting to do in js… running a loop to apply a style to all frames and in that way get the iframe… any suggestions??



Simple edit so far (not all icons have been created yet, so only a limited number displayed)

Simple edit redesign

The iframe is supposed to pickup the styles from the currently applied design of the page (AFAIK). So, the content is supposed to look like how its going to look on the page.

[quote]The iframe is supposed to pickup the styles from the currently applied design of the page (AFAIK). So, the content is supposed to look like how its going to look on the page.
[right][post=“15341”]<{POST_SNAPBACK}>[/post][/right][/quote]



Yes. I’m not attempting to make the content of the wysiwyg editor look as preview. Tables are the only concern in the wysiwyg editor atm. We need the front end to not have the border attribute, our css styles the tables on the frontend based on the class the user chooses to use. I have removed the border attribute all together in a new insert table plugin… in compliance with our style guide. However that leaves the table invisible in the wysiwyg editor for the users.



Workaround currently used is to let the border=“1” be written to the front end and update our css to override it. Whilst I have this working it does output code we don’t want to the front end.



Solution I would like to implement: style the tables in the wysiwyg editor only to have a border so that the users can see the tables to add and delete cells/columns and enter data… purely for ease of editing.

There is a plugin to show hidden elements (like border-less tables). Maybe you can insert tables without a border and use this plugin instead.

[quote]There is a plugin to show hidden elements (like border-less tables). Maybe you can insert tables without a border and use this plugin instead.
[right][post=“15345”]<{POST_SNAPBACK}>[/post][/right][/quote]



Hi Greg,



Are you talking about the visual aid plugin?

[quote]Are you talking about the visual aid plugin?
[right][post=“15352”]<{POST_SNAPBACK}>[/post][/right][/quote]I am.

Unfortunately that plugin has a nasty habit of printing small yellow images with the letter P in them to the front end if the user turns on and off a number of times to find where paragraphs start and end for highlighting! Therefore without further development I cannot turn that plugin on :frowning:

Joining this thread late, but are you guys implying that he WYSIWYG editor via "edit Contents" is meant to be showing the content as you edit it marked up with the styles I've setup in my CSS file? Mine certainly isn't (3.10.2) and never has throughout the various versions.



It would be uber handy, it's pretty darn frustrating to apply an "empahsis" style from my CSS file and not have it show up visually…I've kinda given up on the WYSIWYG editor for that reason (among others) and setup a dummy html file with links to the css files on the server and edit in Dreamweaver so I can see what is actually what.



Should I log this as a bug or am I reading the wrong thing into this thread?



Many thanks



Dale

[quote]Joining this thread late, but are you guys implying that he WYSIWYG editor via “edit Contents” is meant to be showing the content as you edit it marked up with the styles I’ve setup in my CSS file?
[right][post=“15914”]<{POST_SNAPBACK}>[/post][/right][/quote]



It does in Simple Edit mode, not in the Administration Interface.


Re-joining a bit late also... but from what I can tell it is not possible to apply a style to the iframe content (if iframe is used) in simple edit. Therefore simple edit mode will not obtain any of the designs css for the iframe's content within the wysiwyg editor. If there is a way to assign css to the iframe at the point the iframe's are created... I would be very interested :)

Bringing up an old topic...

Mark, do your super cool WYSIWYG custom buttons and styles get broken during upgrade? Or do you just replace your styles in the appropriate folder?

[quote]Bringing up an old topic…


Mark, do your super cool WYSIWYG custom buttons and styles get broken during upgrade? Or do you just replace your styles in the appropriate folder?[/quote]



Yet again joining this one late… late… late… :slight_smile:



Griffith have fed back the plugins to Squiz. I will be following these up in the future, however I would doubt the html area wysiwyg editor is marked for further development… not really my call tho… but with the advances of MySource4 --> an editor that does not use the editable region of the browser --> really does make html area look so yesterday (omg no more kath & kim!) What I'm saying is that an upgrade is not likely to write over existing fudge/wisiwyg/plugins code. This is not guaranteed and as Griffith have done any mods (even html tidy) really should be communicated to your account manager. Or project manager if prior to go-live.



But in the spirit of open source… any hints of eg code for a dev environment (not voiding prod SLA) then just ask and go nuts!! :o

[quote]Yet again joining this one late… late… late… :slight_smile:


Griffith have fed back the plugins to Squiz. I will be following these up in the future, however I would doubt the html area wysiwyg editor is marked for further development… not really my call tho… but with the advances of MySource4 --> an editor that does not use the editable region of the browser --> really does make html area look so yesterday (omg no more kath & kim!) What I'm saying is that an upgrade is not likely to write over existing fudge/wisiwyg/plugins code. This is not guaranteed and as Griffith have done any mods (even html tidy) really should be communicated to your account manager. Or project manager if prior to go-live.



But in the spirit of open source… any hints of eg code for a dev environment (not voiding prod SLA) then just ask and go nuts!! :o[/quote]



Hey Mark, I have again been looking at your Flickr gallery of your beautiful WYSIWYG redesign. I am working on this at the moment, and have a few questions. How were you able to remove the "Insert Div" tables that are always above and below the wysiwyg area? I am not seeing that they have specific IDs, so it would be hard to hide them with CSS.