Extraordinary IT.
Real WYSIWYG Plugin
NOTE:The Real WYSWYG plugin has been made redundant by WordPress's support for editor style sheets.
The 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
[...] 8. Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin [...]
[...] Where you can get it: Searching in your Plugins menu or Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin – Windy Road – September 6th %(postalicious-tags)( tags: wordpress plugin plugins css wysiwyg editor wp )% [...]
[...] Real WYSIWYG Plugin [...]
[...] 2. Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin [...]
thanks a lot for the kind help this solve lots of problem for me as i was using the tinymce and other editor but this is the best.
[...] Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin [...]
[...] Real WYSIWYG Plugin [...]
Hello Tom;
I’m using the Thesis template on my blogs. I’ve tried pasting the code you got onsite here into the areas listed in the options menu under WYSIWYG and none of these code snips work. The editor stays in its default mode
Hello, does anyone know if this is compatible with WPMU 2.7? I’ve been going through the motions for the last 6 hours, trying all possible combination thinking I might be doing something wrong…..and if it is compatible could someone post a finished theme with the theme name so we can have a look to see what exactly was changed? It would be really apprecieated
Thanks,
Courtney Bostdorff
BTW, GREAT PLUGIN! I really wish that they would have written something like this into the core of WP. Thanks.
I can’t get the WYSIWYG to display. When I click on my “Settings” “Real WYSIWYG” the “EXTRA CSS” looks exactly like what you have in the example but when I click on “editor” all I see is code.
Any thoughts on this plugin working with WordPress 2.7? I’ve installed it and configured it, as explained in the documentation… but it doesn’t seem to actually do anything.
Hello: I’m a newbie. Real WYSIWYG seems not to be functional with WP Theme Destiny – http://www.freewordpressthemes.com/themes/3182/.
Any help would be greatly appreciated since the WP editor seems fairly primitive.
Thank you in advance,
Alan
Hi. I installed this plugin, and before TinyMCE, and nothing happens, my editor looks like the original one. If i click on HTMl, it does not happen anything. What happen? Thnaks a lot
Thanks, this is exactly what i was looking for.
hi there.
is it really not 2.5 compatible?
if not, any plans to update it?
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.
I can’t uninstall this plugin!!..it stills styling my posts editor!
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 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.
looks good! nice plugin, thks
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?
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
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.
@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.
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
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.
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.