Handsontable,自定义文本编辑器,copy/paste 问题
Handsontable, custom text editor, copy/paste issue
我有一个包含两列的 table:名称和代码。我为代码列创建了一个简单的自定义编辑器。这个想法是,当用户双击单元格时,带有代码编辑器的自定义对话框打开。我已经实现了它并在此处发布了简化示例:
但是,copy/paste 功能有一个问题:如果我使用我的编辑器,为单元格编辑一些代码,按“保存”,"code" 列值似乎已正确保存.但是当我 select 这个单元格并按 Ctrl+C 时,值没有被复制。
问题是:这是 handson 中的错误吗table 还是我在实现自定义编辑器时错过了什么?我应该如何更改我的自定义编辑器以使复制粘贴功能正常工作。
编辑代码:
var ScriptEditor = Handsontable.editors.TextEditor.prototype.extend();
ScriptEditor.prototype.getValue = function () {
return this.TEXTAREA.value;
};
ScriptEditor.prototype.setValue = function (value) {
this.TEXTAREA.value = value;
};
ScriptEditor.prototype.open = function () {
var self = this;
this.instance.deselectCell();
var value = self.instance.getDataAtCell(self.row, self.col);
var decodedCode = decodeURI(value);
var success = function (resultCode) {
var encodedCode = encodeURI(resultCode);
self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
self.instance.selectCell(self.row, self.col);
};
openEditor(decodedCode)
.then(success);
};
ScriptEditor.prototype.focus = function () {
Handsontable.editors.TextEditor.prototype.focus.apply(this, arguments);
};
ScriptEditor.prototype.close = function () {
};
var openEditor = function (codeToEdit) {
var deferred = $q.defer();
var dialog = ngDialog.open({
template: 'editorTemplate.htm',
className: 'ngdialog-theme-default',
controllerAs: "editor",
controller: function () {
var vm = this;
vm.inputCode = codeToEdit;
vm.submitChanges = function () {
dialog.close();
deferred.resolve(vm.inputCode);
};
}
});
return deferred.promise;
};
规格:
Angular版本:1.6.1
汉森table版本:0.31.2
Chrome版本:版本58.0.3029.81
我已经在 handsontable github 存储库上发布了一个问题并在那里收到了答案。 Link 发布:here
解法:
正如 handsontable 团队的成员所建议的那样,在打开我的对话框之前的打开功能中,我调用 this.instance.deselectCell();
。但是,使用此解决方案,问题是,如果我按 Enter 我的代码编辑器对话框,不会插入新行,但会选择 handsontable 中的下一个单元格。然后,我将调用包装在 setTimeout()
中并且它起作用了。
Link 到 plunker:
here
工作代码是:
ScriptEditor.prototype.open = function () {
var self = this;
setTimeout(function () {
self.instance.deselectCell();
});
var value = self.instance.getDataAtCell(self.row, self.col);
var decodedCode = decodeURI(value);
var success = function (resultCode) {
var encodedCode = encodeURI(resultCode);
self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
self.instance.selectCell(self.row, self.col);
};
openEditor(decodedCode)
.then(success);
};
我有一个包含两列的 table:名称和代码。我为代码列创建了一个简单的自定义编辑器。这个想法是,当用户双击单元格时,带有代码编辑器的自定义对话框打开。我已经实现了它并在此处发布了简化示例:
但是,copy/paste 功能有一个问题:如果我使用我的编辑器,为单元格编辑一些代码,按“保存”,"code" 列值似乎已正确保存.但是当我 select 这个单元格并按 Ctrl+C 时,值没有被复制。
问题是:这是 handson 中的错误吗table 还是我在实现自定义编辑器时错过了什么?我应该如何更改我的自定义编辑器以使复制粘贴功能正常工作。
编辑代码:
var ScriptEditor = Handsontable.editors.TextEditor.prototype.extend();
ScriptEditor.prototype.getValue = function () {
return this.TEXTAREA.value;
};
ScriptEditor.prototype.setValue = function (value) {
this.TEXTAREA.value = value;
};
ScriptEditor.prototype.open = function () {
var self = this;
this.instance.deselectCell();
var value = self.instance.getDataAtCell(self.row, self.col);
var decodedCode = decodeURI(value);
var success = function (resultCode) {
var encodedCode = encodeURI(resultCode);
self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
self.instance.selectCell(self.row, self.col);
};
openEditor(decodedCode)
.then(success);
};
ScriptEditor.prototype.focus = function () {
Handsontable.editors.TextEditor.prototype.focus.apply(this, arguments);
};
ScriptEditor.prototype.close = function () {
};
var openEditor = function (codeToEdit) {
var deferred = $q.defer();
var dialog = ngDialog.open({
template: 'editorTemplate.htm',
className: 'ngdialog-theme-default',
controllerAs: "editor",
controller: function () {
var vm = this;
vm.inputCode = codeToEdit;
vm.submitChanges = function () {
dialog.close();
deferred.resolve(vm.inputCode);
};
}
});
return deferred.promise;
};
规格: Angular版本:1.6.1 汉森table版本:0.31.2 Chrome版本:版本58.0.3029.81
我已经在 handsontable github 存储库上发布了一个问题并在那里收到了答案。 Link 发布:here
解法:
正如 handsontable 团队的成员所建议的那样,在打开我的对话框之前的打开功能中,我调用 this.instance.deselectCell();
。但是,使用此解决方案,问题是,如果我按 Enter 我的代码编辑器对话框,不会插入新行,但会选择 handsontable 中的下一个单元格。然后,我将调用包装在 setTimeout()
中并且它起作用了。
Link 到 plunker: here
工作代码是:
ScriptEditor.prototype.open = function () {
var self = this;
setTimeout(function () {
self.instance.deselectCell();
});
var value = self.instance.getDataAtCell(self.row, self.col);
var decodedCode = decodeURI(value);
var success = function (resultCode) {
var encodedCode = encodeURI(resultCode);
self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
self.instance.selectCell(self.row, self.col);
};
openEditor(decodedCode)
.then(success);
};