内容 - Edibable - Firefox <br / > 标签-allqahome-开发者的问答家园

I ve found the solution :) In order to make this work, you ve to give an id to the caret s parent element. Then you can use the following code. Please note that I get the browsernName from c# and put it into a hidden field. That s why I equaled it to "firefox". The following code is tested with FF 3.6 and it works perfectly. The only thing is that you ll have to check the caret s parent element and if it is not equal to the current row s id, then you ll have to place the caret inside the current row by using a selection function. Also, perform this code on the keyup event and make sure that if you perform some other codes on the keyup event, put this code at the end of it! Anways, enjoy :) // The code works good in the following cases: // 1) If there is text inside the editor and the user selects the whole text // and replace it with a single character, the

tag will be placed and the // text will place inside the p tag // 2) If the user selects the whole code and deletes it and begins to type again // 3) If the user types normally and press enter // NB: Please note me if you find any bug if (browserName == "firefox") { //remove all br tags var brs = txteditor.getElementsByTagName("br"); for (var i = 0; i < brs.length; i++) { brs[i].parentNode.removeChild(brs[i]); } //check whether there is a p tag inside var para = txteditor.getElementsByTagName("p"); if (para.length == 0) { var inner = txteditor.innerHTML.replace(/^s+|s+$/g, ); var str = (inner == "") ? "" : txteditor.innerHTML; var nText = "

" + str + "

"; // in order to prevent a dublicate row clear inside the text editor txteditor.innerHTML = ""; document.execCommand( insertHTML , false, nText); } else { // always make sure that the current row s innerHTML is never empty if (document.getElementById(cRow).innerHTML == "") document.getElementById(cRow).innerHTML = ""; } }

Try inserting a

inside your element. Then almost certainly every newline will be a new paragraph.

If you change the contenteditable element to be a instead of a

the new line will be made with a
. I haven t tested this with other elements, but it would be interesting to see how different elements would behave. A element can be styled with display: block to make it look like a

element.

I met with a similar problem causing extra
in Firefox, but didn t find any

or

. The
was inserted either when the content is empty or after pressing space. Anyway, I tried to solve it by MutationObserver API. It didn t work perfectly but I failed to find other solutions that meets my requirement. if (navigator.userAgent.includes( Firefox )) { const observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // when a
inserted if (mutation.addedNodes.length === 1 && mutation.addedNodes[0].tagName === BR ) { // if at the beginning, remove it if (mutation.previousSibling === null) return mutation.addedNodes[0].remove() // or if after a space, remove it and add a space // since it seems Firefox need the
to keep that space if (mutation.previousSibling.nodeValue?.endsWith( )) { mutation.target.insertAdjacentText( beforeend , ) mutation.addedNodes[0].remove() } } }) }) observer.observe(contentEditableDiv, { childList: true }) } Side effects: Must input twice to add a new line, or to add a space sometimes Unable to make the content a single new line The problem is also mentioned as a bug in Firefox issue tracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1615852 Extract that may help:
elements are required when: block elements are empty, for making them non-zero height and to put the first line for good caret position text ends by a collapsible white-space, to make it visible

上一篇：• 如何在春ro进行 app

下一篇：无法连接到服务器数据库系统的启动包的无效长度已被关闭, 收到快速关闭请求( pgadmin postgres docker)

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全