readonly contenteditable demo

readonly contenteditable demo

by ian_smithz

HTML

<div style="width: 300px; height: 200px; border: 1px solid gray" contenteditable="true" id="editablediv">abc
    &lt;div id=&quot;abc&quto;&gt;abc&#39;&amp;&lt;/div&gt;
    <br />def
    <br />ghi <span style="color:red">AAAAAA</span>
aa</div>
<input type="button" name="copyAsText" value="copy content as text"><br>
<input type="button" name="copyAsHtml" value="copy content as html"><br>
<textarea name="t1" rows="20" cols="30"></textarea>

JavaScript

$("#editablediv").keydown(function (event) {
    if (event.ctrlKey) {
        // allow Ctrl-A, Ctrl-(any arrow key) combinations
        return true;
    }
    // keycode: http://www.programming-magic.com/file/20080205232140/keycode_table.html
    if (33 <= event.keyCode && event.keyCode <= 40) {
        return true;
    }
    return false;
});
$('input:button[name="copyAsText"]').click(function(){
    $(':input[name="t1"]').text($('#editablediv').text());
});
$('input:button[name="copyAsHtml"]').click(function(){
    $(':input[name="t1"]').text($('#editablediv').html());
});