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 als

Solution 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() {
  functioncalcWordWidth(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;
  }

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

  functionaddText(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"));
  }

  functionremoveText(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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="maincontainer"><divid="navtoplistline">&nbsp;</div><divid="contentwrapper"><div><buttonid="btn-1"value="Hello World!">Hello World!</button></div><divid="maincolumn"><divclass="text"style="position: relative;"><textareaname="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.