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)
HN user
gojko
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.
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)
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...
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.
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.
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.
Inlines a data url using FileReader
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.
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.
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?
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())
:( thanks for letting me know, I've fixed it
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...
thanks, it seems that's done the trick. I've republished the page
fantastic. i'm looking forward to your pull requests :)
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
I've replaced the hotlink, hopefully the new page will be up soon
i'll look into that as well :) thanks
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.
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.
well we kind of need this to provide rich text editor for node attachments... This is how you can see it in action
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
Unicode storage should work now, I just deployed the fix. Tested in Chrome & Firefox on Mac, will do more testing on other browsers later
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.
thanks. we do retry and backoff with S3 storage, google api seemed more reliable on Chrome. Nice lesson about not forgetting IE when testing :)
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.
thanks, i'll look into this tonight.
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.
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.