Question 223889 in Html Question posted in
Some basic documentation can be found here.

Html – How to edit image with content editable attribute in div?

I need to display image (emoji) in div with attribute contenteditable. I can not use img tag for some reason. Just specific case, out of question context.

Below snippet with three case:

  1. Target behavior: we can display image, move carriage and delete image
  2. Wrong behavior: display, no move carriage, no delete
  3. Wrong behavior: display, move carriage, no delete

enter image description here

How to display image in contenteditable without img tag with save capability to move carriage and delete image?

<div contenteditable=true>
  1) img tag:  
  <img alt="Wowee" src="https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x">
</div>

<div contenteditable=true>
  2) span tag:  
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
</div>

<div contenteditable=true>
  3) span tag with "nbsp":
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
  &nbsp;
</div>
Tags:

2

Answers


  1. 0

    this may help:

        <div contenteditable=true>
        span tag:
        <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)">Wowee</span>
        &nbsp;
    </div>

    you just need some selectable area after you span to click on, which   adds it, or you may be able to do so using css (padding, .etc).

    Login or Signup to reply.
  2. 0

    I have no idea why it works (Chrome), but here you go:

    (btw, in Firefox all of your 3 examples work, you need to hit the backspace 3 times ,but they do)

    <div contenteditable>
  3) span tag with "#8203":
  <span style="content: url(https://cdn.betterttv.net/emote/58d2e73058d8950a875ad027/1x)"></span>
  &#8203;
</div>

    (I don’t suggest any usage of contenteditable as it full of bugs and unexpected behaviors, therefore I have no meaning to even try to understand what’s going on)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search