contenteditable 相关问题

Chrome 中蓝色焦点轮廓的默认样式是什么？

我有一个使用 contenteditable div 的网络应用程序。我喜欢它们在 Chrome 中的显示方式：当我集中注意力时，Chrome 会在 div 周围显示漂亮的蓝色光芒。然而在 Firefox 中我得到了一个丑陋的虚线轮廓。 W...

无法使用 contentEditable 元素访问 `e.target` 中的属性

我的 React 应用程序中有一个 h1 元素，我计划将其与 contentEditable 属性一起使用，以允许用户直接编辑它。问题出在我用来管理所有内容的 useFormValues 挂钩中......

如何在内容可编辑 div 中突出显示第一个退格键上以“<>”开头的单词，并在第二个退格键上删除相同的单词

const textareaHtml = ` ... const textareaHtml = ` <div class="textarea-item"> <div class="edit" role="textbox" contenteditable="true" id="${textareaId}"> </div> <ul class="autocomplete-list"></ul> </div>`; $(".textarea-container").append(textareaHtml); 我有一个可以做笔记的应用程序，您可以通过输入“<>”来引用另一个笔记，这会打开我可以添加的其他笔记的下拉列表。基本上我希望能够通过先突出显示然后删除整个内容（“<>注释”）来删除它。我如何为可内容编辑的 div 实现此目的。找到文本区域的答案，但无法获取光标并突出显示此内容。谢谢你。 我尝试使用插入位置，但找不到文本区域中 selectstart 和 end 的替代品。 // Assuming 'textareaId' is the ID of your contenteditable div const contenteditableDiv = document.getElementById(textareaId); // Function to select a range of text within a contenteditable div function selectText(start, end) { const range = document.createRange(); range.setStart(contenteditableDiv.firstChild, start); range.setEnd(contenteditableDiv.firstChild, end); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } // Function to delete the currently selected text function deleteSelectedText() { const selection = window.getSelection(); if (!selection.isCollapsed) { selection.deleteFromDocument(); } } // Add an event listener to the contenteditable div contenteditableDiv.addEventListener('keydown', (event) => { if (event.key === 'Backspace' || event.key === 'Delete') { deleteSelectedText(); } }); // Example usage: select and delete text from 10th to 20th character selectText(10, 20); deleteSelectedText();

div 内容可编辑但只读

我有一个带有一些文本的div，我希望当光标悬停在该div上时选择文本。如果我让这个 div 保持原样，当尝试选择全部 (CTRL+A) 时，我会选择所有页面内容，即全部

仅将样式应用于可编辑内容中的选定文本<p>

问题 您好，我有一些代码，当单击按钮时， contentEditable 标记中的所有内容的字体粗细将为 600（粗体）。 我想知道的是我怎样才能做到... 问题 嗨，我有一些代码，当单击按钮时，contentEditable <p> 标签中的所有内容的字体粗细将为 600（粗体）。 我想知道的是，当按下按钮时，如何才能做到这一点，而不是将 p 标签中的所有内容设置为 600 字体粗细，而只设置所选文本的样式。例如，如果您仅突出显示 p 标签的前两个单词并按下按钮，则只有前两个单词的字体粗细会更改。 图像示例 在示例中，按下按钮时，只有前两个单词的字体粗细会发生变化。 链接到包含代码的小提琴：https://jsfiddle.net/AidanYoung/9tg4oas5/ 这是您的解决方案。 function changeBold() { const text = window.getSelection().toString(); var span = document.createElement('span'); span.innerHTML = text; span.style.fontWeight = 'bold'; document.execCommand('insertHTML', false, span.outerHTML); } <p contenteditable="true" id="contenttxt"> Some text in this paragraph tag </p> <button onclick="changeBold()">Bold selected text</button> 可以使用span标签并添加ID function changeBold() { document.getElementById("strongC").style.fontWeight = "600"; } <p contenteditable="true" id="contenttxt"> <span id="strongC">Some text</span> in this paragraph tag </p> <button onclick="changeBold()">Bold selected text</button>

在可内容编辑的 div 中触发拼写检查

我正在制作一个不依赖 contenteditable 的编辑器，以获得干净、受控的输出。所以我捕获所有键盘和鼠标事件，构建模型并从中创建 DOM 视图

Vue 2 内容可使用 v-model 编辑

我正在尝试制作一个类似于Medium的文本编辑器。我正在使用内容可编辑段落标签，并将每个项目存储在一个数组中，并使用 v-for 渲染每个项目。但是，我在绑定方面遇到了问题...

HTML 中的 Contenteditable 属性

我在DIV标签中使用contenteditable时遇到了一个奇怪的问题，这是在线项目（在Component Inner2中），如果我用contenteditable div包装反应数据消息并触发...

如何解决可编辑内容的光标问题

帖子的最终更新以及最后的目标成就。有输入字段。需要显示包含 img 和不可显示的文本范围的块。下面的片段完成了任务。但它...

如何解决内容可编辑属性的光标问题？

有输入字段，内容可编辑。需要显示包含 img 和不可显示的文本范围的块。下面的片段完成了任务。但它有错误。我无法改变内容...

如何隐藏 DOM 的 img 标签但显示它们？

（下面更新）我需要在 div 中显示图像（表情符号），属性为 contenteditable。由于某种原因我无法使用 img 标签。只是具体情况，还有其他问题。 下面的片段带有 t...

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

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

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

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

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) } 但这会导致失去正确的起点/终点...

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

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

在 contenteditable div 中聚焦子元素

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

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

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

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

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

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

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

contenteditable inside div是主要的

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