all blocks now contenteditable

codex-editor.js

@@ -485,6 +485,9 @@ cEditor.content = {
         */
         var nodeCreated = cEditor.draw.block(newBlockTagname, targetBlock.innerHTML);
 
+        /** Mark node as redactor block*/
+        nodeCreated.classList.add('ce_block');
+
         /**
           * Get caret position before we change block
         */
@@ -759,6 +762,11 @@ cEditor.parser = {
 
                 if ( cEditor.core.isDomNode(block) ) {
 
+                    block.contentEditable = "true";
+
+                    /** Mark node as redactor block*/
+                    block.classList.add('ce_block');
+
                     /** Append block to the redactor */
                     cEditor.nodes.redactor.appendChild(block);
 
@@ -864,7 +872,6 @@ cEditor.draw = {
         var redactor = document.createElement('div');
 
         redactor.className += 'ce_redactor';
-        redactor.contentEditable = true;
 
         return redactor;
 

editor.css

@@ -78,6 +78,8 @@
 .ce_redactor {
     position: relative;
     outline: none;
+    background: #FCFCFC;
+    padding: 1px 0;
 }
 
 .ce_toolbar{
@@ -124,12 +126,17 @@
 
 
 /** Typography styles */
+
 .ce_redactor p{
     padding: 5px 0;
     font-size: 1em;
     line-height: 1.7em;
     margin: 0;
 }
+.ce_redactor ul,
+.ce_redactor ol{
+    list-style-position: inside;
+}
 .ce_redactor li{
     margin: 5px 0;
 }
@@ -146,6 +153,15 @@
     margin: 1em 0;
 }
 
+
+.ce_redactor .ce_block{
+    padding: 10px;
+    margin: 5px;
+    border: 1px dotted #ccc;
+    background: #fff;
+}
+
+
 @-webkit-keyframes bounceIn {
     0% { opacity: 0; -webkit-transform: scale(.3);}
     50% {opacity: 1; -webkit-transform: scale(1.05);}