How does it work:
Several representations of text play a part in Carota.
Characters are objects representing the characters in the text as a single continuous stream of objects. This is an abstraction over the JSON format to make it easy to split the text into words. An inline object acts like a single character.
Words are objects representing the words in the text, the output of the word-breaking process. A word has two parts: the non-space characters, and the trailing space characters. Either part may be empty, but not both. (A new line is always emitted as a separate word.) Of course, a word can contain regions of the text with different formatting. All edits to the document involve modifying the list of words. Words store their own dimensions (width, ascent and descent).
Static representation is the result of word-wrapping. Every time the word list is modified, wrapping must be performed, but it's pretty fast because we already know the dimensions of each word. The static representation is a list of Line objects, and each line contains a list of PositionedWord objects, each of which contains a list of PositionedCharacter objects. These objects form a uniform hierarchy of nodes, and at the root is the Document. Everything is already positioned, so drawing to the canvas is fast, and implementing the editor is pretty easy. Also any custom inline objects are converted into handlers that know how to render them.
Those are the main core representations involved. In addition a subset of HTML can be loaded into the editor via a parser that converts it into the native JSON format.
How to use Carota:
First, the bad news: if you need to support IE8 and earlier, then Carota is not for you. Right now it requires Canvas. It may be extended in the future to support other ways of rendering.
The demo page has been deliberately set up to make it easy to learn from, the old fashioned way: using the View source command. Everything is in a single index.html file.
It begins with some basic CSS styling, mostly for positioning. Then there is the HTML, most of which is for the "toolbar". Carota does not have a built-in toolbar, but it's very easy to wire up your own controls to it.
The text for these pages is held in some hidden DIVs, which get parsed into the native JSON format and then loaded into the editor.
Finally there is a PRE element that displays the JSON saved from the editor, every time you make an edit.
The parts of the code that interact with Carota (there isn't much) works by calling carota.editor.create to cause the editor to be created. Then methods are called on the resulting object to load this text, to subscribe to events (selectionChanged, contentChanged), to performUndo (and discover if we canUndo), to query or modify the selectedRange and to insert inline elements (the smiley button).
There are also a handful of calls to functions in carota.dom which is just a very minimal helper library for conveniently wiring up events, etc. In your own code you'll probably want to use a more full-featured alternative like jQuery, etc. Carota deliberately avoids depending on any such general DOM-manipulation library so it can integrate with anything.
Image / Demo:
GitHub / Download:
The MIT License (MIT)
- Lider-BetSoftware Engineer, 2013 - present
- Batumi Intrnational Container Terminal LLCIT Systems Supervisor, 2012 - 2013
- Tourism Department of AjaraWeb/Graphic, 2010 - 2012
- Shota Rustaveli State UniversityQA Specialist, 2007 - 2012
- WebserviceWeb Developer, 2008 - 2010
- Shota Rustaveli State UniversityMaster dg., 2010 - present
- 14' Batumi Public ScoolHigh School, 1995 - 2006
- Shota Rustaveli State UniversityBachelor, 2006 - 2010
I think Arsenal will beat Liverpool. What do you think?
2012-09-02 Liverpool vs Arsenal. See whom others have picked to win this game!
How to Allow MySQL Client to Connect to Remote MySQL server
By default, MySQL does not allow remote clients to connect to the MySQL database. If you try to connect to a remote MySQL database from your
How To Get Google+ Invites | Google Plus Social Networking Invites
How To get Invites for Google+ (Plus). Get invites for Google+ Social Networking. Free invites for Google Plus. I want invites for Google+,
Little Icons Big Inspiration | Abduzeedo | Graphic Design Inspiration an...
I've always veen really inspired by the tinniest icon designs, and the amount of work that goes into designing every little detail is simply
Logo Design: Hats | Abduzeedo | Graphic Design Inspiration and Photoshop...
We keep going through our weekly journey checking out great logos! We're thinking ahead and we want to find new topics, good ones, to share
Ultra Realistic Oil Paintings by Pedro Campos | Abduzeedo | Graphic Desi...
Photorealistic paintings on canvas are definitely in a whole other level of awesomeness. Seeing a painting for the first time and thinking i