0

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? enter image description here

  • A bit more context would be useful... for instance, is this a multi-line text editing application with dedicated controls? – Levano Jul 12 '18 at 13:17
  • @Levano This is CMS. The editor is used to edit articles. – rpavlyk Jul 12 '18 at 13:33
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:

enter image description here

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:

enter image description here

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

enter image description here

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.

1

Consider the StackExchange answer box.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.