如何将可关闭的文本标签添加到 Textarea Kendo | jQuery

Posted 2023-05-08

【中文标题】如何将可关闭的文本标签添加到 Textarea Kendo | jQuery

【英文标题】：How to add closeable text tags to Textarea Kendo | jQuery

【发布时间】：2020-01-29 08:18:00

【问题描述】：

我需要像这张图片一样使用文本区域。

我应该可以点击 Text A、Text B、Text C、Text D > 按钮，一旦我单击任何此按钮，它应该添加到文本区域，并且还能够从文本区域中删除添加的文本字段。我可以使用 jQuery UI 、 jQuery 或 javascript .Kendo UI 来做到这一点也可以。但我找不到我的要求支持 Kendo 组件来执行此操作。

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

【问题讨论】：

"我可以使用 jQuery UI 、jQuery 或 JavaScript 吗？"是的。

这是一个简单的问题。虽然不适合 ***。理想情况下，您应该尝试提出解决方案并提出编码特定问题。或者至少展示一些研究并在“我发现jQuery具有函数X，我可以结合函数Y来实现Z。我如何在下面的HTML代码中实现它？”。

@BrunoMonteiro 我已经尝试过了，请看这位先生***.com/questions/58156092/…。请帮我解决这个问题，拜托

嗨@Adam，我不是故意粗鲁，只是想澄清一下。如果您尝试过某事，则应将其发布在您的问题中。该链接出现“找不到页面”错误。你能用你试过的代码更新你的问题吗？

【参考方案1】：

正如我在您之前的帖子中的 cmets 中所提到的，这不能使用 <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>

您还可以查看启用contenteditable 属性的<div> 元素。同样，相当复杂，不建议这样做。

正如我所建议的，您最好使用 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。您还可以使用自定义回调对其进行初始化，这可以处理您正在寻找的关闭或删除选项。

【讨论】：

先生，我如何在 Div 中使用它？因为我认为如果使用 Div 而不是 Textarea 我们可以使用 如你所说。你有这样做的想法吗？

不幸的是，jsfiddle 无法查看您的示例