grapesjs实现自定义组件父子组件css样式示例代码-html代码-BFW代码库

grapesjs实现自定义组件父子组件css样式示例代码

代码语言：html

所属分类：其他

代码描述：grapesjs实现自定义组件父子组件css样式示例代码，通过editor.DomComponents.addType来自定义组件，通过blockManager添加到组件库中。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <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-->


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



</head>

<body>

<div id="gjs">


</div>

    <script>


const hrefNextTrait = editor => {
    
    
    editor.DomComponents.addType('cmp-a', {
  model: {
    defaults: {
      
      attributes: { class: 'cmp-css-a' },
      components: 'Component A',
      styles: `
        .cmp-css-a { color: green }
        @media (max-width: 992px) {
          .cmp-css-a { color: darkgreen }
        }
      `,
    }
  },
});
editor.DomComponents.addType('cmp-b', {
  model: {
    defaults: {
      attributes: { class: 'cmp-css-b' },
      components: 'Component B',
      styles: `
        .cmp-css-b { color: blue }
        @media (max-width: 992px) {
.........完整代码请登录后点击上方下载按钮下载查看