HTML5 and modern JavaScript make a lot of things a lot easier than they used to be back in the days. Complex things don't require a lot of hacks an...
For further actions, you may consider blocking this person and/or reporting abuse
What would be the alternative to document.execCommand since it's deprecated ? :D I've been looking for ideas for quite some time.
A very good question. There's a few options, actually, but none are quite as elegant as this. According to caniuse, all major browsers still offer support for execCommand.
Turning on/off different modes, like bold or italic text can be achieved by creating a tree-like structure where you edit nodes in the back. The experimental selection API could help with features that work on selected text, as in "select text and mark as bold" for example. I would probably still use
contenteditable, but try to emulate the features that execCommand uses. There's also the possibility of using a polyfill at some point in the future, but none is available right now from what I can tell.What have you stumbled upon during your research?
Selection API is something really nice but as it states is experimental, second option would be range combined with a tree-like structure as you said and contenteditable since it's closest to what we want. prob's textarea would work fine too. The Range API I don't really like it for the moment .. :-) specially if you would want to combine it with a tree structure or maybe I'm missing a few things here and there. :D
To be honest, I would have to read a lot deeper into the range API to really understand it, but it does look promising! I hope that the Selection API will get some more attention and leave the "experimental" state soon, since it has a lot of potential. What's the reason for you not liking the Range API at the moment?
Despite being experimental, the selection API has the same support as the range API. Perhaps an abstraction layer would do the trick but will take a lot of time and careful engineering.
About a year ago I really wanted to create my own WYSIWYG editor. Things I read about document exec were not good. For instance, what happens when someone tries to paste text from outside, how are we going to handle the tags in the pasted text.
Moreover, it is deprecated which is literally a mood killer. Someday I'll create a really simple WYSIWYG editor using range and or selection API. I have general knowledge of trees but working with nodes, correctly inserting and removing nodes is NOT an easy thing.
Yeap, same here would really love to build my own WYSIWYG even for testing / learning purposes I know a great range of editors but still want to dive in this part and build one from scratch..
document exec is great and easy to use most of the editors these days are based on them except the very new ones. but as you said it's deprecated and you can't count on it + building with exec it's a 20 - 30 minutes jobs to do simple things. Diving into selection and range that's the real stuff to play with.
Indeed. When I was looking into this initially an agency shared a kind of a case study saying that making a WYSIWYG was one of the most difficult things that they had ever done. They even went on to say that it is one of the most complicated thing on the front-end.
Oh yes, it absolutely is. I find it an absolute pity that execCommand got deprecated. This thing shows how simple it could be, but ultimately isn't when you want to have support on all browsers and not rewrite that thing in a year or two.
So helpful! Love it!
Glad you liked it!
Not sure if this is due to Vue 3 or not. But, the emit 'input' doesn't work directly on Vue.js for custom components. You have to use
update:modelValueto trigger the change and read the prop frommodelValue. You can find out more from here vuejs.org/guide/components/events....You're absolutely right! I've written this post begining of 2021, and Vue3 wasn't the default until January 2022. Since people still find this useful, I'll update it in the coming days.
Awesome, thanks!
You're very welcome! I had so much fun writing and building this!
That's nice
Thank you, so glad you liked it! :)
Great article
Thank you!
In case you'd like to take on a similar challenge, this article may be helpful ckeditor.com/blog/ContentEditable-...
Thank you for this article! Very well stated why this shouldn't go beyond hobby projects and experimenting. Off-the-shelf WYSIWYG editors are amazing, and I most probably wouldn't use a self-made one in a larger client project, too, but trying to build one made me understand the challenges editors like Quill and CKEditor are facing, so this was an amazing learning opportunity!
document.execCommand - it's deprecated
Yup, that's what I wrote in the article as well.🙂 I still think for such an experiment it's sufficient, as most browsers still support a basic version of the commands.
Woah, this is so cool and simple. Does it work ok in mobile devices?
Good question! As long as the browser supports
document.execCommand, then, in theory, yes, but a lot of it is deprecated now. This was mostly an experiment and is not really meant for large production use cases, but rather for hobby projects and as a learning opportunity.Great
Thank you!
Nice article.