Скрещиваем jqGrid и FCKeditor

Есть прекрасный программный продукт jqGrid. У него есть неплохой функционал по редактированию данных в таблице, вот только нет возможности редактировать текст через какой-либо визуальный редактор, например FCKeditor.

Почему FCKeditor?
Во первых он достаточно стабилен, во вторых его легко настроить под себя, и наверное самое главное у меня был опыт работы с ним.

Поиск в интернете ничего мне не дал, … значить придется все делать самому.

Все оказалось на удивление просто

<script type="text/javascript" src="/js/lib/fckeditor/fckeditor.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#news-list").jqGrid({
		...некоторый ваш код...
	}).navGrid('#news-pager',
		{refresh:true,add:true,edit:true,del:true,search:true},
		{
			// edit parameters
			width: 500,
			reloadAfterSubmit:true,
			beforeShowForm: function() {
				fckeditor('text');
			},
			onclickSubmit: function() {
				var oEditorText = FCKeditorAPI.GetInstance('text');
				return {
					text: oEditorText.GetHTML()
				};
			}
		},
		{
			// add parameters
			reloadAfterSubmit:true,
			beforeShowForm: function() {
				// Перед тем как показать форму, вставляем в элемент с id='text' наш редактор
				fckeditor('text');
			},
			onclickSubmit: function() {
				// Получаем введенный и отформатированный текст в редакторе
				var oEditorText = FCKeditorAPI.GetInstance('text');
				// Возвращаем его в виде html текста
				return {
					text: oEditorText.GetHTML()
				};
			}
		},
		{
			//delete parameters
		}
	);

	function fckeditor(id) {
		var oFCKeditor = new FCKeditor(id) ;
		oFCKeditor.ReplaceTextarea();
	}
});
</script>

<h1><?=_('Новости')?></h1>

<div class="grid">
	<table id="news-list" class="scroll"></table>
	<div id="news-pager" class="scroll"></div>
</div>

А вот так это выглядит в работе