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>

Категорія: JavaScript · Додав: mr_smith (11.07.2010)
Переглядів: 799 · Рейтинг: 5.0/2
Всього коментарів: 0
Додавати коментарі можуть лише зареєстровані користувачі.
[ Реєстрація | Вхід ]

Пошук

Категорії

 
© pya.at.ua 2009 - 2025
Хостинг від uCoz