Contenteditable div текст get добавляется в элемент span, а не снаружи

Question

У меня проблема с моим довольным делом. Когда я нажимаю на кнопку, в мой блок вставляется интервал. Когда я начинаю печатать, текст идет внутри промежутка, а не за его пределами:

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
    
    // Contenteditable adds a <br> when empty.
    // Solutions on SO appear not to work
    if (!$(this).text()) {
      input.html('');
    }
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji">?</span>`);
    input.trigger('input');
  });
});

[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

.emoji {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>

Это действительно странная вещь. А также, когда я добавляю смайлики, удаляю содержимое и что-то набираю, элемент <font> get создается в стиле смайликов. Кто-нибудь знает, как я могу это исправить?

Answer 1

Просто добавьте contenteditable="false" на ваш span.

jQuery(document).ready(function($) {
  let input = $("#input");

  input.on("input", function() {
    console.log($(this).html().length);
    
    // Contenteditable adds a <br> when empty.
    // Solutions on SO appear not to work
    if (!$(this).text()) {
      input.html('');
    }
  });

  $("button").click(function() {
    input.html(input.html() + `<span class="emoji" contenteditable="false">?</span>`);
    input.trigger('input');
  });
});

[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

.emoji {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="input" placeholder="Schreib eine Nachricht..." contenteditable="true" spellcheck="true"></div>
<button>Add element to contenteditable div</button>

Answer 2

Вы должны использовать тег img для вставки смайликов, я настоятельно рекомендую взглянуть на telegram web или другое веб-приложение чата, чтобы узнать, что вы должны делать с обработкой смайликов.