@walnut-software/drag-and-drop-editor

Email-builder

An easy to use light-weight javascript email template builder Build for the walnut-software email-builder-backoffice (composer package comming soon)

Installation

<script src="https://unpkg.com/@walnut-software/drag-and-drop-editor"></script>

or...

npm i @walnut-software/email-builder --save

then...

import editor from '@walnut-software/email-builder'

Usage

Default configuration

editor.init({
    'token': 'token', // required
    'container': 'gjs', // default
    // 'uuid': 'uuid', // used to get & update a template -- remove to start a new template
    'buttonBackground': '#414141', // default darkGray
    'buttoncolor': '#ffffff', // default white
    'mergeTags': [{"tag": "*|first_name_tag|*"}], // use mail merge tags
});

And...

  <div style="height: 50rem">
    <div class="row" style="height:100%">
      <div id="style-manager" class="column" style="flex-basis: 500px">
        <ul class="flex justify-center tab tab-block">
          <li class="w-full text-center tab-item active" data-panel-type="content">
            <button type="button" style="width: 100%">Content</button>
          </li>
          <li class="w-full text-center tab-item" data-panel-type="styles">
            <button type="button" style="width: 100%">Styles</button>
          </li>
        </ul>
        <div id="content" class="tab-content">
          <div id="blocks"></div>
        </div>
        <div id="styles" class="tab-content" style="display:none;">
          <div id="selectors-container"></div>
          <div id="traits-container"></div>
          <div id="style-manager-container"></div>
        </div>
      </div>
      <div class="column editor-clm">
        <div id="gjs">

        </div>
      </div>
    </div>
  </div>