You were fired for delaying the project for a few months.The algorithm is pretty straightforward - get the selection, get ranges (did I mention that - Firefox supports multi-range selections?), do a couple of DOM operations, make selection, implement undo manager (because your changes won’t be recorded by the native one) and you’re safe. If you’re a purist like me, you would perhaps try to implement execCommand() in JavaScript. If you accepted normalisation of the output you’re pretty safe, but I can hardly imagine the same approach to the Enter key support and well… it smells bad. If you chose the mutation observers, you may need to deal with preserving selection (as it may be reset when you modify the DOM around it) or with the undo manager. But again, this is only the tip of the iceberg. I’ve seen many approaches from the hacky ones like using mutation observers, through normalisation of HTML when retrieving it from the editor, to a complete (in my opinion, the only real) solution which is reimplementing the execCommand() behavior in JavaScript. Let’s consider how the behavior of the bold command can be altered.
Those three small details - how the bold command and Enter key work plus cleaning up pasted data are just the tip of the iceberg, but they are already enough to make even a skilled JavaScript developer hate “this entire contentEditable”. The developer joins the “contentEditable is evil” club and hates WYSIWYG editors even more. I don’t want all those inline styles!Ī month and several questions on StackOverflow later the project is either dead or full of most brutal hacks which seem to work (that’s actually the worst situation - poor end-users).
Just a couple of details left… How do I force the bold command to use instead of (choose whichever you like more, actually) in every browser, force the Enter key to create new paragraphs instead of those ugly or and fix that damn pasting. We’ll work a bit on typography, use some trendy SVG/font icons for the buttons, add some CSS transitions here and there and we are mostly ready. Now, let’s just add some toolbar with stylish buttons to enable applying bold and linking the text. How hard can it be? We’ve got contentEditable, execCommand() and quer圜ommandState(). Hey, we just met and this is crazy, but we've got few hours so let's create a new WYSIWYG editor maybe!- Piotrek Koszuliński 5 lipca 2012 Posted onĮvery once in a while some developer notices that there’s still no perfect WYSIWYG editor for the web on the market and then this happens:
0 kommentar(er)
