7 ms·

Our tiny jQuery/Bootstrap rich text editor is now open-source

241 points by gojko 14y ago

samarudge 14y ago
This looks nearly identical to http://jhollingworth.github.io/bootstrap-wysihtml5/ http://jhollingworth.github.io/bootstrap-wysihtml5/ So ima take the hit of being a stupid person and ask, what's the difference? Why should I use this over bootstrap-wysihtml5 (or why should I use bootstrap-wysihtml5 over this)?
- gojko 14y ago
  bootstrap-wysihtml5 was a great inspiration. it links in wysihtml5, and gives it a skin. here's a few reasons why we decided to build this one: - wysihtml5 minimised is 112K + 20k for bootstrap-wysihtml5, without styles and images... this is only 5k, non-minimised. - we bind hotkeys for common operations automatically (eg cmd+b for bold etc) - drag&drop for images - automatically upload images using filereader, not just provide links - good support for touch devices - no magic around toolbar, so you can use your own styling - we don't force an inline iframe which mirrors a text area, which wysihtml5 does Wysihtml5 has a better support for older browsers, the bootstrap skin has toolbar translations, so I'd still use that if you don't want a custom toolbar or need to support older browsers
  - rattray 14y ago
    The lack of an iframe on yours is the killer feature for me (long story, but can't use an iframe for what I'd want this for). Great job all-around!
  - saravk 14y ago
    5KB is amazing. I thought that this would be a great replacement for bootstrap-wysihtml5 until i saw IE missing from your browsers list. Btw, for the drag and drop inserting of images. You should probably check the url of the image and if it is from local file storage then upload it to the server and insert the resulting link back. That would be a cool feature to have in a editor.
    - gojko 14y ago
      It's not tested in IE, but we don't use any browserbspecific code (apart from chrome speech) so it might work just fine. For server uploads, this would be pretty easy as a callback.
  - maaaats 14y ago
    I use wysihtml5 in a project. Mainly because all browser rich text editors are waaay to advanced. I don't want people to put images in my text fields, right align the text, put tables there, etc. wysihtml5 gives great control over what can be done. I want some rich editing, but I want full control over it. In my case a few text-types, bold, italic, bullet list and nothing more. Does your editor allow this kind of control?
    - gojko 14y ago
      we don't create a toolbar. It's up to you. so if you don't put buttons for that, they won't be able to do it. hotkeys on the keyboard are also configurable, you can just bind certain items so users won't be able to execute the other commands unless they open a javascript console and call doc.executeCommand manually (but then again, that's difficult to prevent for other editors)
      - maaaats 14y ago
        What if one copy-pastes in stuff that's not supposed to be there? With wysihtml5 it will clean up based on what's allowed. With yours, I believe I will need to do that manually?
        gojko 14y ago
        yes, we don't hook anything. i've not tried this, but you should be able to hook on to the paste event for that div (the div is really your markup, we don't do any magic shadow iframing)
        maaaats 14y ago
        Thanks for your replies. :)
  - deleted 14y ago
    [deleted]
- phillmv 14y ago
  It looks good, but it's hard to use. They added this whole layer of… sanitization? that strips out all sorts of tags. I'm open to it having been PEBKAC but I recall struggling with it There's definitely a need for a good bootstrap wysiwig form.
  - gojko 14y ago
    some cleanup might be good, eg when you select everything using cmd+a, then delete, some browser leave a <br/> in the content. I didn't like forced sanitization in wysihtml5, so we added an optional method .cleanHtml - you can just use the normal jquery html method to get the non sanitized contents, or call cleanHtml() to get trailing empty divs, <br/> and whitespace removed
darkchasma 14y ago
Although I like the idea of these, I'm far too paranoid to allow any user to use them.
- gojko 14y ago
  well we kind of need this to provide rich text editor for node attachments... This is how you can see it in action http://blog.mindmup.com/p/working-with-attachments.html http://blog.mindmup.com/p/working-with-attachments.html
archildress 14y ago
Looks like this could be really useful, nice work. Unfortunately I'm not having any luck entering text on my iOS6 iPhone.
deepak-kumar 14y ago
How is the performance on iPad? Do you guys do full strength testing on iPad etc.? It would be great if it can be optimized for other device browser as well. Good job. Keep it coming.
- gojko 14y ago
  for ipad and iphone, the toolbar has to move down otherwise the screen jumps around all the time. this isn't part of the widget as we wanted to keep styling out, but you can see it in action by going to http://www.mindmup.com http://www.mindmup.com , selecting any node and clicking on the paperclip icon in the tools menu (or on desktop pressing A on the keyboard). We move the box to the top of the screen and resize it so that a mobile keyboard can fit in, also moving the toolbar to the bottom.
  - deepak-kumar 14y ago
    Cool. Lately I have been involved in customizing/implementing features in text editors for one of my project and have solved some of the problems specifically for iPad. Hopefully I can contribute to this project. Thanks for making it open source. Good work.
    - gojko 14y ago
      fantastic. i'm looking forward to your pull requests :)
reyan 14y ago
Hotlinking raw.github.com assets has a rate limit. The demo is not working properly (apparently because of jquery.hotkeys.js).
- gojko 14y ago
  I've replaced the hotlink, hopefully the new page will be up soon
- ajanuary 14y ago
  raw.github.com serves js files with text/plain as the mimetype and a 'X-Content-Type-Options: nosniff' header, which prevents Chrome from executing it.
andrewingram 14y ago
FYI, the toolbar buttons change size on hover, it's a little distracting. It looks like they're getting thicker borders on the sides.
- gojko 14y ago
  ok. one of the key things about the widget is that it doesn't impose styling on you, so you can use whatever you want for the toolbar. I'll look into why the demo bootstrap style is doing that.
  - johnernaut 14y ago
    It's also doing it on the http://www.mindmup.com/ http://www.mindmup.com/ homepage. 0.o
    - gojko 14y ago
      i'll look into that as well :) thanks
  - nateweiss 14y ago
    Hi gojko, I believe if if you change this: $('a[title]').tooltip(); to this: $('a[title]').tooltip({container:'body'}); that little size-stuttering effect will be fixed.
    - gojko 14y ago
      thanks, it seems that's done the trick. I've republished the page
jonstewart 14y ago
Can this be toggled off and then have the content HTML rendered in the div?
deleted 14y ago
[deleted]
m_mueller 14y ago
Is anyone aware of a bootstrap based wysiwyg editor that also supports tables? So many cool editors omit this, but it's one of the most common rich text tools people want in business applications.
- gojko 14y ago
  I've not tried this, but I believe this would come down to creating a button that calls insertHtml with the basic table strucure, and calling enableInlineTableEditing before that. We just pass calls to execCommand, anything that's supported with that should work out of the box https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_M...
tuananh 14y ago
not bootstrap-based but I found [redactor](http://imperavi.com/redactor/ http://imperavi.com/redactor/) really good. It's not free to use though.
deleted 14y ago
[deleted]
- jplur 14y ago
  http://codemirror.net/ http://codemirror.net/ is a very pleasant way to set up code editing text areas.
jplur 14y ago
Very slick and great filesize. I've been working on a wysiwyg document editor and am very tempted to use this. My only problem is with contenteditable in general, which is hard to convince to use <p>'s. I'm rolling my own paste function and optimistic about getting the functionality you have, but definitely not in 5k ;) Also, do you have any idea of a resource for valid/invalid nesting rules for inline and block elements? I'm currently sanitizing to keep block elements at the top level.
- thesunny 14y ago
  I realize your rolling your own, but if you are interested in an available editor, we have SnapEditor which does exactly that. One of the core features is that it keeps the nesting of blocks and tables consistent. All P, H1, H2, etc. tags are always at the top level. If they are not (for example, after a Paste), we automatically fix the HTML so that it is. In this way, you always have consistent, predictable, HTML which makes it easy to style and reason about. It also works both as a form-based editor (traditional) or an inline editor (like Aloha editor). Sunny
malloc2x 14y ago
But does it work? A couple minutes of basic usage (FF20, Linux) have me in pain: - CTRL-B (and presumably other shortcuts) doesn't always take effect immediately. Sometimes there is delay, sometimes it seems necessary to let go of CTRL for the event to get flushed, sometimes nothing ever happens at all. Multiple hits without letting go of CTRL also behave erratically. - Focus stays on formatting buttons and requires manual click to get back to text widget. Several times I wondered where my text was, only to realize focus was on wrong widget. - By far the worst thing: the way formatting codes are handled leaves me crying for WordPerfect's Reveal Codes. Make some text bold, unbold the text after it, type something right after the bolded text, it isn't bold, hit enter for new line and type something, now it became bold again. Argh! I like the idea of this, but presently there are some rough edges.
- gojko 14y ago
  Thanks for reporting this. I didn't test under Linux as I don't have a linux box handy. We bind keyboard events to jquery keydown. Is it better to bind to something else for FF/Linux?
  - malloc2x 14y ago
    More testing: * On Chromium 25 and Chrome 26 the first two issues do not exist. * More playing with FF20 and it seems this is actually tied to CTRL+B, not any other shortcut. At least initially, clicking the "Bold" button also has no effect. Possible explanation: In FF CTRL+B opens the Bookmarks pane by default, in practice certain focus combinations do open this pane. This explanation would seem to require the Bold widget to be generating a keypress under the hood, though. * The codes issue is tricky, but one way to see an example on Chrome/chromium browsers is: 1. refresh page 2. select pre-existing "Go ahead..." text 3. type "this is bold and this is not" 4. select "this is bold" and make it bold 5. place cursor at start of " and this is not" 6. type "so is this", text is bold 7. hit enter and type "but this isn't", it isn't bold The original issue I saw was similar, but related to numbered bullet lists. To reproduce the third issue on FF follow the same steps, except a) one must first mash about on CTRL+B and/or the Bold button until they start working, then follow same steps. Result: you get the inverse, text in 6 is not bold, and text in 7 is. Sorry, don't have domain knowledge about keybinding.
btipling 14y ago
Was able to complicate the styling by getting bold that I couldn't unbold anymore.
otterley 14y ago
Minor editorial nit: "Boostrap" (sic) is misspelled on the front page. Thanks for putting it up, though!
- gojko 14y ago
  :( thanks for letting me know, I've fixed it
tambourine_man 14y ago
Looks nice, can't insert images with desktop Safari though (ML, latest). Will it have a “code“ button (check generated HTML)?
- gojko 14y ago
  can you give me a bit more info on "can't"? Did you try drag & drop or toolbar? what file type have you tried? We have a filter on content type in the editor, so only things read with content type image/* are inserted. Perhaps this is too strict? re "code" button, this would be trivial to implement but doesn't really belong in the widget. Just get the html out using jquery (it's your element) and show that instead of the element by passing through a formatter (or just jquery.text())
  - tambourine_man 14y ago
    Sorry for the lousy bug report, I hate when it happens to me. Neither drag n drop nor clicking on the "insert image" button displayed the image on the textbox. Tried both jpg and png. Works in Chrome and Firefox. Yes, I know it should only take a few lines of code, but it's something I usually take for granted in a wysiwyg editor.
    - gojko 14y ago
      could you check what content type the filereader reports when you upload from safari? I've just tried again with safari on OSX and it seems to work. perhaps I should detect the extension, not just content type...
lingben 14y ago
I'm having trouble with the bold button
uptown 14y ago
I'm curious about the voice-input feature. In your example, it's activated by clicking the microphone - but could a website activate this without a click (or by tricking a user into clicking something they thought was performing some other function)? Providing the ability to listen in and capture the audio from a user's location without any prompt seems like a huge potential security issue to me.
- gojko 14y ago
  no, this is an input field with chrome speech enabled (<input type="text" x-webkit-speech>). The microphone icon you see is the right part of that field, and the text is transparent. We've done it like that because at the moment only input fields support speech input in chrome, and we couldn't find a way to activate programatically. There is no onclick event on that part, it's just part of the text field.
  - uptown 14y ago
    Interesting. I'd known Chrome supported Voice input - just never tried it like this. For anyone wishing to disable this in your browser, the Chrome Extension TamperMonkey allows you to install UserScripts easily, and the UserScript named "Disable HTML5 Voice Search" on userscripts.org programmatically disables any voice-input controls on the pages you visit.
ahultgren 14y ago
Was really thrilled at first, this could be exactly the kind of wysiwyg-editor I've been looking for. Unfortunately it seems the markup returned by .cleanHtml() is completely useless (see http://pastebin.com/uwpSMKsi http://pastebin.com/uwpSMKsi). If I could get proper markup (paragraphs, headlines, not a thousand divs) and maybe the possibility to edit the markup myself this would be the perfect editor.
- 5vforest 14y ago
  To be fair, that's contenteditable's behavior, not this plugin's.
  - ahultgren 14y ago
    Oh. I didn't know that. That's bad news :( Guess I have to keep dreaming about a wysiwyg that actually works.
    - thesunny 14y ago
      We have an editor, SnapEditor, (http://www.snapeditor.com/ http://www.snapeditor.com/) and it will keep your HTML clean. You will get the output you expected. You can even cut and paste from Microsoft Word or Google Docs and it will fix your HTML to the way you'd expect. Sunny
      - nwzpaperman 14y ago
        What's the unminified size of the editor files and how many files are you down to for a completed page load? Thx!
        thesunny 14y ago
        I'm not currently doing development on the software myself so I don't know the file size for sure at this moment; however, I believe it's similar to Redactor which is known for its small size (not sure if it's more or less now because we've just cut more size off of our deliverable). As for number of files, I believe it is 1 Javascript file. The required HTML and CSS is compiled into the JS now to reduce number of files to transfer. I don't know how many images it is right now but if it is more than 1, then we will likely eventually compile it down to 1. Sunny
deleted 14y ago
[deleted]
dwelch2344 14y ago
Looks pretty cool. One thing I don't get tho: How does the image upload work? Does it just base64 encode it and use inline images?
- gojko 14y ago
  Inlines a data url using FileReader
podperson 14y ago
Speaking as someone who has just implemented a similar editor (but only dependent on jQuery) this editor has serious problems. To begin with, the UI does not respond to the selection (what will the bold button do given the current selection?) and using contentEditable DIVs will make 508 compliance horrendous (the selection is lost when a label gains focus). (Our editor allows either divs or iframes, but the latter is pretty much required for solid usability, unfortunately). The magic is all in execCommand, but you also need to be aware of cross browser issues and execCommand's limitations (e.g. IE won't style using CSS which is a huge pain. ExecCommand can toggle bold but not background color). In the end we use execCommand to create spans and then style the spans. Nice support for touch styling, speech input, mobile cameras, and dropping images though.
- eksith 14y ago
  You sound like you know your stuff. This is kinda how I felt too; a small addendum, less is often a good thing, but least is not better. I hope the glitches will get ironed out and will apply to textareas too though. I certainly would rather send a much smaller JS file, especially for mobile users. Is your editor open source? Any chance you would be willing to share an example as well?
  - podperson 14y ago
    We plan to open source our editor but it's up to the client (who is amenable, just hasn't gone through procedure). Our editor is far more functional, 508 compliant, will be IE8 compatible (argh), and weighs in at about 800loc. I wrote it rather than use something off the shelf because none of the popular choices have well-behaved UIs.
- kemayo 14y ago
  They got around the IE stuff by saying "Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)". This is, of course, a synonym for "don't bother to use me in anything but hobby projects". (Or stuff which is completely mobile-focused, I suppose.)
  - 14y ago
vindicated 14y ago
I'm wondering why a file upload dialog opens up when I click in the empty area beside the 'redo' button in the demo (FF 19). Is it just me?
primaryobjects 14y ago
It's nice, but I'm more of a fan of direct inline editing on the web page via HTML5 contenteditable=true. The Aloha Editor http://aloha-editor.org http://aloha-editor.org does this very well. I've actually just recently added their editor to my node.js mini cms, called ContentBlocks http://contentblocks.herokuapp.com http://contentblocks.herokuapp.com
- gojko 14y ago
  this does exactly that, sets a div to contenteditable=true, but also binds hotkeys for common operations, extends with toolbar support, provides filereader for drag&drop.
theone 14y ago
I really miss the ability to resize, move images. Every time try to move image, the chrome tab crashes.

241 points by gojko 14y ago

This looks nearly identical to http://jhollingworth.github.io/bootstrap-wysihtml5/ http://jhollingworth.github.io/bootstrap-wysihtml5/ So ima take the hit of being a stupid person and ask, what's the difference? Why should I use this over bootstrap-wysihtml5 (or why should I use bootstrap-wysihtml5 over this)?

gojko 14y ago
bootstrap-wysihtml5 was a great inspiration. it links in wysihtml5, and gives it a skin. here's a few reasons why we decided to build this one: - wysihtml5 minimised is 112K + 20k for bootstrap-wysihtml5, without styles and images... this is only 5k, non-minimised. - we bind hotkeys for common operations automatically (eg cmd+b for bold etc) - drag&drop for images - automatically upload images using filereader, not just provide links - good support for touch devices - no magic around toolbar, so you can use your own styling - we don't force an inline iframe which mirrors a text area, which wysihtml5 does Wysihtml5 has a better support for older browsers, the bootstrap skin has toolbar translations, so I'd still use that if you don't want a custom toolbar or need to support older browsers
- rattray 14y ago
  The lack of an iframe on yours is the killer feature for me (long story, but can't use an iframe for what I'd want this for). Great job all-around!
- saravk 14y ago
  5KB is amazing. I thought that this would be a great replacement for bootstrap-wysihtml5 until i saw IE missing from your browsers list. Btw, for the drag and drop inserting of images. You should probably check the url of the image and if it is from local file storage then upload it to the server and insert the resulting link back. That would be a cool feature to have in a editor.
  - gojko 14y ago
    It's not tested in IE, but we don't use any browserbspecific code (apart from chrome speech) so it might work just fine. For server uploads, this would be pretty easy as a callback.
- maaaats 14y ago
  I use wysihtml5 in a project. Mainly because all browser rich text editors are waaay to advanced. I don't want people to put images in my text fields, right align the text, put tables there, etc. wysihtml5 gives great control over what can be done. I want some rich editing, but I want full control over it. In my case a few text-types, bold, italic, bullet list and nothing more. Does your editor allow this kind of control?
  - gojko 14y ago
    we don't create a toolbar. It's up to you. so if you don't put buttons for that, they won't be able to do it. hotkeys on the keyboard are also configurable, you can just bind certain items so users won't be able to execute the other commands unless they open a javascript console and call doc.executeCommand manually (but then again, that's difficult to prevent for other editors)
    - maaaats 14y ago
      What if one copy-pastes in stuff that's not supposed to be there? With wysihtml5 it will clean up based on what's allowed. With yours, I believe I will need to do that manually?
      - gojko 14y ago
        yes, we don't hook anything. i've not tried this, but you should be able to hook on to the paste event for that div (the div is really your markup, we don't do any magic shadow iframing)
        maaaats 14y ago
        Thanks for your replies. :)
- deleted 14y ago
  [deleted]
phillmv 14y ago
It looks good, but it's hard to use. They added this whole layer of… sanitization? that strips out all sorts of tags. I'm open to it having been PEBKAC but I recall struggling with it There's definitely a need for a good bootstrap wysiwig form.
- gojko 14y ago
  some cleanup might be good, eg when you select everything using cmd+a, then delete, some browser leave a <br/> in the content. I didn't like forced sanitization in wysihtml5, so we added an optional method .cleanHtml - you can just use the normal jquery html method to get the non sanitized contents, or call cleanHtml() to get trailing empty divs, <br/> and whitespace removed

darkchasma 14y ago

Although I like the idea of these, I'm far too paranoid to allow any user to use them.

gojko 14y ago
well we kind of need this to provide rich text editor for node attachments... This is how you can see it in action http://blog.mindmup.com/p/working-with-attachments.html http://blog.mindmup.com/p/working-with-attachments.html

archildress 14y ago

Looks like this could be really useful, nice work. Unfortunately I'm not having any luck entering text on my iOS6 iPhone.

deepak-kumar 14y ago

How is the performance on iPad? Do you guys do full strength testing on iPad etc.? It would be great if it can be optimized for other device browser as well. Good job. Keep it coming.

gojko 14y ago
for ipad and iphone, the toolbar has to move down otherwise the screen jumps around all the time. this isn't part of the widget as we wanted to keep styling out, but you can see it in action by going to http://www.mindmup.com http://www.mindmup.com , selecting any node and clicking on the paperclip icon in the tools menu (or on desktop pressing A on the keyboard). We move the box to the top of the screen and resize it so that a mobile keyboard can fit in, also moving the toolbar to the bottom.
- deepak-kumar 14y ago
  Cool. Lately I have been involved in customizing/implementing features in text editors for one of my project and have solved some of the problems specifically for iPad. Hopefully I can contribute to this project. Thanks for making it open source. Good work.
  - gojko 14y ago
    fantastic. i'm looking forward to your pull requests :)

reyan 14y ago

Hotlinking raw.github.com assets has a rate limit. The demo is not working properly (apparently because of jquery.hotkeys.js).

gojko 14y ago
I've replaced the hotlink, hopefully the new page will be up soon
ajanuary 14y ago
raw.github.com serves js files with text/plain as the mimetype and a 'X-Content-Type-Options: nosniff' header, which prevents Chrome from executing it.

andrewingram 14y ago

FYI, the toolbar buttons change size on hover, it's a little distracting. It looks like they're getting thicker borders on the sides.

gojko 14y ago
ok. one of the key things about the widget is that it doesn't impose styling on you, so you can use whatever you want for the toolbar. I'll look into why the demo bootstrap style is doing that.
- johnernaut 14y ago
  It's also doing it on the http://www.mindmup.com/ http://www.mindmup.com/ homepage. 0.o
  - gojko 14y ago
    i'll look into that as well :) thanks
- nateweiss 14y ago
  Hi gojko, I believe if if you change this: $('a[title]').tooltip(); to this: $('a[title]').tooltip({container:'body'}); that little size-stuttering effect will be fixed.
  - gojko 14y ago
    thanks, it seems that's done the trick. I've republished the page

jonstewart 14y ago

Can this be toggled off and then have the content HTML rendered in the div?

deleted 14y ago

[deleted]

m_mueller 14y ago

Is anyone aware of a bootstrap based wysiwyg editor that also supports tables? So many cool editors omit this, but it's one of the most common rich text tools people want in business applications.

gojko 14y ago
I've not tried this, but I believe this would come down to creating a button that calls insertHtml with the basic table strucure, and calling enableInlineTableEditing before that. We just pass calls to execCommand, anything that's supported with that should work out of the box https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_M...

tuananh 14y ago

not bootstrap-based but I found [redactor](http://imperavi.com/redactor/ http://imperavi.com/redactor/) really good. It's not free to use though.

deleted 14y ago

[deleted]

jplur 14y ago
http://codemirror.net/ http://codemirror.net/ is a very pleasant way to set up code editing text areas.

jplur 14y ago

Very slick and great filesize. I've been working on a wysiwyg document editor and am very tempted to use this. My only problem is with contenteditable in general, which is hard to convince to use <p>'s. I'm rolling my own paste function and optimistic about getting the functionality you have, but definitely not in 5k ;) Also, do you have any idea of a resource for valid/invalid nesting rules for inline and block elements? I'm currently sanitizing to keep block elements at the top level.

thesunny 14y ago
I realize your rolling your own, but if you are interested in an available editor, we have SnapEditor which does exactly that. One of the core features is that it keeps the nesting of blocks and tables consistent. All P, H1, H2, etc. tags are always at the top level. If they are not (for example, after a Paste), we automatically fix the HTML so that it is. In this way, you always have consistent, predictable, HTML which makes it easy to style and reason about. It also works both as a form-based editor (traditional) or an inline editor (like Aloha editor). Sunny

malloc2x 14y ago

But does it work? A couple minutes of basic usage (FF20, Linux) have me in pain: - CTRL-B (and presumably other shortcuts) doesn't always take effect immediately. Sometimes there is delay, sometimes it seems necessary to let go of CTRL for the event to get flushed, sometimes nothing ever happens at all. Multiple hits without letting go of CTRL also behave erratically. - Focus stays on formatting buttons and requires manual click to get back to text widget. Several times I wondered where my text was, only to realize focus was on wrong widget. - By far the worst thing: the way formatting codes are handled leaves me crying for WordPerfect's Reveal Codes. Make some text bold, unbold the text after it, type something right after the bolded text, it isn't bold, hit enter for new line and type something, now it became bold again. Argh! I like the idea of this, but presently there are some rough edges.

gojko 14y ago
Thanks for reporting this. I didn't test under Linux as I don't have a linux box handy. We bind keyboard events to jquery keydown. Is it better to bind to something else for FF/Linux?
- malloc2x 14y ago
  More testing: * On Chromium 25 and Chrome 26 the first two issues do not exist. * More playing with FF20 and it seems this is actually tied to CTRL+B, not any other shortcut. At least initially, clicking the "Bold" button also has no effect. Possible explanation: In FF CTRL+B opens the Bookmarks pane by default, in practice certain focus combinations do open this pane. This explanation would seem to require the Bold widget to be generating a keypress under the hood, though. * The codes issue is tricky, but one way to see an example on Chrome/chromium browsers is: 1. refresh page 2. select pre-existing "Go ahead..." text 3. type "this is bold and this is not" 4. select "this is bold" and make it bold 5. place cursor at start of " and this is not" 6. type "so is this", text is bold 7. hit enter and type "but this isn't", it isn't bold The original issue I saw was similar, but related to numbered bullet lists. To reproduce the third issue on FF follow the same steps, except a) one must first mash about on CTRL+B and/or the Bold button until they start working, then follow same steps. Result: you get the inverse, text in 6 is not bold, and text in 7 is. Sorry, don't have domain knowledge about keybinding.

btipling 14y ago

Was able to complicate the styling by getting bold that I couldn't unbold anymore.

otterley 14y ago

Minor editorial nit: "Boostrap" (sic) is misspelled on the front page. Thanks for putting it up, though!

gojko 14y ago
:( thanks for letting me know, I've fixed it

tambourine_man 14y ago

Looks nice, can't insert images with desktop Safari though (ML, latest). Will it have a “code“ button (check generated HTML)?

gojko 14y ago
can you give me a bit more info on "can't"? Did you try drag & drop or toolbar? what file type have you tried? We have a filter on content type in the editor, so only things read with content type image/* are inserted. Perhaps this is too strict? re "code" button, this would be trivial to implement but doesn't really belong in the widget. Just get the html out using jquery (it's your element) and show that instead of the element by passing through a formatter (or just jquery.text())
- tambourine_man 14y ago
  Sorry for the lousy bug report, I hate when it happens to me. Neither drag n drop nor clicking on the "insert image" button displayed the image on the textbox. Tried both jpg and png. Works in Chrome and Firefox. Yes, I know it should only take a few lines of code, but it's something I usually take for granted in a wysiwyg editor.
  - gojko 14y ago
    could you check what content type the filereader reports when you upload from safari? I've just tried again with safari on OSX and it seems to work. perhaps I should detect the extension, not just content type...

lingben 14y ago

I'm having trouble with the bold button

uptown 14y ago

I'm curious about the voice-input feature. In your example, it's activated by clicking the microphone - but could a website activate this without a click (or by tricking a user into clicking something they thought was performing some other function)? Providing the ability to listen in and capture the audio from a user's location without any prompt seems like a huge potential security issue to me.

gojko 14y ago
no, this is an input field with chrome speech enabled (<input type="text" x-webkit-speech>). The microphone icon you see is the right part of that field, and the text is transparent. We've done it like that because at the moment only input fields support speech input in chrome, and we couldn't find a way to activate programatically. There is no onclick event on that part, it's just part of the text field.
- uptown 14y ago
  Interesting. I'd known Chrome supported Voice input - just never tried it like this. For anyone wishing to disable this in your browser, the Chrome Extension TamperMonkey allows you to install UserScripts easily, and the UserScript named "Disable HTML5 Voice Search" on userscripts.org programmatically disables any voice-input controls on the pages you visit.

ahultgren 14y ago

Was really thrilled at first, this could be exactly the kind of wysiwyg-editor I've been looking for. Unfortunately it seems the markup returned by .cleanHtml() is completely useless (see http://pastebin.com/uwpSMKsi http://pastebin.com/uwpSMKsi). If I could get proper markup (paragraphs, headlines, not a thousand divs) and maybe the possibility to edit the markup myself this would be the perfect editor.

5vforest 14y ago
To be fair, that's contenteditable's behavior, not this plugin's.
- ahultgren 14y ago
  Oh. I didn't know that. That's bad news :( Guess I have to keep dreaming about a wysiwyg that actually works.
  - thesunny 14y ago
    We have an editor, SnapEditor, (http://www.snapeditor.com/ http://www.snapeditor.com/) and it will keep your HTML clean. You will get the output you expected. You can even cut and paste from Microsoft Word or Google Docs and it will fix your HTML to the way you'd expect. Sunny
    - nwzpaperman 14y ago
      What's the unminified size of the editor files and how many files are you down to for a completed page load? Thx!
      - thesunny 14y ago
        I'm not currently doing development on the software myself so I don't know the file size for sure at this moment; however, I believe it's similar to Redactor which is known for its small size (not sure if it's more or less now because we've just cut more size off of our deliverable). As for number of files, I believe it is 1 Javascript file. The required HTML and CSS is compiled into the JS now to reduce number of files to transfer. I don't know how many images it is right now but if it is more than 1, then we will likely eventually compile it down to 1. Sunny

deleted 14y ago

[deleted]

dwelch2344 14y ago

Looks pretty cool. One thing I don't get tho: How does the image upload work? Does it just base64 encode it and use inline images?

gojko 14y ago
Inlines a data url using FileReader

podperson 14y ago

Speaking as someone who has just implemented a similar editor (but only dependent on jQuery) this editor has serious problems. To begin with, the UI does not respond to the selection (what will the bold button do given the current selection?) and using contentEditable DIVs will make 508 compliance horrendous (the selection is lost when a label gains focus). (Our editor allows either divs or iframes, but the latter is pretty much required for solid usability, unfortunately). The magic is all in execCommand, but you also need to be aware of cross browser issues and execCommand's limitations (e.g. IE won't style using CSS which is a huge pain. ExecCommand can toggle bold but not background color). In the end we use execCommand to create spans and then style the spans. Nice support for touch styling, speech input, mobile cameras, and dropping images though.

eksith 14y ago
You sound like you know your stuff. This is kinda how I felt too; a small addendum, less is often a good thing, but least is not better. I hope the glitches will get ironed out and will apply to textareas too though. I certainly would rather send a much smaller JS file, especially for mobile users. Is your editor open source? Any chance you would be willing to share an example as well?
- podperson 14y ago
  We plan to open source our editor but it's up to the client (who is amenable, just hasn't gone through procedure). Our editor is far more functional, 508 compliant, will be IE8 compatible (argh), and weighs in at about 800loc. I wrote it rather than use something off the shelf because none of the popular choices have well-behaved UIs.
kemayo 14y ago
They got around the IE stuff by saying "Requires a modern browser (tested in Chrome 26, Firefox 19, Safari 6)". This is, of course, a synonym for "don't bother to use me in anything but hobby projects". (Or stuff which is completely mobile-focused, I suppose.)
- 14y ago

vindicated 14y ago

I'm wondering why a file upload dialog opens up when I click in the empty area beside the 'redo' button in the demo (FF 19). Is it just me?

primaryobjects 14y ago

It's nice, but I'm more of a fan of direct inline editing on the web page via HTML5 contenteditable=true. The Aloha Editor http://aloha-editor.org http://aloha-editor.org does this very well. I've actually just recently added their editor to my node.js mini cms, called ContentBlocks http://contentblocks.herokuapp.com http://contentblocks.herokuapp.com

gojko 14y ago
this does exactly that, sets a div to contenteditable=true, but also binds hotkeys for common operations, extends with toolbar support, provides filereader for drag&drop.

theone 14y ago

I really miss the ability to resize, move images. Every time try to move image, the chrome tab crashes.