8 ms·
Bootstrap-wysihtml5: a simple, beautiful wysiwyg editor
- mhd 15y agoTotally broken for me. Firefox has weird selection behavior (trying to italicize one word often catches the previous one, next one, whole sentence - or works normal), with Chrome the buttons don't work at all and with Camino (older Gecko engine), I can't even place the cursor.
- jfhollingworth 15y agocan you try http://tifftiff.de/wysihtml5/examples/advanced.html http://tifftiff.de/wysihtml5/examples/advanced.html and seeing if you see the same issues?
- sachleen 15y agoFirefox 11 has the italics issue in both the normal and advanced editor.
- BillSaysThis 15y agoI have the same issue with the original linked example using Chrome on OSX but do not have the trouble on the advanced.html page.
- mhd 15y agoWorks better, but it has its share of weirdness. Just by clicking around on a "lorem ipsum" text it seems to work okay in Firefox (beta) and Camino (i.e. two Gecko versions), not at all in Chrome dev (clicking on italic/bold/h1 won't change anything) and if I select a line in Safari to make it a headline, it also applies the transformation to the following paragraph. If I then click "h1" again, everything is back to normal. A third click then works as intended, i.e. only the selected line is turned into a headline. From then on, this line works normal, but the whole game repeats itself if I do it with another line.
- huhtenberg 15y agoFWIW I am too on Firefox and I am not seeing any weird behavior. (Beautifully done, by the way. Great job.)
- pbhjpbhj 15y agoI had same issues as mhd on FF 10.0.2 on Kubuntu. Advanced example works without bugs for me; my test has following HTML output ("So this is <b>the</b> thing <i>then</i>?<br><br><h1><span class="wysiwyg-color-red">Does it always work?</span></h1><h2>If it does then, great!</h2>Or, y'know, not bad.<br><br><ul><li>Yes</li><li>No</li><li>Maybe</li><li>So!</li></ul><h1>Yay it worked!!</h1>").
- javan 15y agoThe new Basecamp uses wysihtml5 and we're quite happy with it!
- jfhollingworth 15y agoI actually found out about wysihtml5 after poking around in the new basecamp source code. I really loved your design thus why I made this.
- andyking 15y agoAre you happy to share your contact details? (If yes, say which) Are you happy to share your contact details? (If yes, say which) You may not be able to supply all this information at this stage but please do register as much as you can with them to be in with an opportunity to be part of this. You may not be able to supply all this information at this stage but please do register as much as you can with them to be in with an opportunity to be part of this.
- deleted 15y ago[deleted]
- hsmyers 15y agoGiven what I can do in notepad, this doesn't quite do it for me. Yes, notepad is not what-you-see-is-what-you-get, but it doesn't take that much to create a HTML repel and that followed by alt-tab allows me pretty much every thing I want. I am uncomfortable with 'some one else's idea of a good time' when it comes to feature selection---no <hr/>? Etc. Good idea in general, just not for me, not yet.
- bergie 15y agoFor a lot of users, WYSIWYG is good, especially if it really integrates with the web page you're trying to edit (not a non-styled IFRAME like in the traditional CMS editors). I also usually write in Markdown, but the latest breed of editors is starting to be good enough that I may be able to swap. And as for <hr />, that is usually configurable in the editor setup. Disclaimer: I'm an author of one the new editors, Hallo.
- antinitro 15y agoOff topic but I'm currently looking for a font size plugin for hallo, do you happen to know if one exists? (or anything using a select box).
- bergie 15y agoI don't think anybody has written that plugin yet. Could you post a ticket? I'm spending some days on Hallo and Create next week, and so could possibly write one.
- moondev 15y agook I am excited for this. Looks great and is super clean. If you could add support for predefined styles in the drop-down along with links and simple image insertion it could handle 90% of my wysiwyg needs for projects. Of all the wysiwyg editors out there it seems that most are just too bloated and the lightweight ones are just too "ugly".
- jfhollingworth 15y agoAdding links and images is next on the list. wysihtml5 supports it, I just need to update the UI
- deleted 15y ago[deleted]
- bergie 15y agoLooks promising! Might be an interesting additional editor candidate in Create (http://createjs.org/ http://createjs.org/). Though, Create is MIT and the wysihtml5 library used by this is GPL, so the licenses are not compatible. Currently we use Hallo (http://bergie.github.com/hallo/ http://bergie.github.com/hallo/) by default, and Aloha Editor (http://aloha-editor.org/ http://aloha-editor.org/) with bundled integration.
- bergie 15y agoOpened a ticket at wysihtml5 to reconsider their licensing: https://github.com/xing/wysihtml5/issues/22 https://github.com/xing/wysihtml5/issues/22
- jfhollingworth 15y agoIt's now been updated to MIT (https://github.com/xing/wysihtml5/commit/444bda34c16354ed05c233f58a9f35461334a616 https://github.com/xing/wysihtml5/commit/444bda34c16354ed05c...) as has bootstrap-wysihtml5's
- lukeholder 15y agoCreate (http://createjs.org/ http://createjs.org/) is no where near the quality of Mercury Editor, (http://jejacks0n.github.com/mercury/ http://jejacks0n.github.com/mercury/) me thinks.
- bergie 15y agoCreate is the CMS UI shell around a WYSIWYG editor (well, potentially around other widgets you need like datepickers and choosers as well). We could use Mercury quite easily as another editor option. Create's editor options are provided as jQuery UI wrapper widgets, for example: https://github.com/bergie/create/blob/master/src/editingWidgets/jquery.Midgard.midgardEditableEditorHallo.js https://github.com/bergie/create/blob/master/src/editingWidg... BTW, check out http://blog.liip.ch/archive/2012/03/20/cmf-editor-overview-screencasts-and-live-demo.html http://blog.liip.ch/archive/2012/03/20/cmf-editor-overview-s... and http://iks.alkacon.com/en/ http://iks.alkacon.com/en/ if you want to see a bit more comprehensive Create UI setups.
- evertonfuller 15y agoNeat, but doesn't work at all. Just the lists.
- science_robot 15y agoWhat gets sent when the form is submitted?
- jcoder 15y agoThis just decorates a <textarea>, you still need to create the form yourself.
- reedlaw 15y agoLooks very nice, but I was hoping it would work more like Google Docs: * The styles dropdown should update to reflect the style currently under the cursor. * Hitting tab on a list should further indent the list item. Those were just a couple of things I immediately noticed.
- phpnode 15y agothere's a non trivial lag when typing for me on chrome, makes it pretty hard to use
- jurre 15y agoI remember the new Basecamp having the same problem just after they launched (it's gone/fixed now), maybe someone from their team could chime in on how they solved it?
- javan 15y agoHmmm. Not sure what you're referring to. We've made some improvements (http://37signals.com/svn/posts/3137-using-event-capturing-to-improve-basecamp-page-load-times http://37signals.com/svn/posts/3137-using-event-capturing-to...), but nothing specifically related to the editor/Chrome.
- jurre 15y agoHmm ok, well the first two days after you launched the editor had some lag for me on Chrome on my MBA, especially the time from clicking the editor until it expanded and let me type would last 1 to 3 seconds and typing itself had some lag too. Anyone else had this problem?
- spiffistan 15y agoJust what I needed! Thanks!
- stef25 15y agoI currently use fckeditor for all client projects and I really want an alternative, so this looks perfect. I know it's probably not on top of your features list but inserting images would be a great add-on, most of my clients need it.
- jfhollingworth 15y agoInserting images and links is next on the list. https://github.com/xing/wysihtml5 https://github.com/xing/wysihtml5 supports them all - I just need to add it to the UI
- samwillis 15y agoIt looks like the beginning of a very nice project! I had a similar itch to scratch a few weeks ago when I wanted a nice simple editor for a project and modified the pagedown editor (the markdown editor from stackoverflow) to use bootstrap. Its here: https://github.com/samwillis/pagedown-bootstrap https://github.com/samwillis/pagedown-bootstrap You can see a demo here: http://dl.dropbox.com/u/2690345/pagedown-bootstrap-demo/demo/browser/demo.html http://dl.dropbox.com/u/2690345/pagedown-bootstrap-demo/demo...
- jfhollingworth 15y agoawesome! I'd personally much prefer to use markdown for my projects but unfortunately I'm not targeting developers :/
- billpatrianakos 15y agoI'm in the same situation. Got a hobby writing app slapped together that has a built in Markdown converter. I want normal people to use it but the idea is to focus on the writing, not the formatting so there's no buttons for WYSIWYG editing. I think I'm the right context Markdown only would work. In my situation I'm probably just going to throw up a short intro to Markdown tutorial for people who want to format their writing. It's okay in my case because the focus should be on words, not formatting and I have a hunch regular folks can learn Markdown within 20 minutes at most for the most part. Shameless plugs: http://writeapp.me http://writeapp.me (source on github at http://github.com/billpatrianakos/Write.app http://github.com/billpatrianakos/Write.app)
- leeoniya 15y agoshameless plug too, feel free to try my DOM > markdown project. should be easy to get any editor that generates DOM to emit markdown https://github.com/leeoniya/reMarked.js https://github.com/leeoniya/reMarked.js demo: http://leeoniya.github.com/reMarked.js/ http://leeoniya.github.com/reMarked.js/
- therandomguy 15y ago
- Johnyma22 15y agoA simple, beautiful collaborative editor: https://github.com/johnyma22/etherpad-lite-jquery-plugin https://github.com/johnyma22/etherpad-lite-jquery-plugin
- da_n 15y agoNice presentation and looks to have real promise, but the source output looks just as bad as WordPress (unless it is just the Developer Tools). I see spans with inline CSS, empty divs and br's all over the place. It doesn't look very clean but if I am wrong please correct me. Also, for practical use it needs indent controls for lists and there is a need to deal with links.
- billpatrianakos 15y agoI hear that but I feel like there are some things in life we'll never be rid of and messy markup from WYSIWYG editors is just one of those things. I've never known any GUI tool to produce clean code whether it be GUI settings managers on Linux or WYSIWYG editors on the desktop or web.
- bithive123 15y agoIt certainly is simple and beautiful but it also needs to be functional. I selected H2 and typed some characters, then backspaced to the beginning where it reverted to normal text but did not update the UI (still showed as H2).
- JonWood 15y agoThis is why I love open source. 30 minutes ago I was thinking "I wonder if there's a WYSIWYG editor that integrates with Bootstrap." And now, here I am, reading about it.
- iusable 15y agoSeems like the start of a great project! Would love to see somebody add in support for mobile browsers too :)
- dersebbi 15y agoNow THIS is what I was looking for. Simple. Clean. Integrates with bootstrap. In my case I need even less functionality. Just bold and lists. Will try this one!
- _frog 15y agoVery nice, although I'd say the icon for numbered lists could be better; right now it simply looks like a chunkier version of the bulleted list button.
- tmacwilliam 15y agoThis looks amazing! I've been using TinyMCE on a few projects, but I'm definitely taking this for a spin. Great job!
- chmike 15y agoNone of these wysiwig editors work properly on an ipad. I bet it is the same for smart phones.
- gokhan 15y agoTell Apple about it: http://openradar.appspot.com/7619599 http://openradar.appspot.com/7619599
- shadowfiend 15y agoOdd, there were reports of iOS 5 fixing issues with contentEditable: http://www.symphonious.net/2011/06/10/contenteditable-in-mobile-webkit-update/ http://www.symphonious.net/2011/06/10/contenteditable-in-mob...
- andybak 15y agoSigh. Deal-breaker. Hitting 'Enter' creates <br>s and not <p>s and it looks like they don't plan to change it: https://github.com/xing/wysihtml5/issues/13 https://github.com/xing/wysihtml5/issues/13
- arbrandes 15y agoI don't want to be the spoil sport, but even though this looks nice, am I the only one here that still believes in hand-coding HTML? (Disclaimer: I'm a zealot. I don't believe in IDEs, and I'll take grep over Eclipse any day of the week. http://xkcd.com/378/ http://xkcd.com/378/)
- btucker 15y agoMost of HN shares the same opinion, but what does this have to do with bootstrap-wysihtml5?
- hellerbarde 15y agoI think it's more a matter of context. In fact, I do believe in hand coding HTML. but this is a link for a simple wysiwyg editor. I would assume that this attracts mainly people that have _some_ need for a wysiwyg editor for _something_. So your demographic might be skewed inside this particular comment section?
- edude03 15y agoThis is pretty awesome, the only issue I have is it seems to escape my HTML automatically preventing me from using it as the editor for my blog :/