@koterion/page_builder v1.2.2

Page Builder

plugin for create pages structure using wysiwyg (TinyMCE). Examples

install

npm install @koterion/page_builder

use

Include TinyMCE

<script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=your_API_key"></script>

Include Material Icons

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

css

@import url('~@koterion/page_builder/dist/css/pageBuilder.css');

or (if use Postcss import)

@import url('@koterion/page_builder');

js

import '@koterion/page_builder'

pageBuilder.create(selector, options)

html

<div class="YourUniqueClass" data-yourData="dataInfo">HTML</div>

or

<textarea class="YourUniqueClass" name="YourUniqueName" data-yourData="dataInfo">HTML</textarea>

Options

You can use option in dataset like:

<div data-height="500px">HTML</div>

##Methods

Examples:

use:

import '@koterion/page_builder'

pageBuilder.create(document.querySelector('.textarea'))

tinymce

Initialize TinyMCE. Use className for selector

{
  tinymceSettings: (className) => {
    tinymce.init({selector: className})
  }
}

rowClasses

Use in current format, separator ', '

{
  rowClasses: 'first, second, third'
}

or

<div data-rowClasses="first, second, third">HTML</div>

colClasses

Use in current format, separator ', '

{
  colClasses: 'full, text'
}

or

<div data-colClasses="full, text">HTML</div>