contentEditable - Firefox< br />标签 [英] contentEditable - Firefox <br /> tag

问题描述

Firefox在插入时插入< / $ gt; 标签，而其他浏览器则添加< p> 或< div> 。我知道铬和safari插入contentEditable div的firstchild相同的标签。因此，如果Firefox，第一个标签的innerHTML为空，firefox只是忽略标签，并通过推入第二行的默认节点创建一个新行，并直接写入编辑器而不是内部的子节点。所以基本上，我想让Firefox在给定的标签内写入，并继续在每次按下输入时插入这种节点。如何做呢？有什么建议么？

解决方案

我找到了解决方案:)为了使这个工作，你必须给插入符父元素。然后你可以使用下面的代码。请注意，我从c＃中获取browsernName并将其放入隐藏字段。这就是为什么我把它等同于火狐。下面的代码是用FF 3.6进行测试的，它完美的工作。唯一的问题是你必须检查插入符的父元素，如果它不等于当前行的id，那么你必须使用选择函数将插入符号放在当前行的内部。另外，在keyup事件上执行这个代码，并确保如果你在keyup事件上执行一些其他的代码，把这个代码放在它的末尾！ ）

  //这段代码在以下情况下效果很好：
 // 1）如果有是编辑器中的文本，并且用户选择整个文本
 //并用单个字符替换它，< p>标签将被放置，并且
 //文本将放置在p标签内
 // 2）如果用户选择整个代码并删除它并开始再次输入
 // 3）如果用户正常输入并按下输入
 // NB：请注意，如果您发现任何错误
 
 if（browserName ==firefox）{
 //全部删除br标签
 var brs = txteditor.getElementsByTagName（br）; 
 for（var i = 0; i  //检查
中是否有p标签var para = txteditor.getElementsByTagName（p）; 
 if（para.length == 0）{
 var inner = txteditor.innerHTML.replace（/ ^ \ s + | \s + $ / g，''）; 
 var str =（inner ==）？与 &＃8203; ：txteditor.innerHTML; 
 var nText =< p id = \+ cRow +\> + str +< / p>; 
 //为了防止在文本编辑器中清除dublicate行
 txteditor.innerHTML =; 
 document.execCommand（'insertHTML'，false，nText）; 
} else {
 //总是确保当前行的innerHTML从不为空
 if（document.getElementById（cRow）.innerHTML ==）
 document.getElementById （cRow）.innerHTML =&＃8203;; 
} 
} 
  

Firefox inserts a <br /> tag on press enter whereas the other browsers are adding either a <p> or <div>. I know that chrome and safari are inserting the same tag of the firstchild of the contentEditable div. So do Firefox, however, if the first tag's innerHTML is empty firefox is just ignoring the tag and creating a new line by pushing the default node in the second line and writes directly inside the editor instead of inside a child node. So basically, I want Firefox to write inside the given tag and continue to insert that kind of node on each press on enter. How can it be done? Any suggestions?

解决方案

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 <p> 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 == "") ? "&#8203;" : txteditor.innerHTML;
        var nText = "<p id=\"" + cRow + "\">" + str + "</p>";
        // 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 = "&#8203;";
    }
}

这篇关于contentEditable - Firefox< br />标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！