contenteditable 相关问题

contentEditable是一个HTML属性（由Microsoft发明并在HTML5中标准化），用于客户端浏览器内“富文本”编辑。

如何在div中编辑具有内容可编辑属性的图像？

我需要在div中显示图像（表情符号），属性为contenteditable。由于某种原因我无法使用 img 标签。只是具体情况，不涉及上下文。下面的片段包含三个案例：目标是...

html css contenteditable

回答 1 投票 0

获取带有和 HTML 标签的字符串中子字符串的开始位置

我在获取具有混合内容（HTML 和文本）的字符串中的准确起始位置时遇到了挑战。用户将内容输入到 contenteditable div 中。我无法使用文本区域，因为

javascript html jquery css contenteditable

回答 1 投票 0

JS/contenteditable div：三击在 firefox 中选择/范围

我正在使用一个设置为 contenteditable 的 div 容器的 HTML 编辑器：一线我正在使用一个设置为 contenteditable 的 div 容器的 HTML 编辑器： <div contenteditable="true"> <div>First line</div> <div><a href="link">link</a>some text</div> <ul> <li>firstli</li> <li>secondli</li> <li>thirdli</li> </ul> </div> 在 Firefox 上三击选择元素时，会出现一些奇怪的行为：三击“A”标签仅选择该标签。到目前为止这不是问题，它与 Webkit 不同，在 Webkit 上整个周围的“div”都被选中。现在，当我三次单击“A”标签后面的文本（节点）时，div 的所有元素都会突出显示，但选择/范围在“A”标签处结束。三次单击 Webkit 上的范围内容： <div><a href="link">link</a>some text</div> Firefox 上的范围内容： <a href="link">link</a> 由于用户可以复制和粘贴元素，因此必须在三次单击时进行正确的选择。 ul/li 也有不同的行为： Safari/Chrome 选择“li”元素： <li>secondli</li> 这是在 Firefox 上三次单击“secondli”（复制 secondli）时的范围： <ul> <li>firstli</li> <li>secondli</li> <li>secondli</li> </ul> 如何解决这个范围在所有浏览器上都相等的问题？我试过像这样更正三次点击的范围： if (e.detail > 2) { let divLi = range.startContainer; while(!divLi.tagName || !divLi.tagName.match(/DIV|LI/)) divLi = divLi.parentNode; range.selectNode(divLi) } 但这会导致失去正确的起点/终点...

javascript range selection contenteditable

回答 0 投票 0

在“contenteditable”div中的光标位置插入元素

在我的项目中，我试图用“contenteditable = true”将插入元素包装在一个div中。这个想法是用户可以随时在 div 中插入这个元素，包括在中间...

javascript html insert contenteditable text-editor

回答 1 投票 0

在 contenteditable div 中聚焦子元素

我有一个 Vue 3 组件，其中包含一个内容可编辑的 div，我正在使用 v-for 循环向其中动态添加子元素。我需要确定当前关注的是哪个子元素，所以...

typescript vuejs3 contenteditable selection-api

回答 0 投票 0

在 react 的内容可编辑的 div 中插入插入符号的 HTML

我们如何使用 React 将 span 标签添加到光标所在的 div 中的最后一个位置，该 div 的 contentEditable 属性已设置为 true（package react-contenteditable）？这个 div 只包含 pl ...

javascript html reactjs contenteditable

回答 0 投票 0

如何使可拖放的 div 也可编辑？

我正在使用 dnd-kit/core 并且无法通过编辑按钮使我的 UserComponent 可编辑。我不认为我写的编辑按钮可能与 dnd-kit 兼容（因为它不起作用）？一个...

reactjs contenteditable dnd-kit

回答 2 投票 0

如何使用 javascript 从可竞争的 div 元素中动态读取文本？

单击 p 按钮到上面的 div 中，将附加一个段落，如下所示。 const newParagraph = document.querySelector('.paragraph'); newParagraph.addEventListener("点击", ()...

javascript contenteditable

回答 1 投票 0

contenteditable inside div是主要的

当我在其中放置一个 div contenteditable 时，我希望用户编写的第一件事是创建一个基本且未删除的 div，并且文本在 div 中我不喜欢这个：我喜欢这个：甚至...

javascript html contenteditable

回答 1 投票 0

获取 contenteditable 中发生按键按下的元素

我有一个内容可编辑的 div，该 div 有一些内容： Lorem ipsum dolor sit ... 我有一个div是contenteditable并且那个div有一些内容： <div contenteditable="true" id="editable-div"> <p id="paragraph"> Lorem <em>ipsum</em> dolor sit <strong id="stong-el">amet</strong> <p> </div> 我想拦截keydown事件并找到用户试图写入的元素。听content editable div时已经找不到具体元素了： const div = document.getElementById('editable-div'); div.addEventListener('keydown', event => { /* ??? */ }, false); 问题：回调中的事件并没有告诉我写入了哪个元素，它只告诉我我已经写入了#editable-div 我的另一个尝试是监听嵌套事件，像这样： // either const el = document.getElementById('paragraph'); // or const el = document.getElementById('stong-el'); el.addEventListener('keydown', event => { /* ??? */ }, false); 问题是事件永远不会触发。显然，该事件仅在具有 contenteditable 属性的元素上触发，这很糟糕。我最后的办法是听#editable-div并检查哪个元素有文本选择，但如果有任何其他方式我宁愿不这样做。更新我发现的另一种方法是在可编辑元素上使用MutationObserver，像这样： const observer = new MutationObserver(mutations => { mutations.forEach(function(mutation) { console.log(mutation.target); }); }); const config = { characterData: true, subtree: true }; const div = document.getElementById('editable-div'); observer.observe(div, config); 这记录了我编辑的文本元素。我不确定我的问题是否得到了回答，因为最后我想做两件事：捕获并阻止更新内部数据结构的事件从数据结构中渲染 React 组件这似乎不是一个合适的解决方案。您可以将 keydown 事件附加到文档的正文中。然后在 keydown 事件上，使用 document.activeElement 返回当前具有焦点并将接收键盘输入的元素。这里是解释 document.activeElement 的链接（https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement）您可以将侦听器放在 contenteditable 元素上，然后通过比较其新文本与旧文本来检查更新了哪个元素。并且取决于您可以在相应的分支中执行您的操作。检查这个代码块- <div id="ce" contenteditable="true"> <strong id="s">Abc</strong><br/> <i id="i">Hello</i> </div> <script> oldstext = document.getElementById('s').textContent; olditext = document.getElementById('i').textContent; document.getElementById('ce').addEventListener('keydown', event => { //alert("ce Edited"); if(oldstext != document.getElementById('s').textContent){ console.log(oldstext + " v/s " + document.getElementById('s').textContent); oldstext = document.getElementById('s').textContent; } else if (olditext != document.getElementById('i').textContent){ console.log(olditext + " v/s " + document.getElementById('i').textContent); olditext = document.getElementById('i').textContent; } }, false); </script> 您可以查看当前文本选择的anchorNode来获取发生keydown事件的DOM节点： const div = document.getElementById('editable-div'); div.addEventListener('keydown', event => { console.log(window.getSelection()?.anchorNode); }, false); https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

javascript html wysiwyg contenteditable

回答 3 投票 0

无法在 Firefox 中的按钮内将空格输入跨度

我有一个按钮元素，它需要有可以动态修改的文本。我在添加空格时遇到了麻烦，当时我引用这个答案有一个跨度，这是 contentedit ...

javascript html google-chrome firefox contenteditable

回答 1 投票 0

有没有办法在输入事件之前检测元素高度

我在下面有可编辑的内容和一个 onbeforeinput 事件侦听器和函数。使用 lit.js 我想在到达 dom 之前获取段落或 h1 元素。所以我可以得到它的高度和宽度...

javascript contenteditable lit

回答 0 投票 0

ContentEditable DIV--禁用拖放功能

是否可以在将 contentEditable 属性设置为 true 的元素上禁用拖放功能。我有以下HTML页面。