The only thing left that keeps editor from doing all the things it should is lack of ability to scroll contents when they don’t fit into the view. Let’s implement a simple console-style scroll that just always keeps cursor incised visible area.
Writing a Text Editor. Part 8 (last): Simple scroll
Writing a Text Editor. Part 7: Text selection
Now that we can use cursor and insert text it’s time to tackle the most complex aspect of text editing – selection. Handling the selection can be split into two major parts that need to work together:
- calculations and adjustment of selection range within document;
- rendering selection highlight and handling user input.
I will show you how to implement code that handles both of this aspects.
Writing a Text Editor. Part 6: Text insert and delete operations.
This part six of this series of tutorials on creating a text editor but sadly we haven’t done any text editing yet. Let’s change that by implementing inserting and deleting functionality in our text editor.
Cross-browser CSS3 Image-Free Custom Checkbox
A while ago I wrote an article on creating custom checkbox in webkit which comes very handy when you a mobile but on desktop you need more compatibility. In this post I’m going to show you how to create an image-free cross-browser pure-css (except for IE < 9) custom checkbox element.
Writing a Text Editor. Part 5: Zero-width selection (cursor) support
It’s finally time to add some interactivity to our text editor. First thing that we need in order to allow user to edit a document is a cursor, which is also called a zero-width selection because well, that’s what it is, really. Let’s go.
Writing a Text Editor. Part 4: Read-only document and naive rendering
Now that we have font metrics we can actually render something meaningful text. But before that we need to store that text somewhere, so it’s finally time to actually start implementing the line-based data structure I described in Part 0.