3 ms·
I have been experimenting with contenteditable myself[0] (for a small instant messaging project [1]), and indeed I found it quite difficult to use. The problem
by seszett 12y ago
I have been experimenting with contenteditable myself[0] (for a small instant messaging project [1]), and indeed I found it quite difficult to use. The problem is you're constantly going to be doing things against the browser.
For compatibility reasons I have to support a small fixed set of tags (b, s, u, tt basically) but of course none of the contenteditable commands use these tags, so I ended up using selection and range to insert the tags myself, and actively ignoring the browser's default shortcuts (ctrl-B, ctrl-I, etc automatically work in some browsers). The API for accessing selection is also different from that of simple input elements.
Now, I actually want pseudo-WYSIWYG - that is, I want bold text to be shown in bold, but I still want the <b> tag to be shown in light grey so you know it's there and you can edit it yourself. But people can also sometimes post just a "<" in their text, so basically at every keystroke the control has to parse the whole text again, insert whatever tags and apply whatever style might be necessary. Without forgetting the convert back to spaces the " "s the browser has helpfully included in the text.
Anyway, what I wanted to say is contenteditable is really not as usable as it could be, and there is a lack in pseudo-WYSIWYG libraries which just allow you to type your text using HTML (or markdown) tags and render them along with the final text. Thinking of it, maybe a more appropriate name for such a tool would be syntax-highlighting.
[0] https://github.com/seeschloss/miaoli/blob/master/public/javascripts/puli.js https://github.com/seeschloss/miaoli/blob/master/public/java... (it's still a long way from being completely decorrelated from the main project, but I'd like to end up with a nice generic drop-in pseudo-wysiwyg control one day)
[1] http://sz.gy/tribune/test http://sz.gy/tribune/test (don't be fooled by the fact that it has a domain name, it's far from production ready - also, the control doesn't work well with mobile Safari, for some reason I don't understand yet)
- zackham 12y agoMight give https://github.com/codemirror/codemirror https://github.com/codemirror/codemirror a try if you really want to go down the syntax highlighting path. Shouldn't be too hard to adapt it to exactly what you're looking to do.
- seszett 12y agoIt seems a bit like overkill for my simple needs though, while at the same time it would require me to write a custom "mode", so I'm not sure that would be the best option.
- philjackson 12y agoCodemirror is a great piece of software - I use it for yipgo.com. Only problem is poor mobile support.