contenteditable = true

uneditable regions within editable

by phsiao2000

HTML

<h1>Document contents below</h1>
<h2>Source view</h2>
<h3>semantic editing mode active</h3>


<div class='doc'>
    <div class='tag lvl0'>SUMMARY</div>
<div contenteditable="true" class="editable lvl1">The latest Saint Mark's acquisition</div>
    <div class="tag lvl0">BODY</div>
        <div contenteditable="true" class="editable lvl1">William Blake's Collected Poems and such.</div>

    <div class='tag lvl1'>TITLE</div>
    <div contenteditable="true" class="editable lvl2 title_styled">William Blake's Collected Poems</div>
    <div class="tag lvl1">LEDE</div>
    <div contenteditable="true" class="editable lvl2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus magna, tincidunt ut fermentum vitae, vestibulum sit amet nisl.
        <div contenteditable="false" class='inline-group'>
            <div contenteditable="false" class='tag lvl3 inline-tag'>AUTHOR</div>
            <div contenteditable='false' class="editable  inline">Mags Galore</div>
        </div>Aliquam aliquet pellentesque sapien, id venenatis dolor egestas sed. Vestibulum a urna lorem. Donec sit amet aliquet ipsum. Nam iaculis placerat nisl, in pharetra metus scelerisque ullamcorper. Ut bibendum, tellus vel fringilla condimentum, neque eros tincidunt odio, quis bibendum odi</div>
    <div class="tag lvl2">QUOTABLE</div>
    <div contenteditable="false" class="editable lvl3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lectus magna, tincidunt ut fermentum vitae, vestibulum sit amet nisl. 
        <span contenteditable="true" class='inline-group'><div contenteditable="false" class='tag lvl3 inline-tag'>AUTHOR</div><div contenteditable="true" class="editable  inline">Mags Galore</div></span> where's my space? aliquet pellentesque sapien, id venenatis dolor egestas sed. Vestibulum a urna lorem. Donec sit amet aliquet ipsum. Nam iaculis placerat nisl, in pharetra metus scelerisque ullamcorper. Ut bibendum, tellus vel fringilla condimentum, neque eros...

CSS

body {
    font-size: 16px;
}
h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1em; font-feature-settings: 'smcp'; font-weight:bold; }
.doc {
    background-color:lightblue;
    padding: 2em;
}
div { width: auto%;
    margin-right: 0em;
    padding-top:.5rem;
}
.editable {
    background-color:#DDD;
    margin-left:5px;
}
div span {
    background-color:#FFF;
}
*[contenteditable=false] {
    background-color:yellow;
}
.tag {
    background-color:lightsalmon;
    border: 1px solid lightsalmon;
    border-radius:3px;
    width:auto;
    margin: 5px;
    text-transform: uppercase;
    display:inline-block;
    padding: 0 3px 0 3px;
}
.lvl0 {
    margin-left:0em;
}
.lvl1 {
    margin-left:1rem;
}
.lvl2 {
    margin-left:2rem;
}
.lvl3 {
    margin-left:3rem;
}
.lvl4 {
    margin-left:4rem;
}
.inline {
    display:inline;
    padding:0;
}
.inline-tag, .inline-group, group {
    display:inline;
    border: 1px solid blue;
    border-radius: 3px;
    margin:0px;
    padding: 0;
}
.outlined {
    border: 1px solid blue;
    border-radius:3px;
}
.auth_tag::before {
    content: attr(data-tag_name);
    background-color: lightsalmon;
    font-weight:normal;
    font-family:courier;
    padding: 0 3px 0 3px;
}
.title_styled {
    font-size: 25px;
    font-family: "neutraface 2 Text";
    font-weight: normal;
    text-transform: uppercase;
}