WYSIWYG Hack For WordPress

by JD — May. 29, 2004 @ 4:13 PM

NOTICE Feb. 2, 2005:
There is now a new and improved version of the wysiwyg hack available. Go here to get the new version:
http://mudbomb.com/archives/2005/02/02/wysiwyg-plugin-for-wordpress/

42 Comments »


  1. Pingback by Standing Tall » WordPress?? — Jul. 19, 2004 @ 10:54 AM

    [...] #8220;more” with WordPress????????? WYSIWYG???? Mudbomb?WYSIWYG [...]

  2. Comment by Wordpress User — Jun. 16, 2004 @ 8:07 PM

    This looks great! I’m going to install it.
    But I think it doesn’t work with Safari :(

  3. Comment by Joe Schmoe — Jun. 17, 2004 @ 10:00 PM

    Unfortunately there’s no Safari support yet, but it works great with IE and “mostly”-great with Mozilla(a couple of quirks here and there in Mozilla but it’s still 99% functional).

  4. Comment by hork — Jul. 8, 2004 @ 8:53 AM

    This hack looks excellent! I’m going to give it a try. Just out of curiosity, what are you using for posting images on your site? Does the insert picture in the hack use the wordpress upload files functionality, or are you using some other plugin to upload images?

  5. Comment by Joe Schmoe — Jul. 10, 2004 @ 1:18 AM

    I’m just uploading via the WordPress “upload files” and then using the wysiwyg to put the images into my posts. If you’re hotlinking an image, you can just right click on the image and copy, then paste it into the wysiwyg box.

  6. Comment by RPG — Aug. 11, 2004 @ 1:11 PM

    Hey Joe. I’m hoping you’ll see this, since I can’t find your e-mail address. I’m having some trouble with the paragraph and linebreak formatting. Right now, each new line is treated as a

    paragraph

    . Is there a way to set it up so new lines are
    , and then a blank line between paragraphs indicates a new

    paragraph

    ? (I.E. like it was with the normal basic editor.) I tried looking through the HTMLArea code, edit-form-advanced.php, and a few other .php files but I never found anything that I thought could help me out.

  7. Comment by Joe Schmoe — Aug. 12, 2004 @ 6:09 AM

    Just hold down the shift key while hitting enter. That will enter a break instead of a new paragraph.

  8. Comment by RPG — Aug. 14, 2004 @ 3:54 PM

    Thanks, Joe. While useful, that isn’t really what I wanted to know. My problem is that I’m trying to set this up for someone else, and I’d like something a little more intuitive than SHIFT+ENTER for a linebreak.

    I’m sure that explaining how to do what I want to do would be a rather long and involved task, but would you be able to at least tell me where I should start looking to change the paragraph formatting?

    After looking at the database entries, I’m guessing that somewhere in the post function there is a parser that replaces single linebreaks with a &lgt;br /> and double linebreaks with a new paragraph. So, to my basic understanding, it seems like I only need to know how or where to change the functions in HTMLArea that assign the <br /> and new paragraphs.

    Thanks.

  9. Comment by Joe Schmoe — Aug. 16, 2004 @ 7:35 PM

    Unfortunately, this is part of the basic functionality of htmlarea and I wouldn’t know how to begin changing it. MANY of the other functions rely on ENTER to produce a paragraph mark. For example, if the behavior was changed to a break, ordered and unordered lists wouldn’t work, and neither would indenting :(

    Although not ideal, there are a couple of work-arounds you could try:

    1.) You could insert a toolbar button for break, so that instead of SHIFT+Enter, they could just click the toolbar button when they wanted a single linebreak.

    2.) In the WordPress stylesheet, you could set the storycontent paragraph to have a 0 margin, effectively making a paragraph appear as a linebreak. You can also set a htmlarea stylesheet so that paragraphs look like breaks in the editor as well.

  10. Comment by Noah — Aug. 22, 2004 @ 4:05 PM

    Why does it default to advanced editing mode when I edit posts?

  11. Comment by Joe Schmoe — Aug. 22, 2004 @ 6:19 PM

    Hi Noah,
    That’s just the way WordPress works. It always defaults to advanced view when editing. You might check on the WordPress forum to see if there’s a way to change it.

  12. Comment by Diane — Oct. 1, 2004 @ 6:17 AM

    The only thing I noticed was that, when I inserted a list and then typed a paragraph below it, it inserted a line break below … so the text below the list was in an overlarge font.

  13. Comment by Diane — Oct. 1, 2004 @ 6:18 AM

    Oops. I should add that it’s a great plugin. People can get used to small workarounds; it’s asking clients to grasp — and use! — HTML that’s a problem. Thanks again.

  14. Comment by 1stpixel — Oct. 13, 2004 @ 3:12 PM

    Thanks! You saved me a lot of time ;-)

  15. Comment by dkaye — Oct. 17, 2004 @ 10:11 AM

    Joe – while a great add-in, it sadly doesn’t work with Opera. The editor is not recognized at all, and WP defaults back to a basic editor.

    I’ll try again some time down the road to see if support is available for Opera, as I’m not a user of IE nor Mozilla.

    Thanks.

    Kaye

  16. Comment by Joe Schmoe — Oct. 17, 2004 @ 1:11 PM

    Hi Kaye,
    Unfortunately, I don’t think Opera supports any type of javascript wysiwyg editor. I’ve checked out most of the editors currently in development and they only support IE, and in some cases, Mozilla. :(

  17. Comment by Randy — Oct. 18, 2004 @ 2:21 PM

    I can’t see where you can change font size or color. Is that a feature of this editor or do you plan on adding this later? I’m changing font size and color by adding quicktag buttons in the quicktag.js file in addition to adding horizontal lines and a few other things.

    Looking forward to following this.

  18. Comment by Joe Schmoe — Oct. 18, 2004 @ 3:00 PM

    Don’t go by the screenshot. That’s the old version and the new one looks a bit different.

    By default, you can change both font color and text background color. Changing fontsize is not enabled by default, but you can easily add it. Open edit-form-advanced.php. Go to line 154 and you will see a list that looks like this:
    config.toolbar = [ [ “bold”, “italic”, “underline”,

    Add “fontsize” to the beginning of the list, so that it looks like this:

    config.toolbar = [ [ “fontsize”, “bold”, “italic”, “underline”,

  19. Comment by Joe Schmoe — Oct. 23, 2004 @ 6:52 PM

    Just a note. If the WYSIWYG is not displaying for you, you probably have a problem with the java install on your system. You can check your java here:
    http://www.java.com/en/download/help/testvm.jsp

    Scroll down the page to where it says Test your JVM. If java is correctly installed, it will give you your java version.

  20. Comment by doug — Oct. 26, 2004 @ 4:34 PM

    how does one integrate the imagemanager plugin for htmlarea (http://www.zhuo.org/htmlarea/) with this hack — are they compatible?

  21. Comment by Joe Schmoe — Oct. 27, 2004 @ 12:22 AM

    Doug,
    Xiang Wei Zhuo has not updated the Image Manager to the nightly build of htmlarea(which fixes some major Mozilla problems), so the the ImageManager is not compatible with the wysiwyg hack.

  22. Comment by doug — Oct. 27, 2004 @ 10:55 AM

    Thanks Joe for the update. Great hack nonetheless

  23. Comment by donner — Oct. 29, 2004 @ 7:39 AM

    Hi,

    your script is really great. But I find a small problem.

    for example:

    write a two line post:

    test1
    test2

    and save it.

    When I begin to edit, then it goes to the advanced view with the htmlarea. Then I make no changes and save it. The break between test1 and test2 is cut. I have also checked the database, it is so, the break is cut.

    How to keep the break in the database?

    And I don’t want to keep the br in the database? That means, if I write a plain text, I don’t want to have any html tags.

    Another question is, I copy a html page direct into htmlarea, and if I want to use “more” and “nextpage” function, how?

    Thank you!!!

  24. Comment by Joe Schmoe — Oct. 29, 2004 @ 12:29 PM

    donner,
    The issue you are referring to only effects posts written in simple editing view and then edited. The wysiwyg uses valid xhtml to denote line and paragraph breaks, while the default WordPress simple editor does not. IMHO, the WYSIWYG method is better, because if you ever decide to switch to a different blogging system or to publish a post in a web page, your formatting will be retained with the br and p html.

    More and Nextpage are not included in the toolbar by default, but you can add them.Open edit-form-advanced.php. Go to line 154 and you will see a list that looks like this:
    config.toolbar = [ [ “bold”, “italic”, “underline”,

    Add “more” and “page” to the beginning of the list, so that it looks like this:

    config.toolbar =[[ “more”, “page”, “bold”, “italic”,

  25. Comment by Glen Piper — Nov. 1, 2004 @ 12:30 PM

    Well, after several reinstalls of the htmlarea directory structure, it’s now working. It looks like the problem was with the permissions on the htmlarea directory itself — it needs to be (and now is) 755, where before, IIRC, it was set to 644.

    FWIW, it also works with either the original edit-form-advanced.php file or the “Donner version”.

    Thanks again for all your help!

    -ghp

  26. Comment by Joe Schmoe — Nov. 1, 2004 @ 9:17 PM

    Glen,
    Thanks for posting back with your solution as it might help others.

    Every web server I’ve hosted with gives new folders 755 permission by default, so I didn’t even think to ask about that. Glad it’s working for you now.

  27. Comment by Randy — Nov. 18, 2004 @ 12:16 AM

    Joe:

    Finally getting around to this. After downloading and decompressing your WYSIWYG file I noticed all the folders were automatically set to 700 and all files were set to 600. So I had to change them to 755 and 644 respectively.

    Also, I added the fontsize to the “config.toolbar=” line and it worked fine but then I tried to add the “more” or “page” but those didn’t work. Why not?

    What other items can I add to the “config.toolbar=” line? Tables? Anything else. I’d like to know all of them.

    One more thing right now: I would like to use the Lazy Image Layout Plugin and have the image icon in the toolbar make that code. Can you look into this or give me some direction?

    Thanks

    Randy

  28. Comment by Duncan Mak — Nov. 22, 2004 @ 12:22 PM

    I tried to install this editor, but nothing shows up. If I explicitly go to the edit-form-advanced.php page, it first complains that the __() function cannot be found, which can be fixed by adding require_once (‘../wp-include/wp-l10n.php’). Subsequently, it complains about not finding the dropdown_categories() function; I tried requring functions.php, but that doesn’t fix it.

    I tried on both Linux and Windows XP SP2, on Firefox 1.0 as well as Internet Explorer. I have Java working on both setups…

    Am I doing something wrong?

  29. Comment by Alexliam — Nov. 23, 2004 @ 2:33 AM

    When i install the hack it dont show the same numbers of buttons that shows in your image… why?

  30. Comment by Joe Schmoe — Nov. 23, 2004 @ 8:30 PM

    Sorry for the late response guys. I’ve been a bit bogged down with work lately …and Half Life 2 ;-) .

    Randy: You can add other stuff, but some of it doesn’t pass xhtml validation, so that’s why I didn’t include some buttons in the default install. Can’t recall all of the stuff you can add, but you can see them by opening up htmlarea/htmlarea.js in a text editor and find the line that says “this.toolbar=” and there’s a list.

    Duncan: Are you using the nightly release of WordPress? I haven’t tested the hack with the nightly, only with the “official” 1.2.1.

    Alexliam: The image is from the old version of the hack. The new one doesn’t have some of the unnecessary buttons like copy, cut, paste, etc. You can perform these functions by right-clicking anyway, so the buttons aren’t needed.

  31. Comment by Alexliam — Nov. 24, 2004 @ 7:44 AM

    Thanks Joe. Other question, how can i put images like in the screenshot?? When i put an image and try to write it put on other line…

  32. Comment by Joe Schmoe — Nov. 24, 2004 @ 12:04 PM

    In the insert image dialog box, you’ll see a select box labeled “alignment”. You can set this to right, left, etc. The “horizontal” box determines the size of the margin around the image.

  33. Comment by Crsitian — Nov. 27, 2004 @ 1:18 AM

    Thnx a lot, your hack are working ok on my site!!!

  34. Comment by Ray in Chicago — Nov. 29, 2004 @ 10:25 PM

    Joe,

    As a newbie WordPress user, I got the wysiwyg editor installed and running first time. It works great! My one question right now is: Can we have the default for it to be off and turn on manually?

    Thanks again!

  35. Comment by Joe Schmoe — Nov. 30, 2004 @ 10:11 PM

    Ray,
    Unfortunately, there’s no way to set the wysiwyg to be “off” by default. You can only turn it off by letting it load and then clicking the <> button.

  36. Comment by Free website content — Dec. 4, 2004 @ 5:51 AM

    Kool hack man, will upload it asap and let you know!

  37. Comment by Randy — Dec. 7, 2004 @ 2:29 PM

    Randy here again

    I am trying to add the horizontal line to the tool bar but as you know it won’t validate.

    In the default WP install you have a Quicktag.js file where you can go in and change what is written when you click the icon. I would like to do the same thing with the horizontal rule tool. Is that possible and where can I find that in the code?

    Thanks for your help.

  38. Comment by Joe Schmoe — Dec. 13, 2004 @ 2:27 AM

    Randy: Sorry for the late reply. I’m not really sure if this could be done. The code inserted for a horizontal rule is part of the core functionality of the htmlarea plug-in. But, you might be able to find some info on the htmlarea support forum on how to do this.

    Sorry :( I know that’s not a very helpful response.

  39. Comment by Hans-Göran Puke — Jan. 4, 2005 @ 11:40 AM

    Great! But how do you install this plugin?
    I just unzipped it into the wp-contents/plugins directory, but it doesn’t show up in the plugins-screen in the admin interface! (Yes, I chmod all the files to 644 and all directories to 755)

    Can you help me out?

  40. Comment by Joe Schmoe — Jan. 4, 2005 @ 1:53 PM

    None of the files go in the WordPress plugins folder. Full installation instructions are in the readme.txt file included in the archive. Basically, you just unzip everything into the wp-admin folder.

  41. Comment by Alejandro — Feb. 9, 2005 @ 11:05 PM

    I’ve tried and what can I say, I love it, BUT the problem is when you use Permalinks. For example i have this: /archives/%year%/%monthnum%/%day%/%post_id% and when I attach a photoI will see it in the front page, but not in the article page. For example, look at this one:
    http://weblog.homelinux.org/archivos/2005/02/10/40
    you will see no image, but go to the root and you will see it:(
    Is there a way to solve this one?
    Thanks
    Alejandro

  42. Pingback by Territorial Bloggings » Stats Added — Mar. 6, 2005 @ 7:05 PM

    [...] icularly since I tweaked that out to use the htmlarea hack for WYSIWYG editing provided by Joe Schmoe. I’m not sure if I’ll stick with the non-WP client, but [...]

RSS feed for comments on this post. TrackBack URI

Leave a comment