HNHacker News
TopNewBestAskShowJobs

gojko

662 karma · joined February 18, 2008

submissionscomments
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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)
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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.
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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)
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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...
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
Firefox on OSX works fine... so it's a combination. I don't have a linux box handy to test, but it would be nice if you could see if keydown is the problem, and if so we'll change it.
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
I think that's a bit harsh. First of all, we got it to the point where it's useful for us and shared it. If it's close to what would be useful to you but not 100% there, fork, extend and submit a pull request, that is how opensource works.

I've not tested it in IE because IE is simply not on the critical path for us. That doesn't mean it does not work in IE, I've just not tested it.

After about three months, we looked at usage patterns for MindMup and decided to drop official IE support, as it represents less than 2% of our usage and most people have an alternate browser installed as well.

If IE is on the critical path for you, you could contribute by testing and submitting fixes.

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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.

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
Inlines a data url using FileReader
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
You can make it create paragraphs and headings by adding a button for the formatBlock command to your toolbar. Google for execCommand, all those things are supported out of the box.
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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.

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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?
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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())

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
:( thanks for letting me know, I've fixed it
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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_M...

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
thanks, it seems that's done the trick. I've republished the page
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
fantastic. i'm looking forward to your pull requests :)
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
I've replaced the hotlink, hopefully the new page will be up soon
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
i'll look into that as well :) thanks
gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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.

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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 , 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.

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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

gojko··on Our tiny jQuery/Bootstrap rich text editor is now open-source
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

gojko··on MindMup just became 10x more useful
Unicode storage should work now, I just deployed the fix. Tested in Chrome & Firefox on Mac, will do more testing on other browsers later
gojko··on MindMup just became 10x more useful
I agree. One of the things we'll do with MindMup is create a story line of ideas, that could be then exported into a slide show for expressing it. I structure my conference presentations using MindMup, but the final version is with slides, not with a map.
gojko··on MindMup just became 10x more useful
thanks. we do retry and backoff with S3 storage, google api seemed more reliable on Chrome. Nice lesson about not forgetting IE when testing :)
gojko··on MindMup just became 10x more useful
yes, we're using google's drive client JS library, so things go from the browser directly to Google Drive. Will investigate Chrome Web Store integration, thanks.
gojko··on MindMup just became 10x more useful
thanks, i'll look into this tonight.
gojko··on MindMup just became 10x more useful
that's in the plan and actually wouldn't be that difficult to do, it's just that some other things are higher on the list of priorities. you can make us do it sooner by voting: http://www.mindmup.com/#vote - we tend to work on the stuff with the most votes.
gojko··on MindMup just became 10x more useful
I'm sorry you're experiencing problems. Would it be possible for you to try again? When it fails just open About MindMup - Talk to Us and send feedback (leave a note on umlauts so we know it's you). This will automatically include all relevant information we need to troubleshoot it.
Page 1 of 2Next →