我在我的网页上使用 contenteditable。这工作正常，但浏览器在激活时会在可编辑部分周围放置一个丑陋的边框。此外，当焦点更改为页面上的另一个元素时，其中一些边框不会被删除。
Safari 创建了浅蓝色边框，Firefox 使用了细黑线，因此这里有一些浏览器解释在起作用。
我尝试将可编辑部分的边框明确设置为无，并使 CSS 属性变得重要，但这不会改变浏览器的行为。
我的问题：
有没有一种方法可以影响页面元素的样式，当用户单击页面元素内部开始编辑时，该样式会否决边框属性？
我可以获得单个元素或共同祖先元素，但我无法弄清楚如何获取所有突出显示的元素。
这是获取共同祖先的演示。
console.clear();
document.querySelector('div').addEventListener('mouseup', () => {
const selection = window.getSelection();
const elem = selection.getRangeAt(0).commonAncestorContainer.parentNode;
console.log(elem);
});<div contenteditable="true">
<header>
<h1>Rich Text Editing Development</h1>
<p>I'm <strong><em>really</em> annoyed</strong> with trying to figure out this answer.</p>
</header>
</div>由于rangeCount总是只有 1，并且我从选择和其他子项中看到的对象没有所选项目的数组或节点列表（我注意到），所以我不知道该怎么办。
那么我如何知道哪些元素被选择/突出显示？
我正在尝试使用contenteditable. 在这个 MCVE 中，它只有一个功能，就是给选中的文本一个红色高亮。†
我正在使用的代码在这里：
function createSpan() {
let selection = document.getSelection();
let range = selection.getRangeAt(0);
let element = document.createElement("span");
element.className = "inline-equation";
range.surroundContents(element);
let newRange = new Range();
newRange.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(newRange);
}
$("button").click(createSpan).inline-equation {
background-color: red;
display: inline-block;
}
#editor {
width: 100%;
height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Create Span
</button>
<div id="editor" contenteditable="true">
This is a contenteditable area.
</div>我对用户可能会移出突出显示区域并继续输入无格式文本的想法感到困惑。要体验这个问题：
这个新文本也有红色突出显示，即使您试图span通过按右箭头键移出插入的文本。
我仍然希望为用户提供附加格式化的新文本的选项，但同时也允许用户导航出来，span以便他们可以继续输入普通文本。
换句话说， …
如何在 React 中将焦点设置在 contentEditable 元素上？我找到了很多关于该主题的页面，但无法让它发挥作用。
示例代码：
import React, { useRef, useEffect } from 'react';
const About = () => {
const inputRef = useRef(null);
useEffect(inputRef => {
if (inputRef) {
inputRef.focus();
}
}, []);
return (
<div className="about">
<h2>About</h2>
<p className="paragraph"
contentEditable={true}
suppressContentEditableWarning={true}
spellCheck={false}
ref={inputRef}
>
Hello
</p>
</div >
)
}
export default About;
我想用 html contenteditable div 替换所有出现的情况。我需要用标签替换该事件，以使用 css 对其进行自定义。但是当我尝试用跨度替换时，MutationObserver 会生成无限循环......
document.designMode = "on";
var text = document.getElementById('text');
let observer = new MutationObserver(mutations =>
mutations.forEach(mutation => {
console.log(text.textContent);
// let a = "a";
// a.style.color = "red";
text.textContent = text.textContent.replace('/', '<span>/</span>');
observer.disconnect();
const range = document.createRange();
const textNode = text.firstChild;
range.setStart(textNode, text.textContent.length);
range.setEnd(textNode, text.textContent.length);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
// observer.disconnect();
})
);
observer.observe(text, {
childList: true,
characterData: true,
subtree: true,
});
<p id="text" contenteditable="true">I'm a text will be change</p>
javascript dom contenteditable dom-events mutation-observers
我正在尝试使用contentEditable div编写一个所见即所得的编辑器,并且在处理粗体(和斜体)时遇到了麻烦.
当选择div中的所有文本时,execCommand('bold')在div中工作,但是当我尝试获取该内容的HTML时,HTML不会显示任何格式.
要了解我的意思,请尝试在Firefox 5中运行以下HTML代码:
<script type="text/javascript">
window.onload = function () {
var output = document.getElementById('output');
var input = document.getElementById('input');
}
</script>
<body>
<button onClick="execCommand('bold', false, null);output.value=input.innerHTML;">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div id="input" contenteditable="true">Some editable text</div>
</div>
<textarea id="output"></textarea>
</body>
</html>
请尝试以下方法:
<span style="font-weight:bold;">加粗单词,这有点不幸(<b>在Safari,Chrome中),但仍然可以胜任.任何关于可能导致这些问题以及如何解决这些问题的想法都将不胜感激!
我需要让用户将一个contenteditable div中的元素拖到文本中的另一个点.需要移动的项目设置为ContentEditable = false.
这可能吗？我似乎无法找到任何真正的解决方案.这就是我想要做的事:http://jsfiddle.net/s82Ex/
我正在尝试编写一个函数,该函数将keyup在contentEditable div中为插入符号前面的元素提供引用.
如果插入符号位于文本节点中,则该函数应返回null.如果插入符号位于contentEditable的开头,则该函数应返回null.
但是如果插入符号位于文本节点的开头,并且此文本节点前面紧跟一个元素(如Span),则该函数应返回对此元素的引用.
并且,如果插入符号位于两个Html元素之间(例如,在两个Spans之间),则它应该返回对插入符号之前的元素的引用,即两个元素中的第一个.
如果有两个或多个文本节点紧跟在一起,则应将它们视为单个文本节点.
我已经开始拼凑一些东西了.我正在考虑使用范围偏移来计算我到文本节点的距离,但感觉过于复杂.我不禁想到有一些我没想到的明显的东西.
我是JavaScript的新手,希望有人可以帮我解决以下问题:
主要在IE 8中寻找解决方案 - 如果它能够更好地覆盖其他浏览器/版本.我有一个页面只有一个动态创建的contenteditable div,包含文本和HTML标记.在页面上,我想添加一个按钮,将光标位置的某些文本插入此div.
到目前为止,我有以下代码,只要我在div中选择一个文本,但是如果我只是将光标放在那里而不选择任何东西,它会将我的文本插入div之外.
如何才能让它始终在光标位置添加我的文本,就像现在在选择位置一样？(我甚至不需要它来替换选择,因为它只需要在光标位置.此外,这只需要一个特定的div.)
我的代码:
<html>
<head>
<script type="text/javascript">
function test()
{
var input = "TEST";
document.selection.createRange().pasteHTML(input);
}
</script>
</head>
<body>
<div id="myDiv" contenteditable>This is a test text.</div><br />
<button type="button" onclick="test()">Test</button>
</body>
</html>
蒂姆,谢谢你的帮助
javascript jquery contenteditable cursor-position getcaretpos
我正在尝试一下contentEditable并遇到这个问题:我有以下js片段
var range = document.getSelection().getRangeAt(0);
var newNode = document.createElement("span");
newNode.className = "customStyle";
range.surroundContents(newNode);
这个HTML片段:
<ul>
<li>the <b>only entry</b> of the list</li>
</ul>
<p>Some text here in paragraph</p>
js代码允许使用<span>标记包装当前选择.
当选择包括整个HTML标签(例如,选择'唯一条目')时,它完美地工作,但当然,当选择仅包括其结尾之一时(例如,从'条目'选择'有些',两者都包括在内) .
虽然我知道这个问题并非无足轻重,但我正在寻找有关最佳方法的建议.提前致谢!
contenteditable ×10
javascript ×6
html ×2
jquery ×2
range ×2
autofocus ×1
bold ×1
caret ×1
css ×1
dom ×1
dom-events ×1
editor ×1
element ×1
getcaretpos ×1
html5 ×1
reactjs ×1
select ×1
selection ×1
textnode ×1
wysiwyg ×1