I see a number of issues with this, but I think the biggest is your use of hooking SPAN with scripting for the image buttons, instead of anchor or button. Why is this a problem?
Because span aren't keyboard navigable. This is a problem people with the WYSIWYG mentality often overlook, is not everyone is using touch or a mouse.
Admittedly, navigating with the keyboard to the buttons would defocus the area being edited, but it's still not a habit to get into, given the basic accessibility violation that can create.
it's also kind of a wonk in 2022 to be using external images instead of static SVG in the CSS and/or webfonts. That would be a huge improvement.
All that said, GIANT thumbs up for writing this using vanilla code, instead of some rubbish framework. That way anyone can use it without screwing around with any extra includes, build steps, or the possibility of conflicts.
Though those querySelectorAll when pulling an ID is a bit screwy.
So why build your own WYSIWYG editor? Go use something like Quill or TinyMCE and don't worry about a thing. It's less dirty code anyways. But great job for creating your own vanilla editor, seems decent.
Hey, thanks for your comment! That's right, I didn't think about accessibility in detail when creating this editor. But I will "fix" this as soon as possible.
Thanks for your feedback :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I see a number of issues with this, but I think the biggest is your use of hooking SPAN with scripting for the image buttons, instead of anchor or button. Why is this a problem?
Because span aren't keyboard navigable. This is a problem people with the WYSIWYG mentality often overlook, is not everyone is using touch or a mouse.
Admittedly, navigating with the keyboard to the buttons would defocus the area being edited, but it's still not a habit to get into, given the basic accessibility violation that can create.
it's also kind of a wonk in 2022 to be using external images instead of static SVG in the CSS and/or webfonts. That would be a huge improvement.
All that said, GIANT thumbs up for writing this using vanilla code, instead of some rubbish framework. That way anyone can use it without screwing around with any extra includes, build steps, or the possibility of conflicts.
Though those querySelectorAll when pulling an ID is a bit screwy.
So why build your own WYSIWYG editor? Go use something like Quill or TinyMCE and don't worry about a thing. It's less dirty code anyways. But great job for creating your own vanilla editor, seems decent.
Hey, thanks for your comment! That's right, I didn't think about accessibility in detail when creating this editor. But I will "fix" this as soon as possible.
Thanks for your feedback :)