@progect[0].wysiwyg

автор: systemiv

/*
 *name: wysiwygEditor
 *author: systemIV
 *description: Редактор создаётся не для практического применения, а для изучения основ.
 *Разрабатывается под Chrome 14.0.8
*/
//Работу начинаем после загрузки страницы
window.onload = function(){
	//Создаём фрейм
	document.write('<iframe id="frame"></iframe><br />');
	//Получаем ссылку на фрейм
	var frame = document.getElementById('frame');
 
	//Получем ссылку на объект Window фрейма
	var frameWindow = frame.contentWindow;
	//Получаем ссылку на объект Document фрейма
	var frameDocument = frame.contentDocument;
 
	//Формируем простую html страничку
	var frameHtml = '<html>';
	frameHtml += '<head>';
	frameHtml += '<style>';
	frameHtml += ' ';
	frameHtml += '</style>';
	frameHtml += '</head>';
	frameHtml += '<body>';
	frameHtml += '</body>';
	frameHtml += '</html>';
 
	//Открывайм фрейм
	frameDocument.open();
	//Записываем в него созданую ранее разметку html
	frameDocument.write(frameHtml);
	//Закрываем фрейм
	frameDocument.close();
 
	//Включаем designMode
	frameDocument.designMode = 'on';
 
	//Функционал для Bold текста
	//Создаём ссылку
	document.write('<a href="#boldText" id="boldText">b</a>');
	//При клике на неё определяем функцию
	document.getElementById('boldText').onclick = function(event){
		//Курсор фокусирем на окно фрейма
		frameWindow.focus();
		//Придаём жирность тексту
		frameWindow.document.execCommand('bold', null, '');
		//Отменяем стандартное поведение ссылки
		event.preventDefault();
	}
 
	//Функция для создания курсива в тексте
	//Сделана по аналогии с предъидущей
	document.write('<a href="#italicText" id="italicText">i</a>');
	document.getElementById('italicText').onclick = function(event){
		frameWindow.focus();
		frameWindow.document.execCommand('italic', null, '');
		event.preventDefault();
	}
}

Полезные ссылки:

execCommand