Редактируемый HTML-контент с нередактируемыми островками

Я разработчик CKEditor. У нас есть некоторый опыт работы с вложенными элементами только для чтения (например, плагин placeholder и функция, над которой мы сейчас работаем #9764), и у меня нет хороших новостей. Вы должны обрабатывать каждое поведение вручную, если хотите иметь согласованный внешний вид. Нет никаких трюков, которые исправят браузеры. И многие вещи (например, странные вещи, происходящие вокруг ввода на GC) кажутся неразрешимыми.

Еще одна идея, которая выглядит многообещающе:

Чтобы использовать пустой диапазон с ::before { content:"caption"; }, это должно создать нередактируемый блок, представленный в DOM как узел, внутри которого нет позиций каретки.

Вы можете попробовать это здесь http://jsfiddle.net/TwVzt/1/

Но этот подход не свободен от проблем (в моем случае): невозможно объявить ::before встроенным с помощью DOM-атрибута style, поэтому весь набор должен быть объявлен в CSS заранее. Но набор кодов слияния, который у меня есть, довольно велик, и в некоторых случаях он даже неизвестен заранее. Вздох.

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

Я знаю, что это старая тема, с которой я столкнулся с похожей проблемой. Просто нужно несколько не редактируемых диапазонов в редактируемом div. Закончилось внедрением HACK-AROUND, например...

$('#testDiv').on('keydown', function(e) { 
    var targetNode = getSelectionStart();
    if(targetNode != undefined && targetNode.nodeType === 1 && targetNode.nodeName == 'SPAN')    
    {
      var nodeHtmlString = targetNode.outerHTML;

      if(~nodeHtmlString.indexOf("nonEditable"))
      {
        e.preventDefault();
        e.stopPropagation();
      }
    }
});

function getSelectionStart() {
 var node = document.getSelection().anchorNode;
 return (node.nodeType == 3 ? node.parentNode : node);
}

Полная скрипта на https://jsfiddle.net/fxmb3nL6/20/

Решение ниже -- с небольшой оговоркой. Но сначала -- вы, ребята, потрясающие!
Я не специалист по JS или HTML, но я также не знал о jsfiddle.net. Итак, читая ваши комментарии, а также другие поисковые запросы в Интернете и некоторые тесты на jsfiddle, я создал следующий код, который работал.

<pre><code>
<div contenteditable="false" class="editor" readonly="true" UNSELECTABLE="ON">
    Sample template with <span class="mergecode test1" />.
    <span contenteditable> editable </span>
    <font color=red><span UNSELECTABLE="ON" contenteditable="false" readonly="true"
     UNSELECTABLE="ON">  uneditable1 </span></font>
    <span contenteditable> editable2 </span>
    <font color=red><span contenteditable=false readonly="true" UNSELECTABLE="ON"> uneditable3</span></font>  
    <span contenteditable> editable4 </span>
    <span contenteditable="false" readonly="true" UNSELECTABLE="ON"> uneditable5 </span>
< /div>
</code></pre>

Если вы поместите это в jsfiddle в chrome, вы увидите, что он работает в chrome (и IE и FF, но немного по-другому), но, похоже, есть небольшое предостережение.

Предостережение заключается в том, что ваша привязка клавиш делает с Backspace! В моем случае, когда я выбираю нередактируемую фразу и нажимаю клавишу Backspace в Chrome, она как будто обновляется или делает «переход на последнюю страницу»! Я сделал первые два нередактируемых элемента красными (последний оставил черным), чтобы вы могли видеть, что происходит. Я тестирую его на jsfiddle в Chrome, в FF и в IE. Все, кажется, действовало правильно, плюс-минус проблема возврата.

И я думаю, что вот логика того, как это работает. Первый Div является родительским элементом верхнего уровня, и он имеет значение contenteditable="false". Так что все под ним должно быть нередактируемым. ЗА ИСКЛЮЧЕНИЕМ дочерних элементов внутри него, у которых есть span contenteditble="true", они становятся редактируемыми. Таким образом, вы наследуете от своего родителя, но потом можете перезаписать как дочерний.

Я также поставил теги readonly="true" UNSELECTABLE="ON", потому что где-то читал о них. И потребовалось больше испытаний!!! ОБРАТИТЕ ВНИМАНИЕ, ПОЖАЛУЙСТА, мне пришлось взять Font... за пределы диапазона, иначе это не сработало бы. Но в IE все работало отлично. Нередактируемые элементы были того цвета, который я им указал, и никакие одиночные, двойные или тройные щелчки не могли выбрать нередактируемые элементы в jsfiddle!!! :-) Для Chrome один щелчок ничего не делал, двойной щелчок выделял нередактируемое, а с возвратом на задний план он немного сошел с ума! Казалось, что пойдет на предыдущую страницу. С ФФ дела обстояли чуть похуже! Двойным щелчком выбрано нередактируемое и редактируемое перед ним! Не знаю, почему.

Если кто-то может выяснить и написать о проблемах с Chrome и FF, это было бы здорово. Было бы неплохо иметь двойной щелчок или любое количество быстрых кликов, чтобы они не работали в Chrome и FF. Опять же, я хочу подчеркнуть диапазон... кажется, он должен быть рядом с нередактируемыми элементами и шрифтом... за пределами диапазона.

Надеюсь, все это имеет смысл.

Вот решение, которое я использую в проекте:

<div>
  <span contenteditable>Editable text</span> <span> - Non editable text</span>
</div>

С соответствующим CSS, чтобы увидеть результат:

div {
  border: 1px solid black;
  display: inline-block;
  max-width: 200px;
}

Вот результат: http://www.cssdesk.com/rULJM

Для IE попробуйте следующее:

<span contenteditable="true">Uneditable</span>

Обратите внимание на обратное значение атрибута contenteditable! Это противоречит здравому смыслу, но работает — по крайней мере, в IE8 и IE9. Этот нередактируемый элемент можно перемещать и копировать/вставлять. Однако он далек от совершенства. Например. если выделить жирным шрифтом область, охватывающую нередактируемый элемент, это также заразит содержимое нередактируемого элемента. Поэтому вам, вероятно, придется использовать некоторые сценарии, чтобы сохранить работоспособность элемента. Также установка contenteditable="true" украсит нередактируемый элемент маркерами изменения размера. Вы можете снова отключить их, установив unselectable="on", но это предотвратит перетаскивание объекта. Опять же, вам, вероятно, придется полагаться на скрипт, восстанавливающий ширину и высоту.