Скрещиваем 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>

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

http://ajaxblog.ru/246