HTML съдържание с възможност за редактиране с нередактируеми острови

Аз съм разработчик на CKEditor. Имаме известен опит с вложени елементи само за четене (т.е. плъгин placeholder и функцията, върху която работим в момента #9764) и нямам добри новини. Трябва да управлявате всяко поведение ръчно, ако искате да имате последователен вид и усещане. Няма трикове, които да оправят браузърите. И много неща (като това със странни неща, случващи се около въвеждане на GC) изглеждат неразрешими.

Още една идея, която изглежда обещаваща:

За да използвате празен интервал с ::before { content:"caption"; }, който трябва да създаде блок без възможност за редактиране, представен в DOM като възел без позиции на каретка вътре.

Можете да опитате тук http://jsfiddle.net/TwVzt/1/

Но този подход не е лишен от проблеми (в моя случай): Няма начин да декларирате ::before inline с помощта на style DOM атрибут и така целият набор трябва да бъде деклариран в 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 единичното щракване не направи нищо, двойното щракване избра нередактируемото, а с backspace стана малко луд! Изглеждаше, че ще отиде на предишната страница. С FF нещата бяха малко по-луди! Щракнете два пъти върху нередактируемото и редактируемото преди него! Нямам идея защо.

Ако някой може да разбере и да напише за проблемите с 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", но това ще предотврати влаченето на обекта. Отново вероятно ще трябва да разчитате на скрипт, който възстановява ширината и височината.