contenteditable 相关问题

我有一个 contentEditable div ：在此输入您的文字.. 还有一个下拉按钮：我有一个contentEditable div： <div id="editor" contentEditable="true"> Enter your text here.. </div> 还有一个dropdown button： <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown" title="Taille de police"><i class="fa fa-text-height"></i> <b class="caret"></b></button> <ul class="dropdown-menu" id="tailles"></ul> </div> 为了用我正在使用的脚本填充此下拉列表： //Liste des tailles utilisé var tailles = [ 'Petite (8px)', 'Petite (10px)', 'Petite (12px)', 'Normale (14px)', 'Grande (18px)', 'Grande (24px)', 'Grande (36px)' ]; //Récuperer le drop down du Taille de police var taillesDropDown = document.getElementById('tailles'); //Population du drop down Taille du police tailles.forEach(function(taille){ var li = document.createElement('li'); var a = document.createElement('a'); var fontSize = parseInt(/\d+/.exec(taille)); a.style = "font-size:" + fontSize + "px" + ";height:"+(fontSize+4) + "px" + ";padding:6px;"; a.appendChild(document.createTextNode(taille)); a.id = fontSize + "px"; li.appendChild(a); taillesDropDown.appendChild(li); }); 为了给每个项目一个事件，我正在使用这个脚本： //Changer la taille du police //Fonction pour proteger le contentEditable conte la perte du focus $(function(){ //Selectionner tous les elements du dropdown du taille du police $('#tailles a') //mettre un terme à l'événement de mousedown .on('mousedown', function (e) { e.preventDefault() return setTimeout(300) }) //gérer l'événement clic seulement une fonction que nous pouvons attribuer ce que nous voulons faire quand nous cliquons. .on('click', function(e){ document.execCommand('fontSize', false, e.currentTarget.id); console.log(e.currentTarget.id); }) }) 问题是，当我选择 dropdown 中的某些项目以更改 editableContent div 中所选文本的字体大小时，字体大小总是更改为 36px。我尝试检查FireBug中的下拉项目，这就是我得到的： <li><a id="8px" style="font-size: 8px; height: 12px; padding: 6px;">Petite (8px)</a></li> <li><a id="10px" style="font-size: 10px; height: 14px; padding: 6px;">Petite (10px)</a></li> <li><a id="12px" style="font-size: 12px; height: 16px; padding: 6px;">Petite (12px)</a></li> <li><a id="14px" style="font-size: 14px; height: 18px; padding: 6px;">Normale (14px)</a></li> <li><a id="18px" style="font-size: 18px; height: 22px; padding: 6px;">Grande (18px)</a></li> <li><a id="24px" style="font-size: 24px; height: 28px; padding: 6px;">Grande (24px)</a></li> <li><a id="36px" style="font-size: 36px; height: 40px; padding: 6px;">Grande (36px)</a></li> 因此，填充 dropdown 的脚本中没有错误，因为您可以看到每个项目的 id 具有应在 execCommand 的第三个参数中给出的值。我还检查了更改字体大小的文本： <font size="7">text</font> 我该如何解决这个问题？我还注意到，当我更改字体大小时，contentEditable 使用 HTML 标签来做到这一点，还有颜色和字体名称，是否有任何方法强制 contentEditable 使用 css 来代替？ document.execCommand("fontSize"...命令仅接受“HTML 字体大小”(1-7)。请参阅API fontSize - 更改选择或插入时的字体大小观点。这需要将 HTML 字体大小 (1-7) 作为价值论证您尝试使用较大的尺寸作为参数（12...36）来执行命令，以便该命令接近您可能想要的最接近的尺寸。因为所有参数都大于 7，所以近似值始终为 7。如果确切的像素高度对您来说并不重要，那么最好的解决方案是更改代码以使用不精确的 html 字体大小。另请参阅： document.execCommand() 字体大小（以像素为单位）？嘿我给你找到答案了 HTML： <div class="font-size"> <p>font-size:</p> <button id="increase" onclick="increase()">A+</button> <button id="decrease" onclick="decrease()">a-</button> </div> JS： function increase() { txt = document.getElementById('Your text id'); style = window.getComputedStyle(txt, null).getPropertyValue('font-size'); selection = window.getSelection(); currentSize = parseFloat(style); txt.style.fontSize = (currentSize + 1) + 'px'; document.getElementById("Write").innerHTML = text.replace(selection, txt) } function decrease() { txt = document.getElementById('You text id'); style = window.getComputedStyle(txt, null).getPropertyValue('font-size'); currentSize = parseFloat(style); txt.style.fontSize = (currentSize - 1) + 'px'; }

javascript html css contenteditable

回答 2 投票 0

当插入符位于空子 div 内时，contenteditable div 中的 getBoundingClientRect 出现问题

我有一个可内容编辑的div，其中包含一个selectionchange 事件，该事件记录新范围的getBoundingClientRect。一切正常，直到插入符号移动到空 div 内，如下所示：我有一个 contenteditable div，其中包含一个 selectchange 事件，该事件记录新范围的 getBoundingClientRect。一切正常，直到插入符号移动到空 div 内，如下所示： <div contenteditable=""> bbackground: transparent !important; <div id="meyes" style="padding-left: 100; min-height:1em;width: 500px;background-color: bisque;text-align: center;"></div> text </div> document.addEventListener('selectionchange', (e) => { let sel = window.getSelection(); if (sel.rangeCount > 0) { let range = sel.getRangeAt(0).cloneRange(); const rect = range.getBoundingClientRect(); console.log("rect", rect); } }); 在这种情况下，当插入符号位于 id 为“meyes”的空 div 内时，getBoundingClientRect 返回全零：{x: 0, y: 0, width: 0, height: 0}。有没有办法解决此问题或解决此问题，即使在空 div 中也能获取实际的 getBoundingClientRect？” 任何替代建议将不胜感激。您收到此消息是因为您的选择为空。您是否期望它响应整个元素的大小，即使其中没有选择任何文本？ setTimeout(function() { var r = document.querySelector("div").getBoundingClientRect(); console.log(JSON.stringify(r)); var r2 = window.getSelection().getRangeAt(0).getBoundingClientRect(); console.log(JSON.stringify(r2)); }, 3000); div { width: 300px; min-height: 30px; background: orange; } <div contenteditable="true"> </div>

javascript range contenteditable caret getselection

回答 1 投票 0

如何将光标移动到可内容编辑实体的末尾

我需要将插入符号移动到内容可编辑节点的末尾，就像在 Gmail 笔记小部件上一样。我在 StackOverflow 上阅读了线程，但这些解决方案基于使用输入，并且不适用于 contenteditable

javascript contenteditable cursor-position

回答 9 投票 0

使用 JavaScript 在 Instagram DM 的 Div 元素中模拟按键

我正在开发一个 JavaScript 项目，我需要在 Instagram 直接消息中模拟在消息框中输入内容。然而，消息框不是标准输入或文本区域元素，而是一个 div...

javascript dom automation instagram-api contenteditable

回答 1 投票 0

设置内容可编辑元素的最大长度

我有这个代码这在 jquery 中 $("#IIYBAGWNBC").text(function(index, currentText) { 返回 currentText.substr(0, 100); }...

jquery html contenteditable

回答 8 投票 0

如何在jetpack compose中从WebView获取内容

我有可编辑的网络视图。我正在使用 webview 作为富文本编辑器。 WebViewClient 作为 AccompanistWebViewClient。在 onPageFinished 上，我将 css 注入到 webview 查看？.evaluateJavascript(js, null) 乙...

webview android-jetpack-compose contenteditable

回答 1 投票 0

反应内容可编辑光标跳转到开头

我正在使用模块react-simple-contenteditable 来编辑空白工作表的填充内容。我必须使用内容可编辑元素而不是输入元素的原因是因为我想要...

reactjs contenteditable

回答 4 投票 0

如何在线程上写入contenteditable div

我正在尝试创建一个 Chrome 扩展程序，可以将文本写入 Threads.net 上线程的“回复”字段。这是一个内容可编辑的 div，据我所知，我需要编辑下一个 p 的文本

javascript facebook google-chrome-extension contenteditable

回答 1 投票 0

在compositionend事件中调用preventDefault方法没有效果

var tempNode = document.getElementById('view_1'); tempCNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // 真的 e.preventDefault(); }); var tempNode = document.getElementById('view_1'); tempCNode.addEventListener('compositionend', function(e) { console.log(e.cancelable); // true e.preventDefault(); }); <div id="view_1" class="view" contenteditable="true"> <p> <br> </p> </div> 我想获取输入法的值，不让它直接显示在div中。我该怎么办？谢谢我最近遇到了这个问题。这是我的理解：在 JavaScript 的 'compositionend' 事件中使用 'e.preventDefault() ' 在技术上是可行的，但可能不会达到您期望的效果。根据Stack Overflow讨论，在compositionend事件中调用preventDefault没有任何效果。这可能是因为合成结束事件表示合成会话的结束，并且此时阻止默认操作可能没有意义，因为输入合成已经完成。如果您尝试控制或修改文本输入的行为，则可能需要使用其他事件，例如“input”、“keydown”或“compositionstart”。但是，具体方法取决于您想要实现的目标。

javascript html dom-events contenteditable

回答 1 投票 0

contenteditable 相关问题

最新问题