Wiki source code of ContentEditable

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