我试图在我的Apostrophe项目中添加一个新的模式类型。实际上,我试图使用Fabric.js添加一个图像设计器,作为部件编辑器模式的一部分。我有一个片段类型,它将Fabric.js生成的JSON存储为一个字段,并希望编辑器在编辑片段本身时代替字段(或字段)。
我已经完成了部分工作(遵循https://docs.apostrophecms.org/howtos/custom-schema-field-types.html的指南)。然而,我遇到了一个问题。在页面上呈现实际的字段集之前,似乎会调用addFieldType的填充方法。这通常是可以的,因为大多数字段都有在呈现时应用于它们的基本逻辑(如果有的话),但是在这种情况下,Fabric.js似乎要求画布元素出现在页面上,否则它无法正确地连接到它,并且无法加载。
我在第80行的https://github.com/apostrophecms/apostrophe/blob/b22af9320169bf3af26cd17642373ae1e331a990/lib/modules/apostrophe-schemas/public/js/user.js中注意到,这似乎意味着有一种方法可以在自定义字段类型中覆盖afterPopulate。我似乎无法让它起作用--我尝试过类似地将它添加到填充(见下面),但它从未被调用(这在同一文件的第44行中是有意义的,因为在fieldType上被调用的唯一东西就是填充)。
是否有一种从自定义字段类型重写afterPopulate的方法,或者是否有其他方法来处理这个问题?现在,我基本上是在初始化Fabric之前在填充中添加了一个500‘m的超时,这是可行的,但是看起来非常麻烦。下面是我到目前为止添加的代码:
apos.define('fabric-editor', {
afterConstruct: function(self) {
self.addFieldType();
},
construct: function(self, options) {
self.addFieldType = function() {
apos.schemas.addFieldType({
name: 'fabric-editor',
afterPopulate: self.afterPopulate,
populate: self.populate,
convert: self.convert
});
};
self.afterPopulate = function($el, schema, object, callback) {
callback();
}
self.populate = function(object, name, $field, $el, field, callback) {
var $fieldset = apos.schemas.findFieldset($el, name);
callback();
setTimeout(function () {
var canvas = $fieldset.find('#fabric-canvas');
if (canvas.length > 0) {
self.fabricCanvas = new fabric.Canvas(canvas[0]);
}
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.cornerColor = 'blue';
fabric.Object.prototype.cornerStyle = 'circle';
self.addRectangle();
}, 500)
};
self.addRectangle = function (ev) {
var rect = new fabric.Rect({
left: 10,
top: 10,
fill: 'red',
width: 100,
height: 100
});
self.fabricCanvas.add(rect).renderAll().setActiveObject(rect);
}
}});
发布于 2021-03-31 21:38:31
self.afterPopulate属于apostrophe-schemas模块,因此您需要在项目级别的lib/modules/apostrophe-schemas/public/js/user.js文件中覆盖它。
但是,我不认为字段的populate函数是在字段出现在页面上之前调用的,因为它将表单元素作为参数传递进来。
https://stackoverflow.com/questions/66829505
复制相似问题