HTML5 div contenteditable - см. цвет текста через выделение

У меня есть div contenteditable, и он отлично работает! Моя единственная проблема заключается в том, что я не вижу цвета текста внутри выделения, все это белое и синее, независимо от того, красные или черные.

Я знаю, что вы можете настроить свой выбор с помощью CSS:

<style>
    .customSelect::selection      { color: #F00; background: #333; }
    .customSelect::-moz-selection { color: #F00; background: #333; }
</style>

И у меня есть действительно полезная функция для изменения CSS моего выбора:

<script type="text/javascript">

    function editCSS(css){
    document.execCommand('insertHTML', false, '<span style="'+css+'">' + 
    document.getSelection()+'</span>');
    }

</script>

Дело в том, что если вы измените цвет вашего выбора с помощью editCSS(), вы не уведомите об этом, потому что вы не видите новый цвет через свой выбор... Вы увидите его только при размытии.


html selection contenteditable execcommand
person pmrotule    schedule 22.01.2014    source источник
comment
jsfiddle.net/c6h4e это ваша необходимая скрипка?   -  person Amarnath Balasubramanian    schedule 22.01.2014

Ответы (1)


arrow_upward
1
arrow_downward

Я действительно был не так далеко!

<style>
    .customSelect::selection      { background: rgba(175,210,255,0.5); }
    .customSelect::-moz-selection { background: rgba(175,210,255,0.5); }
</style>

Если вы не укажете свойство цвета css для цвета текста, у вас будет только фон синего цвета, а текст сохранит назначенный цвет (как я и искал!). Вы должны поместить класс customSelect в div contenteditable и в функцию editCSS().

<script type="text/javascript">

    function editCSS(css){
    document.execCommand('insertHTML', false, '<span class="customSelect" ' +
    'style="'+css+'">'+document.getSelection()+'</span>');
    }

</script>

HTML-код

<div class="customSelect" contenteditable>some text</div>
person pmrotule    schedule 22.01.2014