html5中在text中加入span,javascript - 如何避免从contenteditable中删除键入的文本 在jQuery中>> 我正在使用jQuery UI可拖动组件将<span>添加...

如何避免从contenteditable中删除键入的文本

在jQuery中>>

我正在使用jQuery UI可拖动组件将添加到可编辑

的内容。

[预期输出是，第

段应该是可编辑的，并且可拖动组件应该能够拖放到段落，并且

的内容也应该是可编辑的。我的代码有问题。当我在

内键入内容并单击外部

时。从段落中删除的键入的单词。

我的代码如下：

$(function() { function textWrapper(str, sp, btn) { if (sp == undefined) { sp = [0, 0]; } var txt = ""; if (btn) { txt = "" + str + ""; } else { txt = "" + str + ""; } if (sp[0]) { txt = " " + txt; } if (sp[1]) { txt = txt + " "; } return txt; } function chunkWords(p) { var words = p.split(" "); words[0] = textWrapper(words[0], [0, 1]); var i; for (i = 1; i < words.length; i++) { var re = /\[.+\]/; if (re.test(words[i])) { var b = makeTextBox(words[i].slice(1, -1)); words[i] = " " + b.prop("outerHTML") + " "; } else { if (words[0].indexOf(".")) { words[i] = textWrapper(words[i], [1, 0]); } else { words[i] = textWrapper(words[i], [1, 1]); } } } return words.join(""); } function unChunkWords(tObj) { var words = []; $(".w", tObj).each(function(i, el) { console.log($(el).text(), $(el).attr("class")); if ($(el).hasClass("b")) { words.push("[" + $(el).text().trim() + "]"); } else { words.push($(el).text().trim()); } }); return words.join(" "); } function makeBtn(tObj) { var btn = $("", { class: "ui-icon ui-icon-close" }).appendTo(tObj); } function makeTextBox(txt) { var sp = $("", { class: "w b" }).html(txt); makeBtn(sp); return sp; } function makeDropText(obj) { return obj.droppable({ drop: function(e, ui) { var txt = ui.draggable.text(); var newSpan = textWrapper(txt, [1, 0], 1); $(this).after(newSpan); makeBtn($(this).next("span.w")); makeDropText($(this).next("span.w")); $("span.w.ui-state-highlight").removeClass("ui-state-highlight"); }, over: function(e, ui) { $(this).add($(this).next("span.w")).addClass("ui-state-highlight"); }, out: function() { $(this).add($(this).next("span.w")).removeClass("ui-state-highlight"); } }); } $("p.given").html(chunkWords($("p.given").text())); $("p.given").on("click", ".b > .ui-icon", function() { $(this).parent().remove(); }); $("p.given").blur(function() { var w = unChunkWords($(this)); console.log(w); $(this).html(chunkWords(w)); makeDropText($("p.given span.w")); }); $("span.given").draggable({ helper: "clone", revert: "invalid" }); makeDropText($("p.given span.w")); });

p.given { display: flex; flex-wrap: wrap; } p.given span.w span.ui-icon { cursor: pointer; } div.blanks { display: inline-block; min-width: 50px; border-bottom: 2px solid #000000; color: #000000; } div.blanks.ui-droppable-active { min-height: 20px; } span.answers>b { border-bottom: 2px solid #000000; } span.given { margin: 5px; }

Lorem Ipsum is simply dummy text of the printing and typesetting industry. [Lorem] Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry.

the Santee, thDakota America Qatar Philippines

问题间歇出现。

我正在使用jQuery UI的可拖动组件将添加到内容可编辑

。预期的输出是，段落

问题描述 投票：4回答：1

我正在使用jQuery UI可拖动组件将添加到可编辑

的内容。

javascript

jquery

jquery-ui

contenteditable

jquery-ui-draggable

1个回答

3

投票

有时再次删除用户输入的文本，原因在功能unChunkWords中：

此函数仅在elements

热门问题