Real WYSIWYG Plugin
« Back to WordPressThe Real WYSIWYG plugin turns the TinyMCE Visual Editor in to a real WYSIWYG editor. TinyMCE allows you to import style sheets into the editor window. The Real WYSIWYG plugin uses this ability to import your theme's style sheet, allowing it to display the post as it will look when published.
Download
This software is licensed under the CC-GNU GPL.
Tip Jar
Installing
- copy the 'real-wysiwyg' directory to your 'wp-contents/plugins' directory.
- Activate the Real WYSIWYG plugin in your plugins administration page.
- If your theme supports Real WYSIWYG then the editor window should now look the same as your posts. Otherwise, you may need to configure Real WYSIWYG via the options menu to include any extra stylesheets your theme may have and to include any extra css so that the editor body will be correctly styled. For instance, for the default them, the following CSS is added to the Extra CSS field:
.mceContentBody { line-height:1.31em; text-align:justify; font-size:0.8em; margin:2.5ex auto; padding: 0pt; width:450px; background:transparent url('../../themes/default/images/kubrickbg-ltr.jpg') repeat-y scroll center top; background-color:#e7e7e7; }
Screen Shots
- Editing a post (in the Vistered Little Theme) using TinyMCE and the Real WYSIWYG plugin
- The same post as published.
- Screenshots 1 and 2 combined at 50%. Pixel Perfect.
Release Notes
0.0.2
- Fixed bug that prevented automatic support for the Default Theme.
- Added some more CSS for the Default theme.
0.0.1
- Fixed defect in link to xhtmlxtras stylesheet
0.0.0
- Initial Release
this looks great and very promising. still I am not 100% sure how to get it to work with another non-default theme. could you expand your explanations a bit maybe?
most themes have the post contained within a div element, which has a class of “post”. The theme author then creates css to make the post look the way they want. For the editor, the same css needs to be applied to a body element with a class of “mceContentBody”. The hard part is finding out what css applies to the post and the contents of the post.
thx for explaining. that helped a lot. now lets see: my blog looks like this: #wrap #content #contentmiddle followed by the content of the post.
do I only need to apply the style of content-middle to mceContentBody? I guess so. I’ll try it later this evening and let you know if it worked.
thx
You’ve also got to remember that styles cascade. e.g., you might have some style that applies to children of #wrap that effect the presentation of the post. I use Firebug to figure it out.
With Firebug I can inspect the element that contains the post (and elements within that) and see what formatting applies.
yeah I use firebug. it tells me what styles cascade from which element. nice tip, didn’t think to use this. so I’ll just copy all cascaded styles that apply to my post
@berchman: From what I can see you are using a custom theme called berchman. In order for RealWYSIWYG to support your theme, you either can add some CSS via the Real WYSIWYG admin page (under the ‘Options’ page in the admin section. Basically you want to add CSS to style everything under a an element with class
.mceContentBodywith the same styles it would get if it was in an element with a class of “post” or “entry”. e.g. (taken from your extra.css),.mceContentBody { margin: 0 0 30px; padding: 0; font-size: 1.1em; line-height: 1.4em; } .mceContentBody .entrytext { margin: 60px 0 0 0; padding: 0; } .mceContentBody .entrytext p { margin-bottom: 20px; }The other option is to make these modifications directly in your theme (in extra.css), thus if you use the theme in another blog, you can just copy the theme files across.
hi
i cant get this to work. i am using red-top by bob theme (http://www.blogohblog.com/)
i copied the .css file into the real wysiwig options css form. Still my wysiwig editor looks like default
can you helps me? thanksyou
I’ve sent you (and bob) an email with an updated stylesheet for Red Top. It should be good now.
Hi,
I’m really trying to get this to work on a multi user blog at Spondon Off Road as my users are complaining that the written post does not look like the published post and they are right.
The plugin, is having some influence, as the text area is black with grey writing.
The problem is that I cannot influence the width of the posting area.
I have tried
.mceContentBody {width:200px;}and.mceContentBody body{width:200px} in both the blog stylesheet and in the extra css.
I am running 2.3, is this a problem?
Thanks
Mark
I can’t seem to get either this or the Tiny Table plugin to work… I am also using 2.3.1. Is there something obvious I missed?
looks good! nice plugin, thks
i installed this plug-in, because i think it would be really useful, except that it turned my entire post editor window black so that i can’t see what is being typed.
it also seems as if it is defaulting to some strange CSS formatting (everything is also centered and there are some strange div tags).
is this a common problem, and is there an easy fix?
i’ve gone through several .css files and i can’t seem to find the tags that may be causing this.
Hi, any chance the plugin isn’t working with the current trunk version of WP 2.5? I installed it, but the CSS in the options pages isn’t applied to the .MCE… classes in the editor.
I can’t uninstall this plugin!!..it stills styling my posts editor!
This is a great plugin, but unfortunately doesn’t seem to work with Wordpress 2.5… any chance of a fix soon? Thanks, and good work.
hi there.
is it really not 2.5 compatible?
if not, any plans to update it?
Thanks, this is exactly what i was looking for.