How to build a basic rich text editor?

How do I provide multiple similar functionalities in a text editor web app?

• I am working on a text editor (web app) which will provide powerful, customizable functionality, but in a minimal (requirement) appearance. One of the functions is: "create new snippet". I want this function to be applicable to either: a chunk of selected text inside the current document, meaning that a new snippet will be created containing the selected text the whole text, meaning that a new snippet will be created containing the whole text contained in the current document empty content, meaning that an empty new snippet will be created I have a few other functions that need similar behavior (regarding applicability to selected text, to the whole document, and/or to empty content), so, I really need a smart, minimal, coherent solution to this. It boils down to: What kind of UI interface should I provide to satisfy the aforementioned requirements, in the most intuitive and frictionless way possible? Some of the solutions I am considering (but I am not totally happy with): When a user selects (highlights) some text, a toolbar pops up (similar to http://medium.com's one) showing the applicable actions to the selected text (in the form of labelled icons). The user then clicks on the "create snippet" labelled icon and a new snippet is created containing the selected text. If the user simply clicks inside the text without selecting any text and without the intention to change the caret position, (i.e. she clicks on the caret once), the aforementioned toolbar pops up, but when the user clicks on the "create snippet" labelled icon, an empty snippet will be created. In order to create a new snippet containing the whole text, a user simply selects all the text of the document. (This solution, obviously, tries to use the pop up toolbar as the only interface through which the user will communicate her intentions, AKA: uber minimal, which is a plus) Same as above, but, without allowing toolbar pop up when a user simply clicks inside the text. In order to provide the "create empty snippet" functionality, provide a labelled "create snippet" icon in a hideable sidebar. (This solution provides two interfaces for serving different needs: a pop up toolbar and a sidebar) Do not provide a toolbar that pops up upon text selection at all. Instead, only provide an icon labelled "mark snippet" in the hideable sidebar, that when clicked, it will change the cursor icon to a new one, indicating that the user must select which part of the text should be. There will also be another icon labelled "create new snippet", which will create a new empty snippet. (This solution uses the sidebar as the only interface through which the user will communicate her intentions) What would your suggestion be? Please don't focus too much on the "snippet" concept. I need other functionalities as well, such as: "share a part, or the whole of the text" on social media, etc. Note: I really like the pop up toolbar (http://medium.com style) because it is minimal (i.e. doesn't clutter the editor window by being visible all the time) and also it is quick, because it appears very close to where the user's mouse pointer is located. Its drawback is probably the fact that new users might miss it (and users have very little patience with discovering the functionality of something new).

• Answer:

  I'm not a UX/UI designer, so forgive me if my suggestions show a lack of knowlege. However, I do a lot of writing on an iPhone, including edited articles that must be strictly formatted. When making corrections on those articles and when writing for leisure on Quora, I constantly make revisions to the writing, placing my cursor into the text to change the wording. It would be super-annoying for a pop-up box to sping up in response to where I place the cursor, rather than in response to text that I have intentionally highlighted for reformatting purposes. I think the uber-minimal solution you favor is best. Though it might not be possible, perhaps, the pop-up box could appear when you press down or tap the screen twice after spacing down to the place where you want to create the empty snippet.