Call or email today for a free consultation.
Contenteditable text editor in a web browser
- Mobile-responsive tables March 19, 2014 at 2:39 pm
- Contenteditable text editor in a web browser October 22, 2013 at 5:55 pm
- HTML CSS3 3D Panorama viewer with accelerometer and compass in the stock October 22, 2013 at 12:35 pm
- How to stroke text in Illustrator: A tutorial July 21, 2013 at 11:20 pm
- How I saved a client $60,000 (or, Where To Tap) July 21, 2013 at 9:21 pm
- How much does a website cost? July 21, 2013 at 8:21 pm
- Use htaccess to rewrite URLs with query strings July 21, 2013 at 7:22 pm
- Ian Tregillis web site July 21, 2013 at 3:04 pm
- Web design as an art form July 21, 2013 at 2:59 pm
One of the neat things about this editor is that it uses as much of the native OS and browser functionality as I could get it to do, like copy, paste and undo. If you open a document, for example, it opens into a new tab. There is no need to save, as it will save automatically all the time. If you accidentally open a document in two separate tabs and edit in one tab, when you switch to the other tab, your changes are automatically sycnchronized thanks to localStorage.
Another neat thing is the text search and replace function. I had a fun time playing with string parsing as this sort of feature in HTML is very very tricky. What if you want to search for a string that crosses between a style tag like bold or italics? So you have to ignore the tags. But when you replace it, you don't want to ignore the tags anymore. What's a parser to do?
I ended up using a trick: if you add an anchor tag, the browser itself will figure out how to nest your remaining text properly. Then I just change that anchor into whatever text I wanted.
You can move a file into a virtual local file structure, complete with subfolders. At one point I even had these files saving out to Dropbox via their API, so you could switch between different devices.
One of my favorite things is hidden in a submenu: the ability to add footnotes. These notes pop up into a little window that goes along wherever you place it into the document.
When I finished learning about the capabilities of HTML5 localStorage and all the different things you can do with contenteditable spaces, I realized that with a bit more massaging, this would make a pretty kick-ass in-place true WYSIWYG editor.
So I played with it, modified it, added a bunch of neat functionality like drag-and-drop image uploading, in-place image resizing and positioning, the ability to add links, and then hooked up a dead-simple back-end PHP CMS with a bunch of tiny API calls to update the pages. Even threaded, moderated comments!
It's not vaporware, but it is pretty beta. I've got a few client websites using various iterations of it and they're working pretty well. A few of them even upload and place videos. My own website here uses the system. I'm happy with how it turned out, but there's a fair bit of work needed to get it to a place where it's marketable or usable by other people.
Cowriter is still a toy, but it's a neat toy. My favorite part was using unicode characters rather than icons in the buttons. There isn't a single image on that site, all unicode and css!