How to open inline text editor not selecting a text?

Question

There is inline text editor which opens when you select some text. You can also insert images using the editor, but first you have to select text. This approach looks a bit silly to me, so I'm thinking about other ways to open the editor when you just want to insert an image. Any good ideas?

Answer 1

One approach could be to separate the "Insert Image" provision from the general text edit controls.

By nature, text edit controls (Bold, Italic, Bullet, etc) are text specific actions and have nothing to do with actions a user can perform on an image (insert image, replace an image, edit an image, etc).

One design pattern which you can explore is what Medium.com is doing (but with limitations)

Here is how a text-specific control opens up after you select a text in mediums text edit:

You will notice that the "Insert Image" provision is missing. You can insert an image via a separate set of controls, which are only visible when you move your cursor to a different line:

Now, you can click on the (+) icon to reveal a bunch of other options, including the Insert Image provision (second icon from the left):

Clicking on the Insert Image icon would open your operating systems default explorer window so that you can browse the image you want to insert and then apply basic alignment settings.

Now, this does limit your overall flexibility of inserting an image anywhere in your article/blog post but is still a feasible solution.

Answer 2

Consider the StackExchange answer box.

The controls are always present. No text selection is necessary to begin typing in bold font, prepare quoted text, or insert an image.

If you don't want the controls to be always visible, you can show them only when the textarea (or any of the related text edit/image upload controls) has focus, so they show up when needed.