2012-05-28 5 views
1

У меня есть iFrame с включенным режимом разработки. В документе у меня есть несколько «специальных» элементов, которые могут быть вставлены пользователем через выбор меню (пользовательские символы/идентификаторы/описания, используемые в более широком приложении, которые исправлены). Мне нужно защитить эти элементы html от модификации и рассматривать их как единый объект, если пользователь выбирает их выбирать или удалять. Пример IFrame будет выглядеть следующим образом:Как защитить элемент HTML в designmode = на

<iframe> 
    <html dir="ltr"> 
     <head></head> 
     <body class="editableDoc"> 
      <p>Here is a <span class="special readonly">SPECIAL</span> character</p> 
     </body> 
    </html> 
</iframe> 

режим Design позволяет редактировать содержимое всего тела, которое именно так, как мне это нужно.

Что было бы лучшим способом защитить «только для чтения»? Лучшее описание, которое я могу дать, это то, что я хочу, чтобы диапазон и его содержимое обрабатывались так, как если бы это был единственный символ для всех пользовательских текстовых операций (т. Е. Перемещение курсора, выбор, удаление). Я попытался установить contenteditable = "false" в элементе span, и у этого есть много желаемых эффектов, но он плохо работает в IE8/9 и имеет другие, более мелкие проблемы в других браузерах. Плюс я не уверен, что смешение designmode и contenteditable в том же решении - хорошая идея.

ответ

2

Используйте значение свойства user-modify CSS read-only для защиты пролетом в Firefox и Chrome:

<iframe src="about:blank" srcdoc="<body contenteditable><span style='-webkit-user-modify: read-only; -moz-user-modify: read-only;'>Hi</span></body>"> 
</iframe> 
2

Вы можете использовать contentEditable=false так:

<body contenteditable> 
    <p>Here is a <span contenteditable='false'>SPECIAL</span> character</p> 
</body> 

Это работает ли это в IFRAME или нет. Он работает в Chrome и Firefox - вероятно, работает и в последних IE, учитывая, что он не префикс.

Demo по адресу: http://codepen.io/bfred-it/pen/bGhaC

Аналогичный вопрос здесь: contenteditable=false inside contenteditable=true block is still editable in IE8