Wiki source code of ContentEditable

Version 13.1 by mflorea on 2010/07/06 18:19
Show last authors
1 {{html clean="false"}}
2 <style type="text/css">
3 span.readOnly-selected::selection {
4 background: #AAA;
5 }
6 span.readOnly-selected::-moz-selection {
7 background: #AAA;
8 }
9 span.readOnly {
10 border: 1px dashed #777;
11 padding: 3px;
12 }
13 </style>
14 <script type="text/javascript">
15 function onAction(hook){
16 var iframe = document.createElement('iframe');
17 iframe.style.border = '1px solid black';
18 iframe.addEventListener('load', function() {
19 iframe.contentWindow.document.body.innerHTML = '<p>before<span contentEditable="false" class="readOnly" onclick="this.className=\'readOnly readOnly-selected\'">text</span>after</p>';
20 //iframe.contentWindow.document.designMode = 'on';
21 iframe.contentWindow.document.body.contentEditable = true;
22 iframe.focus();
23 }, false);
24 hook.parentNode.insertBefore(iframe, hook);
25 }
26 </script>
27 <button onclick="onAction(this)">Action</button>
28 {{/html}}