contentEditable - Firefoxтег - PullRequest
Новая
       6

contentEditable - Firefoxтег

9 голосов
/ 18 апреля 2011

Firefox вставляет тег <br /> при нажатии Enter, тогда как другие браузеры добавляют либо <p>, либо <div>.Я знаю, что Chrome и Safari вставляют один и тот же тег первого ребенка в div contentEditable.Однако и в Firefox, если innerHTML первого тега пуст, firefox просто игнорирует тег и создает новую строку, нажимая узел по умолчанию во второй строке и записывая непосредственно в редактор, а не внутри дочернего узла.В общем, я хочу, чтобы Firefox писал внутри данного тега и продолжал вставлять такой тип узла при каждом нажатии на ввод.Как это можно сделать?Какие-либо предложения?

Ответы [ 2 ]

3 голосов
/ 19 апреля 2011

Я нашел решение :) Чтобы заставить это работать, вы должны дать идентификатор родительскому элементу каретки.Тогда вы можете использовать следующий код.Обратите внимание, что я получаю browsernName из c # и помещаю его в скрытое поле.Вот почему я сравнил его с «Firefox».Следующий код протестирован с FF 3.6 и работает отлично.Единственное, что вам нужно проверить родительский элемент каретки, и если он не равен идентификатору текущей строки, вам нужно будет поместить каретку внутри текущей строки с помощью функции выбора.Кроме того, выполните этот код для события keyup и убедитесь, что если вы выполняете некоторые другие коды для события keyup, поместите этот код в конец!Anways, наслаждайся:) 

// 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;";
    }
}
2 голосов
/ 18 апреля 2011

Попробуйте вставить <p></p> внутри вашего элемента.Тогда почти наверняка каждый символ новой строки будет новым абзацем.

...