Как предотвратить |Mozilla FireFox (3.6) ContentEditable - применяет CSS к редактируемому контейнеру вместо его содержимого - PullRequest
Новая
       2

Как предотвратить |Mozilla FireFox (3.6) ContentEditable - применяет CSS к редактируемому контейнеру вместо его содержимого

1 голос
/ 03 декабря 2010

У меня есть страница с чем-то вроде этого: 

<div id="editor" contenteditable="true">SomeText</div>

У меня есть самодельный редактор JS, который на самом деле выдает 

document.execCommand(some_command,false,optional_value);

когда пользователь нажимает кнопку в редакторе. (Например, у меня есть простая, простая кнопка [Bold]).

Все хорошо, пока я применяю редактирование к части "SomeText". Например, выбор «Текст» с помощью мыши и нажатие кнопки [Полужирный] (что приводит к document.execCommand («полужирный», false, false);) приведет к: 

<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>

но когда я выбираю все содержимое div (в данном примере «SomeText») и нажимаю [Bold] в моем редакторе, FF не выдаст ожидаемый 

<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>

а точнее 

<div id="editor" contenteditable="true"  style="some-css-here">SomeText</div>

Обратите внимание, что атрибут "style" вошел в редактируемый div!

Почему это имеет значение для меня? - Это потому, что после редактирования я хотел бы взять содержимое редактируемого div вместе со всеми стилями, форматированием и т. Д. И далее использовать его на странице. Но я не могу - весь стиль теперь находится внутри div. Решение, когда мне рекомендуют извлекать стили из div, неприемлемо - div в течение своей жизни берет много стилей из других активных элементов страницы (интенсивное использование jQuery)

Итак, вкратце: Как сказать FF никогда не трогать редактируемый div и применять все стили только к его внутреннему содержимому?

Искренне спасибо за ваше время. (только что выдернул последние волосы, просматривая сайт разработчиков FF вместе со многими другими (((()

Ответы [ 3 ]

2 голосов
/ 17 мая 2012

Вызовите один раз перед любой другой командой execCommand и переключите FF в режим тега 

document.execCommand('StyleWithCSS', false, false);
1 голос
/ 03 декабря 2010

Иногда организация и написание моих мыслей приносит мне очень положительные результаты.

Я нашел удовлетворительное решение.

1) вставьте скрытый div в качестве первого дочернего узла в ваш редактируемый div: 

<div id="editor" contenteditable="true">
   <div class="edit_text_mozilla_hack"></div>
   SomeText
</div>

2) CSS для него: 

.edit_text_mozilla_hack {
    display: block;
    width: 0;
    height: 0;
    -moz-user-edit: none;
    -moz-user-select: none
}

3) Теперь вы можете редактировать. Я проверил это с помощью этого небольшого теста (на самом деле мне нужны все эти материалы для редактирования коротких фрагментов текста, таких как подписи, темы новостей и т. Д.)

4) Прежде чем использовать контент - obious - удалите этот div. 5) Если вы хотите вернуться к редактированию - вставьте его снова.

Некоторые фрагменты кода из рабочего (наконец-то!))) Проекта: 

//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
    if (!editables) {
        editables = editGetEditables();
    }
    $("." + adminOptions["admin_loader"]).remove();
    editables.each(function() {
        $(this).prepend('<div class="edit_text_mozilla_hack"></div>')
    });
}

//removes the hack from all regions
function editRemoveMozillaHack() {
    $(".edit_text_mozilla_hack").remove();
}

//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
    return $("[contenteditable=\"true\"]");
}

конечно - тестирование не завершено. Я хотел бы услышать от вас;) С уважением.

0 голосов
/ 04 февраля 2012

У меня была похожая проблема, когда вы выделяете все в contenteditable области мышью или используете CTRL-A там, а затем нажимаете CTRL + B, например, Firefox помещает стиль в contenteditable контейнер вместо его содержимого.1003 * То же самое относится к курсиву, размеру шрифта, семейству шрифтов и другим встроенным стилям.Я написал функцию, которая исправляет эту проблему.Он создает новый элемент под содержимым и изменяет выбранный диапазон до этого элемента: 

function checkSelectAll (container, cmd, args) {
    if(document.getSelection) {
        var     cn = container.childNodes,
            s = document.getSelection(),
            r = s.getRangeAt(0);

        if(r.startContainer == container && r.endContainer == container){
            var endMarker = document.createElement('SPAN')
            container.appendChild(endMarker);
            r.setEndBefore(endMarker);
            s.removeAllRanges();
            s.addRange(r);
            document.execCommand(cmd,false,args);
            container.removeChild(endMarker);

        } else {
            document.execCommand(cmd,false,args);
        }
    } else {
        document.execCommand(cmd,false,args);
    }
};

этот код влияет только на FF, для других браузеров он просто применяет execCommand

...