Как я могу использовать tinyMCE при редактировании столбца SlickGrid?

Question

Я хотел бы использовать tinyMCE с обычным Редактор Slick за пределами таблицы или внутри диалогового окна. Это просто, чтобы включить редактирование большого текста.

• Могу ли я использовать этот внешний плагин для пользовательского редактора Slick? Я не видел ни одного примера таких способов использования.
• Есть ли потенциальные проблемы с использованием этих двух плагинов в одно и то же время (например, вводящий конфликтный HTML-код или предотвращающий некоторые события сжигания)?

Answer 1

• Используйте JQuery псевдоним "jQuery_new" с совместимой версией

• Регистрация нового редактора "TinyMCEEditor" & Добавить его в slick.editors.js

• Используйте это так {id: «column2», имя: «Год», поле: «год», редактор: Slick.Editors.TinyMCE}

  jQuery_new.extend(true, window, { 
      "Slick": { 
      "Editors": { 
       (..) 
       "TinyMCE": TinyMCEEditor 
      } 
  }}); 
  
  function TinyMCEEditor(args) { 
  var $input, $wrapper; 
  var defaultValue; 
  var scope = this; 
  
  this.guid = function() { 
      function s4() { 
       return Math.floor((1 + Math.random()) * 0x10000) 
        .toString(16) 
        .substring(1); 
      } 
      return s4(); 
  }, 
  
  this.init = function() { 
      var $container = jQuery_new(".container"); 
      var textAreaIdString = 'rich-editor-'+guid(); 
  
      $wrapper = jQuery_new("<DIV ID='rds-wrapper'/>").appendTo($container); 
      $input = jQuery_new("<TEXTAREA id=" + textAreaIdString + "/>"); 
      $input.appendTo($wrapper); 
      jQuery_new("#" +textAreaIdString).val(args.item[args.column.field]); 
  
      var _this = this; 
      tinymce.init({ 
       selector: "#"+textAreaIdString, 
       forced_root_block : "", 
       plugins : "save image imagetools", 
       toolbar: 'undo redo | styleselect | bold italic | link image | save', 
       save_onsavecallback: function() { 
        jQuery_new("#" +textAreaIdString).val(this.getContent()); 
        _this.save(); 
       } 
      }); 
  
      $input.bind("keydown", this.handleKeyDown); 
      scope.position(args.position); 
      $input.focus().select(); 
  }; 
  
  this.handleKeyDown = function (e) { 
      if (e.which == jQuery_new.ui.keyCode.ENTER && e.ctrlKey) { 
       scope.save(); 
      } else if (e.which == jQuery_new.ui.keyCode.ESCAPE) { 
       e.preventDefault(); 
       scope.cancel(); 
      } else if (e.which == jQuery_new.ui.keyCode.TAB && e.shiftKey) { 
       e.preventDefault(); 
       args.grid.navigatePrev(); 
      } else if (e.which == jQuery_new.ui.keyCode.TAB) { 
       e.preventDefault(); 
       args.grid.navigateNext(); 
      } 
  }; 
  
  this.save = function() { 
      args.commitChanges(); 
  }; 
  
  this.cancel = function() { 
      $input.val(defaultValue); 
      args.cancelChanges(); 
  }; 
  
  this.hide = function() { 
      $wrapper.hide(); 
  }; 
  
  this.show = function() { 
      $wrapper.show(); 
  }; 
  
  this.position = function (position) { 
  }; 
  
  this.destroy = function() { 
      $wrapper.remove(); 
  }; 
  
  this.focus = function() { 
      $input.focus(); 
  }; 
  
  this.loadValue = function (item) { 
  
      $input.val(defaultValue = item[args.column.field]); 
      $input.select(); 
  }; 
  
  this.serializeValue = function() { 
      return $input.val(); 
  }; 
  
  this.applyValue = function (item, state) { 
      item[args.column.field] = state; 
  }; 
  
  this.isValueChanged = function() { 
      return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue); 
  }; 
  
  this.validate = function() { 
      return { 
       valid: true, 
       msg: null 
      }; 
  }; 
  
  this.init(); 
  }