Как добавить закрываемые текстовые теги в Textarea Kendo |JQuery

Question

Мне нужно использовать область текста, как это изображение.

Я должен нажать Text A, Text B, *Кнопки 1015 *, Text D и, как только я нажму любую из этих кнопок, она должна добавить в область Текст, а также удалить текстовое поле из области Текст. Могу ли я сделать это с помощью jQuery UI, jQuery или JavaScript. Kendo UI тоже нормально. но я не могу найти требование поддержки компонента Kendo для этого.

Я исследовал и обнаружил это http://skfox.com/jqExamples/insertAtCaret.html, но он не поддерживает функцию добавления добавляемых текстовых полей,

Answer 1

Как уже упоминалось в моих предыдущих комментариях к предыдущему сообщению, это нельзя сделать с помощью элемента <textarea>. Эти элементы могут содержать только текст, они не могут содержать другие элементы, такие как <button> или <span>, которые потребуются для создания кнопки удаления.

Ниже приведен простой пример очень иу него много подводных камней. Это дает вам некоторые идеи о том, как вы можете смотреть на процесс.

$(function() {
  function calcWordWidth(str, fontfamily, fontsize) {
    var word = $("<span>").css({
      display: "none",
      "font-family": fontfamily,
      "font-size": fontsize
    }).html(str).appendTo("body");
    var width = word.width();
    word.remove();
    return width;
  }

  function addCloseButton(pos, st, en, trg) {
    var btn = $("<span>", {
      class: "closeBtn"
    }).html("x");
    btn.css({
      position: "absolute",
      left: pos + "px",
      top: "1px"
    });
    trg.parent().append(btn);
    btn.click(function() {
      removeText(st, en, trg);
      $(this).remove();
    });
  }

  function addText(str, trg) {
    var cur = trg.val();
    var start = cur.length;
    if (start) {
      trg.val(cur + " " + str);
    } else {
      trg.val(str);
    }
    cur = trg.val();
    var end = cur.length;
    var width = calcWordWidth(cur, trg.css("font-family"), trg.css("font-size"));
    console.log(width);
    addCloseButton(width, start, end, $("#txtMessage"));
  }

  function removeText(start, end, trg) {
    var cur = trg.val();
    var upd = cur.slice(0, start) + " " + cur.slice(end);
    trg.val(upd);
  }

  $("button").click(function() {
    addText($(this).val(), $("#txtMessage"));
  });
});

.closeBtn {
  font-family: Arial;
  font-size: 12px;
  cursor: pointer;
  padding: 1px;
  background: #ccc;
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="maincontainer">
  <div id="navtoplistline">&nbsp;</div>
  <div id="contentwrapper">
    <div><button id="btn-1" value="Hello World!">Hello World!</button></div>
    <div id="maincolumn">
      <div class="text" style="position: relative;">
        <textarea name="txtMessage" id="txtMessage" class="txtDropTarget ui-droppable" cols="80" rows="15"></textarea>
      </div>
    </div>
  </div>
</div>

Вы также можете посмотреть на использование элемента <div> с включенным атрибутом contenteditable. Опять же, довольно сложный и не советовал бы.

Как я и предлагал, вам может быть лучше использовать что-то вроде TinyMCE. TinyMCE - это многофункциональный текстовый редактор на основе JavaScript с широкими возможностями настройки.

Пример: https://jsfiddle.net/Twisty/fngjcse3/

JavaScript

tinymce.init({
  selector: 'textarea',
  menubar: false,
  statusbar: false,
  plugins: "code",
  toolbar: 'helloWorld allBase code',
  setup: function(editor) {
    var makeSpan = function(str) {
      return '<span class="word">&nbsp;' + str + '&nbsp;<em>x</em><span>&nbsp;';
    }
    editor.ui.registry.addButton('helloWorld', {
      text: 'Hello World!',
      onAction: function(_) {
        editor.insertContent(makeSpan("Hello World!"));
      }
    });
    editor.ui.registry.addButton('allBase', {
      text: 'All your Base',
      onAction: function(_) {
        editor.insertContent(makeSpan("All your base"));
      }
    });
  },
  content_style: 'span.word em { font-style: normal; font-size: 12px; background: #ccc; cursor: pointer; padding: 1px; border-radius: 3px; }',
  init_instance_callback: function(editor) {
    editor.on('click', function(e) {
      if (e.target.nodeName == "EM") {
        console.log("Remove Word.");
        e.target.parentElement.remove();
      }
    });
  }
});

Это инициализирует TinyMCE с помощьюпользовательские кнопки. Эти кнопки добавляют HTML, который будет необходим. Вы также можете инициализировать его с помощью пользовательских обратных вызовов, которые могут обрабатывать параметры закрытия или удаления, которые вы ищете.