Наипростейший WYSIWYG редактор
Опубликовано 8 января, 2009 в JavaScriptНедавно для простого движка понадобилось написать простенький WYSIWYG редактор, так как разные громоздкие tinyMCE не подходили из-за своих габаритов (сам движок весит в 10 раз меньше). И вот, что получилось. Выкладываю, опять же, чтобы не потерять никуда этот кусок кода.
<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 src="#" 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>
Можно поиграться с этим WYSIWYG редактором вот тут: wysiwyg
Комментариев: 5. Обязательно оставьте свой!
Спасибо!
Как раз то, что надо, чтобы разобраться в теме.
Спасибо, пишу свой форум. то что нужно, супер.
Вроде элементы с не работают
H1 H2 и т.д. не работают
Все работает в IE
В опере может не работать.
Спасибо автору за статью.
Единственное – не пашет очистка формата тегов h1-h4 и list-ов