80beans

• About
• Team
• Portfolio

13 Comments on “Introducing WysiHat Engine”

1. 
   1 Joshua Peek said at 5:30 AM on October 2nd, 2009:

   WysiHat was always meant to be a small and focused core and allow for easy extension. I’ve been waiting a while to see some cool toolbar sets or plugins from the community.

   This Rails plugin is really awesome. The image uploading flow is a great example of how a wysiwyg editor can improve the user experience.

2. 
   2 Martijn Lafeber said at 9:27 AM on October 2nd, 2009:

   Looks very promising! If they can fix the “paste from Word” issue I’d switch in an instant.

3. 
   3 Jeff Kreeftmeijer said at 9:44 AM on October 2nd, 2009:

   Hi Martijn,

   We built a :buttons option called :paste. This allows you to copy anything and paste it in without the layout.

   That’s probably not what you meant. If I understand correctly, you’re talking about a feature that will allow you to paste content from word and preserve the layout, rather than removing it (something like TinyMCE has).

   I think that would be an awesome feature and maybe that kind of (backend) functionality would even be great to put into the WysiHat core. I will definitely look into this!

   If you have any ideas on how to do this or if you would like to help building this that’d be great!

4. 
   4 Joshua Peek said at 3:36 PM on October 2nd, 2009:

   I’ve had sanitization built in from the start to address this problem.

   
// Custom sanitization
editor.outputFilter = function(text) {
return text.formatHTMLOutput().sanitize({
tags: ['span', 'p', 'br', 'strong', 'em', 'a'],
attributes: ['id', 'href']
});
};

   // Clean up editor on paste
editor.observe("wysihat:paste", function(event) {
setTimeout(function() {
event.target.reload();
}, 1);
});


5. 
   5 Michael van Rooijen said at 11:04 PM on October 2nd, 2009:

   Nothing but pure brilliance!

   A while back I was looking for (asked around twitter, searched through google, even asked Jeff Kreeftmeijer himself for his opinion and suggestions!) to find a good WYSIWYG editor I could repeatedly use without switching back and forth editors per project. (Inconsistency is one of the things I truly hate).

   I’ve used a couple of rich text editors, but always found them way to heavy or inflexible and extremely irritating to implement and customize. I prefer keeping all my logic bundled inside my Rails application. By “logic” I mean scripting/programming logic. So having to go into Javascript mode to do all sorts of things to my “text area” to get it working inside a different layer of my application, which does not consist of a single line of Ruby.. No Thanks!

   Enter: “WysiHat Engine”.

   Giving me a WYSIWYG’d text area by replacing “form.text_area” with “form.wysihat_editor” and, on the same line, telling it what buttons I wish to use? Brilliant! Need image uploading? :buttons => [:image]. Now, the other part I like, is the fact that this does not come with a whole pre-installed GUI like basically every other WYSIWYG out there. It gets wrapped inside of divs and you get all the flexibility to style the GUI to your web application’s style with ease.

   All I can say is thank you for bringing me “the missing WYSIWYG editor” to us in such an elegant, easy to use and robust way!

   And all I can do is FORK and SUGGEST!

   I would love to see both this “WysiHat Engine” as well as the “WysiHat Javascript Core” evolve over time!

6. 
   6 Jeff Kreeftmeijer said at 4:44 PM on October 3rd, 2009:

   @josh thanks! I’ll be replacing that piece of code to use your sanitize feature!

   @michael thanks for your kind words, but the credit for this goes to Joshua Peek:
   “thank you for bringing me “the missing WYSIWYG editor” to us in such an elegant, easy to use and robust way!”

7. 
   7 Michael van Rooijen said at 5:13 PM on October 3rd, 2009:

   @jeff no problem. Thank you!

   Regarding the Quote:
   I gave you credit for “bringing” the missing editor to us in an elegant, easy to use and robust way!

   Cause without the WysiHat Engine I might’ve never looked into WysiHat itself at all! And now I don’t really “have” to thanks to this Engine.

   So, thank you for that, my friend! ;)

8. 
   8 Clemens Kofler said at 6:17 PM on October 3rd, 2009:

   While I love that you picked up Josh’ work on WysiHat, I’d love to see this be more unobtrusive – that inline JS just looks scary as hell. Why not make it unobtrusive by just adding a :class => ‘wysiwyg’ to the textarea and handle the rest in JS? Or am I missing something?

9. 
   9 Roy Tomeij said at 6:30 PM on October 3rd, 2009:

   @Clemens: You are absolutely right. I must admit that we haven’t had a good look at the front-end yet, and we should definitely do that on a short term.

10. 
    10 Jeff Kreeftmeijer said at 6:31 PM on October 3rd, 2009:

    Hi Clemens,

    You’re absolutely right and I’m planning on doing that. At first, the javascript code needed was pretty small so I put it inline. But as I added helpers it grew.

    Expect a fix very soon and thanks for pointing it out!

    Update – October 3, 9:39 PM

    We just pushed a new version of the gem. It has a file called wysihat_engine.js which holds most of the javascript that was inline (except for the addButton() calls). :)

11. 
    11 Santiago Pastorino said at 10:09 PM on October 4th, 2009:

    I’d like to see a jQuery version or even better an agnostic one

12. 
    12 Roy Tomeij said at 8:31 AM on October 5th, 2009:

    @Santiago: WysiHat was created on top of Prototype. Although it would certainly be great to be able to use it with other JS frameworks (or none at all), it’s outside of the scope of this project. We would be happy to implement support for non-Prototype based WysiHat forks in our engine though.

13. 
    13 xain said at 9:53 AM on December 4th, 2009:

    I want a image insert button ( Insert an image with url), how can I add it?

Leave a Reply