提问人:sanjai 提问时间:7/12/2023 最后编辑:sanjai 更新时间:7/18/2023 访问量:97
grapesjs-preset-webpage:无法使用命名空间“编辑器”作为类型
grapesjs-preset-webpage: Cannot use namespace 'Editor' as a type
问:
我即将使用 GrapesJS 预设网页,按照指南工作,并安装了插件 grapesjs-preset-webpage 并在 angular.json 文件中添加了样式和脚本,没有插件代码在基础块和面板上工作正常,当使用预设网页插件时,它会抛出错误(附上图像)& “@angular/cli”: “~15.0.4”,。
web-builder.component.ts:
import { Component, OnInit } from '@angular/core';
import grapesjs from 'grapesjs';
import 'grapesjs-preset-webpage';
@Component({
selector: 'app-web-builder',
templateUrl: './web-builder.component.html',
styleUrls: ['./web-builder.component.scss']
})
export class WebBuilderComponent implements OnInit {
private _editor: any;
get editor(){
return this._editor;
}
ngOnInit(): void {
this._editor = this.initializeEditor();
this.editor.on('asset:add', () => {
console.log('Asset add fired');
// this.editor.runCommand('open-assets');
});
}
initializeEditor(){
console.dir(window);
return grapesjs.init({
container: '#gjs',
autorender: true,
forceClass: false,
components: '',
style: '',
plugins: ['gjs-preset-webpage'],
pluginsOpts: {
'gjs-preset-webpage': {
navbarOpts: false,
countdownOpts: false,
formsOpts: false,
blocksBasicOpts: {
blocks: ['link-block', 'quote', 'image', 'video', 'text', 'column1', 'column2', 'column3'],
flexGrid: false,
stylePrefix: 'lala-'
}
}
},
assetManager: {
uploadText: 'Add image through link or upload image',
modalTitle: 'Select Image',
openAssetsOnDrop: 1,
inputPlaceholder: 'http://url/to/the/image.jpg',
addBtnText: 'Add image',
uploadFile: (e: any) => {
const file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
},
handleAdd: (textFromInput: any) => {
this.editor.AssetManager.add(textFromInput);
}
},
canvas: {
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'
],
scripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js']
}
});
}
}
web-builder.component.html:
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="gjs">
</div>
</div>
</div>
</div>
我做了npm install grapesjs-preset-webpage
答:
评论