WEB-нотатки - записник он-лайнПростенький WYSIWYG редактор на JavaScript.
Код WYSIWYG редактора:
Code <button style="width: 100%;" onClick="command('html')">Переключить режим редактирования</button> <form name="form" method="post" action="" onSubmit="saved(); return false;"> <textarea name="text" id="edithtml" style="width: 100%; height: 350px; display: block; background-color: #FFFFFF;">контент</textarea> <iframe name="edit" id="edit" style="width: 100%; height: 350px; display: none;"></iframe> <div id="panel" style="display: none;"> <a href="#" onClick="command('bold'); return false;" />B</a> | <a href="#" onClick="command('italic'); return false;" />I</a> | <a href="#" onClick="command('underline'); return false;" />U</a> | <a href="#" onClick="command('', 'h1'); return false;" />H1</a> | <a href="#" onClick="command('', 'h2'); return false;" />h2</a> | <a href="#" onClick="command('', 'h3'); return false;" />H3</a> | <a href="#" onClick="command('', 'h4'); return false;" />H4</a> | <a href="#" onClick="command('link'); return false;" />A</a> | <a href="#" onClick="command('justifyleft'); return false;" />Left</a> | <a href="#" onClick="command('justifycenter'); return false;" />Center</a> | <a href="#" onClick="command('justifyright'); return false;" />Right</a> | <a href="#" onClick="command('insertunorderedlist'); return false;" />L</a> | <a href="#" onClick="command('insertorderedlist'); return false;" />L2</a> | <a href="#" onClick="command('image'); return false;" />Img</a> | <a href="#" onClick="command('removeformat'); return false;" />Remove</a> | </div> <center> <input type="submit" name="save" value="Сохранить" /> <input type="submit" name="delete" value="Удалить" style="background-color: red;" onclick="if(confirm('Удалить?') == true) return true; else return false;" /></center> </form> <script language="javascript"> function saved() { if(document.getElementById('edithtml').style.display == 'none') document.getElementById("edithtml").value = iframe.document.body.innerHTML; document.form.submit(); return false; } function command(c, b) { iframe.focus(); if(c == 'link') { if(iframe.document.selection.createRange().text == false) alert('Выделите текст!'); else { url = prompt('Введите URL:', 'http://'); iframe.document.execCommand('createlink', false, url); } } if(c == 'image') { url = prompt('Введите URL изображения:', ''); iframe.document.execCommand('insertimage', false, url); } else if(c == 'html') { if(document.getElementById('edithtml').style.display == 'none') { document.getElementById('edithtml').style.display = 'block'; document.getElementById('panel').style.display = 'none'; document.getElementById('edit').style.display = 'none'; document.getElementById('edithtml').value = iframe.document.body.innerHTML; } else { document.getElementById('edithtml').style.display = 'none'; document.getElementById('panel').style.display = 'block'; document.getElementById('edit').style.display = 'block'; iframe.document.body.innerHTML = document.getElementById('edithtml').value; } } else if(b) { if(iframe.document.selection.createRange().text == false) alert('Выделите текст!'); else { iframe.document.execCommand('formatblock', false, '<'+b+'>'); } } else { iframe.document.execCommand(c, null, false); } } var iframe = document.getElementById('edit').contentWindow; iframe.document.designMode = 'on'; iframe.focus(); </script>
|
ПошукДрузі сайту |