如何在Textarea Kendo中添加可关闭的文本标签. jQuery的 [英] How to add closeable text tags to Textarea Kendo | jQuery

问题描述

我需要使用类似于此图像的文本区域.

I need to use Text area like this image.

我应该可以点击 Text A ， Text B ， Text C ， Text D >按钮，一旦我单击此按钮中的任何一个，它都应添加到文本"区域，并且还可以从文本"区域中删除添加的文本字段.我可以使用jQuery UI，jQuery或JavaScript进行操作吗?Kendo UI也可以.但是我找不到需要支持的Kendo组件来完成此操作.

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.

我研究发现了 http://skfox.com/jqExamples/insertAtCaret.html，但不支持添加的文本字段可移动功能

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

推荐答案

正如我在上一篇文章的先前评论中所提到的，这不能通过<textarea>元素来完成.这些元素只能包含文本，不能包含其他元素，例如<button>或<span>，这些元素是制作删除按钮所必需的.

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>

您还可以查看在启用contenteditable属性的情况下使用<div>元素的情况.再次，相当复杂，不建议这样做.

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

正如我建议的那样，使用TinyMCE之类的东西可能会更好. TinyMCE是基于JavaScript的Rich Text编辑器，可高度自定义.

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

示例: 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.您还可以使用自定义回调对其进行初始化，这可以处理您要查找的关闭或删除选项.

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.

这篇关于如何在Textarea Kendo中添加可关闭的文本标签. jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！