CKEditor

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div contenteditable=true>
    <div id="e1" contenteditable="true">john</div><div  id="e2"  contenteditable="true" id="pin">9696969696</div>
</div>
    
<p>place cursor at before first charecter in contact. i need to change contact as (+91)969696969696 its working fine with all browsers except <b>chrome</b></p>

CSS

#e1,#e2{
display:inline-block;
}

#e1{color:Blue;}#e2{color:green;}
#e1:before{
content:'Name:\00a0';
    display:inline-block;
     background-color:lightgray;
    color:gray;
}
#e1:after{
content:';\00a0';
}
#e2:before{
content:'Contact:\00a0';
    display:inline-block;
     background-color:lightgray;
    color:gray;
}
#e2:after{
content:';';
}
#e1:focus,#e2:focus{
border:1px solid blue;
    display:inline-block;
}

JavaScript

CKEDITOR.disableAutoInline = true;
function ckeinline(editorname){
    CKEDITOR.inline(document.getElementById(editorname), {
    toolbar: [
        ['Bold', 'Italic', 'Underline', '-', 'Strike', 'Subscript', 'Superscript'],
        ['Symbols']
    ],
});
}
ckeinline('e1');
ckeinline('e2');