In this example we demonstrate how we can integrate a HTML editor in jqGrid form editiing module.

For this purpose we create a custom element in the form and use a custom function to get and set the value in the server.

The only what you need to know for the editor is how the value can be get and how can be updated when a new data comes from the grid.
require_once '../../../../php/demo/tabs.php';
<!DOCTYPE html>
    <title>jqGrid PHP Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/ui.multiselect.css" />
    <style type="text">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
    <script src="../../../../js/tinymce/tinymce.min.js" type="text/javascript"></script>
    <script src="../../../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
         <script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">         
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    $.jgrid.defaults.width = "700";
    <script src="../../../../js/jquery-ui.min.js" type="text/javascript"></script>

          <?php require_once("grid.php");?>
      <?php tabs(array("grid.php"));?>
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/jqGridPdo.php";
// Connection to the server
// Tell the db that we use utf-8
$conn->query("SET NAMES 'utf8'");

// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand 'SELECT OrderID, CustomerID, Freight, OrderDate, ShipCity, ShipAddress FROM orders';
// set the ouput format to json
$grid->table 'orders';
$grid->dataType 'json';
// Let the grid create the model
// Set the url from where we obtain the data
// Set some grid options
// Change some property of the field(s)
$grid->setColProperty("OrderDate", array(
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
$grid->setSelect('CustomerID'"SELECT CustomerID, CompanyName FROM customers");
// Enable toolbar searching

$custelm =<<<CUSTELM
function( value, options) {
    var elm = $('<textarea></textarea>');
    elm.val( value );
    // give the editor time to initialize
    setTimeout( function() {
        tinymce.init({selector: "textarea#ShipAddress"});
    }, 100);
    return elm;

$custval =<<<CUSTVAL
function( element, oper, gridval) {
    if(oper === 'get') {
        return tinymce.get('ShipAddress').getContent({format: 'row'});
    } else if( oper === 'set') {
        if(tinymce.get('ShipAddress')) {
            tinymce.get('ShipAddress').setContent( gridval );

$grid->setColProperty("ShipAddress", array(

$grid->navigator true;
$grid->setNavOptions('navigator', array("del"=>false,"excel"=>false,"search"=>false,"refresh"=>false));
$grid->setNavOptions('edit', array("modal"=>false,"recreateForm"=>true"height"=>'auto',"dataheight"=>"auto""width"=>500));
$grid->setNavOptions('add', array("modal"=>false,"recreateForm"=>true,"height"=>'auto',"dataheight"=>"auto""width"=>500));
// Enjoy
$conn null;