GrapesJS Style Bg

grapesjs-style-bg.markdown

GrapesJS Style Bg

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<link href="https://unpkg.com/grapick/dist/grapick.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-parser-postcss"></script>
<script src="https://unpkg.com/grapesjs-style-bg"></script>
<style>
  body,
  html {
    height: 100%;
    margin: 0;
  }
</style>

<div id="gjs" style="height:0px; overflow:hidden">
  <div class="test-bg-props" data-gjs-stylable='["color", "background"]'>
    <div style="margin:100px 100px 25px; padding:25px; font:caption">
      GrapesJS Style Bg plugin
    </div>
  </div>
  <style>
    .test-bg-props {
      padding:25px;
      color: white;
      text-align: center;
      min-height: 500px;
      background-repeat:repeat, repeat, no-repeat;
      background-position:left top, left top, center center;
      background-attachment:scroll, scroll, scroll;
      background-size:auto, auto, auto;
      background-image:linear-gradient(90deg, #bf4f4f 20%, rgba(142,235,15,0.17) 90%), linear-gradient(rgba(181,61,61,0.2) 0%,rgba(181,61,61,0.2) 100%), url('https://via.placeholder.com/350x250/78c5d6/fff/image1.jpg');
    }
  </style>
</div>

script.js

const editor = grapesjs.init({
  height: '100%',
  container: '#gjs',
  showOffsets: true,
  fromElement: true,
  noticeOnUnload: false,
  storageManager: false,
  assetManager: {
    assets: [
      'https://via.placeholder.com/350x250/78c5d6/fff/image1.jpg',
      'https://via.placeholder.com/350x250/459ba8/fff/image2.jpg',
      'https://via.placeholder.com/350x250/79c267/fff/image3.jpg',
    ]
  },
  plugins: ['grapesjs-parser-postcss', 'grapesjs-style-bg'],
  pluginsOpts: {
    'grapesjs-style-bg': {},
  },
});

editor.I18n.addMessages({
  en: {
    styleManager: {
      properties: {
        'background-repeat': 'Repeat',
        'background-position': 'Position',
        'background-attachment': 'Attachment',
        'background-size': 'Size',
      }
    },
  }
});