jQuery的JTable的所見即所得代替textarea的

Question

的我正在使用中，如果我們設置字段類型textarea的，它加載文本區域，而不是輸入編輯和創建表單jQuery的JTable中。

我要特別強調的textarea到所見即所得Edior。 我試過了，但沒有工作。 即使嘗試使用http://jtable.org/ApiReference#fopt-input但它不起作用。

請告訴我如何做到這一點。

Answer 1

您的要求。

Name: { 
    title: 'Name', 
    width: '20%', 
    input: function (data) { 
     if (data.record) { 
     return '<textarea cols="30" id="Name" name="Name" rows="5" wrap="hard">' + data.record.Name+ '</textarea>'; 
     } else { 
     return '<textarea cols="30" rows="5" wrap="hard" name="Name"/>'; 
      } 
     } 
    } 
} 

Answer 2

下載TinyMCE的（http://www.tinymce.com/）及相應的JS/CSS文件添加到您的項目。

這裏有您需要的JTable中的代碼：

$('#JTableContainer').jtable({ 
     title: 'My Table', 
     actions: { 
      listAction: '/MyAction/List', 
      createAction: '/MyAction/Add', 
      updateAction: '/MyAction/Edit', 
      deleteAction: '/MyAction/Delete' 
     }, 
     fields: { 
      TableID: { 
       key: true, 
       list: false 
      }, 
      MyTextArea: { 
       title: 'Fill out this form', 
       type: 'textarea' 
      }, 
     }, 
     formCreated: function (event, data) { 
      tinymce.init({ 
       selector: 'textarea', 
       theme: 'modern', 
       toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link unlink | cut copy paste | forecolor backcolor', 
       menubar: false, 
       statusbar: false 
      }); 
     } 
    }); 

    $('#JTableContainer').jtable('load'); 

Answer 3

測試後，似乎this solution修復與TinyMCE的不保存到textarea的問題（原因 - 的JTable內提交事件過載）。另外，當jTable關閉並重新打開編輯窗格時，this solution將卸載並重新加載TinyMCE。

把它們放在一起 - 這爲我工作：

formCreated: function (event, data) { 

    tinymce.init({ 
     selector: 'textarea', 
     setup: function (editor) { 
      editor.on('change', function() { 
       editor.save(); 
      }); 
     } 
    }); 

    for (var editor_id in tinyMCE.editors) { 
     tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1'); 
     tinymce.EditorManager.execCommand('mceAddControl', true, editor_id); 
     tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id); 
    } 

}, 
formClosed: function (event, data) { 

    for (var editor_id in tinyMCE.editors) { 
     tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1'); 
     tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id); 
     tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id); 
    } 

}