contenteditable 相关问题

contenteditable，execCommand和insertunorderedlist的聚合物问题

我正在使用Polymer 2.0和div的contenteditable属性编写一个非常基本的WYSIWYG丰富编辑器，但是遇到document.execCommand问题并执行命令insertunorderedlist。 ...

用于在内容可编辑div中取消放置事件的跨浏览器方法

我希望能够禁止将图片（和其他内容）拖放到跨浏览器的内容可编辑div中。我了解了如何针对Chrome和IE进行操作。 Firefox顽固地拒绝。代码...

如何根据类名和可编辑的值切换div背景颜色

我想根据类名'cls-editable'更改div背景颜色，javascript使用它来查找元素，然后将editable属性设置为'true'或'false。当可编辑时，...

如何为特定的div（而不是整个页面）运行queryCommandState？

HTML表格可编辑的td单元格获取光标位置

如何从处理“ onkeypress”事件的函数中读取可编辑td单元（contenteditable =“ true”）中的实际光标位置？我正在寻找类似于“ ...

为什么选择文本时相邻的div之间有垂直间隙？

如何在可编辑的DIV中查找光标位置？

我正在为内容可编辑的DIV（需要在文本框中呈现html内容编写自动完成程序。因此，首选在TEXTAREA上使用contenteditable DIV）。现在我需要找到光标位置...

从onInput事件中获取值以在React中获得cotentEditable

我有一个contentEditable标头，我想在其中获取onInput事件的值。到目前为止，我已经设法获取event.target，但是它返回了整个DOM节点。我只想获取...的实际值...

HTML内容可编辑的岛不可编辑

我有一种基于浏览器的WYSIWYG编辑器，用户可以在其中编辑文档模板。文档模板是带有一些特殊的“合并代码占位符”的普通html。这样的模板会得到“ ...

ExecCommand函数的粗体字定义？

[ExecCommand提供了一种在iFrame中加粗文本，使其变为斜体，在其下划线等的方法。但是它缺少创建或或（有formatBlock但仅...的选项。

联接表的DataGrid不可编辑

我使用LINQ加入了两个表，它们的关系已映射到EF，但是现在datagrid中显示的数据不可编辑，我如何才能做到这一点？我的加入表达式：CMIS_Entities context = ...

如何避免从contenteditable中删除键入的文本 在jQuery中>> 我正在使用jQuery UI可拖动组件将<span>添加到可编辑<p>的内容。 [预期输出是，第<p>段应该是可编辑的，并且可拖动组件应该能够拖放到段落，并且<p>的内容也应该是可编辑的。我的代码有问题。当我在<p>内键入内容并单击外部<p>时。从段落中删除的键入的单词。 我的代码如下： $(function() { function textWrapper(str, sp, btn) { if (sp == undefined) { sp = [0, 0]; } var txt = ""; if (btn) { txt = "<span class='w b'>" + str + "</span>"; } else { txt = "<span class='w'>" + str + "</span>"; } if (sp[0]) { txt = "&nbsp;" + txt; } if (sp[1]) { txt = txt + "&nbsp;"; } 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] = "&nbsp;" + b.prop("outerHTML") + "&nbsp;"; } 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 = $("<span>", { class: "ui-icon ui-icon-close" }).appendTo(tObj); } function makeTextBox(txt) { var sp = $("<span>", { 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; } <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="row"> <p class="given" contenteditable="true">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.</p> </div> <div class="divider"></div> <div class="section"> <section> <div class="card blue-grey "> <div class="card-content white-text"> <div class="row"> <div class="col s12"> <span class="given btn-flat white-text red lighten-1" rel="1">the Santee, thDakota</span> <span class="given btn-flat white-text red lighten-1" rel="2">America</span> <span class="given btn-flat white-text red lighten-1" rel="3">Qatar</span> <span class="given btn-flat white-text red lighten-1" rel="4">Philippines</span> </div> </div> </div> </div> </section> </div> 问题间歇出现。 我正在使用jQuery UI的可拖动组件将添加到内容可编辑 。预期的输出是，段落

我正在使用jQuery UI的可拖动组件将添加到内容可编辑 。预期的输出是，段落

如何防止用户在不使用contenteditable = false的情况下键入超链接>

下面我有一个内容可编辑的div，它可以从标签中生成超链接：

用纯jQuery即时替换内容中的文本

我在StackOverflow上看到了一些有关此的问题，但是似乎很难找到基于jQuery的解决方案。因此，我想问这个问题。我想在...

检测内容可编辑div的第一行上的向上箭头

假设我们在下面介绍的两个div上工作。

如何创建内容可编辑div中包含的div的鼠标选择？

我有一个内容可编辑的div，用户可以在其中添加图片。我希望他能够在内容可编辑div中移动它们。如果我使用img标签没有问题，则用户可以轻松选择...

的Visual Studio 2015年社区RC科尔多瓦无法在CONTENTEDITABLE格删除图像

要重新生成问题：用Visual Studio创建2015年社区RC或Visual Studio 2013社区更新4与Apache Cordova的CTP 3.1工具更换一个新的JavaScript科尔多瓦项目...

CONTENTEDITABLE格与iframe中作出的富文本/所见即所得的编辑器

我试图权衡使用的利弊 vs. in making my own rich text/wysiwyg editor. In doing so, why can't I just use a contenteditable and why do ...

CKEDITOR初始化过程中删除HTML5视频块

我有视频DIV CONTENTEDITABLE后初始化CKEditor的视频消失。我试图ckeditor4和ckeditor5内嵌11.2.0中的所有脚本在我的本地服务器，而不是CDN。火狐浏览器Chrome的ANF ...

获取内容可编辑innerHTML的子内容

我想在按键时将contenteditable的内容分为两部分。 这是我的内容 我想获取...的子字符串]]