How to add closeable text tags to Textarea Kendo | jQuery

问题

I need to use Text area like this image.

I should able to click Text A, Text B, Text C, Text D buttons and, once I click any of this button it should add to the Text area and also able remove added text field from the Text area. Can I do it using jQuery UI , jQuery or JavaScript .Kendo UI is also okay. but I'm unable to found my requirement support Kendo component to do this.

I researched and found this http://skfox.com/jqExamples/insertAtCaret.html , but it's not support added text fields removable function,

回答1:

As was mentioned in my previous comments on your previous post, this cannot be done with a <textarea> element. These elements can only contain text, they cannot contain other elements like <button> or <span> which would be required to make a remove button.

The following is a very lightweight example and it has many pitfalls. It does give you some ideas of how you might look at proceeding.

$(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>

You can also look at using a <div> element with the contenteditable attribute enabled. Again, pretty complex and would not advise it.

As I suggested, you may be better off using something like TinyMCE. TinyMCE is a JavaScript based Rich Text editor that is highly customizable.

Example: 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();
      }
    });
  }
});

This initializes TinyMCE with custom buttons. These buttons add the HTML that would be needed. You can also initialize it with custom callbacks, this can handle the close or remove options you are looking for.

来源：https://stackoverflow.com/questions/58161073/how-to-add-closeable-text-tags-to-textarea-kendo-jquery