There is input field with content editable
. Need to display block that contain img
and none-displayable span
with text. Snippet below did the task. But it has bug. And I can not change contenteditable
because it belong external site and my code run in browser extension.
Run snippet. Click end of line, press left arrow button a few times. Your cursor moving through images to text. It’s okay. Now press right arrow button and try to arrived end of line. When cursor get there first image, cursor’s selection disappears. Another words, we can move cursor from right to left, but fail from left to right.
.editor {
display: inline-block;
width: 200px;
}
.hide {
display: none;
}
<div class="editor" contenteditable="true">text <span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span><span contenteditable="false"><span class="hide"> DogePls </span><img alt="DogePls" src="https://cdn.betterttv.net/emote/55c7eb723d8fd22f20ac9cc1/1x.webp"></span></div>
If between images will any symbols, bug fix. But I need not symbols there. Because input field is message sender for chat where user can typing in any place.
I tried add pseudo element, bug still reproduce.
span[contenteditable=false]:after {
content: "space";
}
2
Answers
your issues is don’t make the span tags contenteditable="false"
make it true contenteditable="true" so that the cursor issue will be solves