grapesjs-preset-webpage:无法使用命名空间“编辑器”作为类型

grapesjs-preset-webpage: Cannot use namespace 'Editor' as a type

提问人:sanjai 提问时间:7/12/2023 最后编辑:sanjai 更新时间:7/18/2023 访问量:97

问:

我即将使用 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

但我收到以下错误enter image description here

Angular TypeScript 电子邮件模板 grapesjs

评论


答:

0赞 sanjai 7/18/2023 #1

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

评论

0赞 Community 7/21/2023
您的答案可以通过额外的支持信息得到改进。请编辑以添加更多详细信息,例如引文或文档,以便其他人可以确认您的答案是正确的。您可以在帮助中心找到有关如何写出好答案的更多信息。