grapesjs-preset-webpage：无法使用命名空间“Editor”作为类型

Question

我即将使用grapesjs预设网页，按照guide工作，并安装了插件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

但我收到以下错误

Answer 1

grapesjs-preset-webpage 不适用于 Angular/cli > 11，所以创建了我自己的。

Answer 2

这是建议的方法：https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.1

就我而言，我在

/node_modules/grapesjs-preset-webpage/dist/index.d.ts

更新了 index.d.ts 文件

第 36 行：

modalImportContent?: string | ((editor: **unknown**) => string);

第 59 行：

declare const plugin: **unknown**;