grapesjs自定义组件事件监听示例代码-html代码-BFW代码库

grapesjs自定义组件事件监听示例代码

代码语言：html

所属分类：其他

代码描述：grapesjs自定义组件事件监听示例代码，包含了全局事件监听和组件内部事件监听。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapesjs-preset-webpage.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapes.min.js"></script>

    <!--引入grapesjs-preset-webpage-->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/grapes.min.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/grapesjs-preset-webpage.min.js"></script>

    <style>
        body,
        html {
            height: 100%;
            margin: 0;
        }
    </style>



</head>

<body>

  <div id="gjs">
    <h1>Hello World Component!</h1>
  </div>


    <script>
    const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  height: '100%',
  width: 'auto',
  plugins: ['gjs-preset-webpage'],
  storageManager: false,
  blockManager: {
    blocks: [
     
    ],
  }
});


editor.DomComponents.addType('test-component', {
  model: {
    defaults: {
      testprop: 1,
    },
    init() {
      console.log('Local hook: model.init');
      this.listenTo(this, 'change:testprop', this.han.........完整代码请登录后点击上方下载按钮下载查看