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

option | type | desc | :--- | :---: | :--- | tinymceSettings | object | TinyMCE settings | height| string | Workplace height| rowClasses | string | Row class names. Can use from html data.| colClasses | string | Col class names. Can use from html data.| edit | boolean | Turn on/off editing blocks. Can use from html data.| draggable | boolean | Turn on/off dragged cols & row

You can use option in dataset like:

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

##Methods

method | desc | :--- | :--- | pageBuilder.create(selector, options) | Create workplace | pageBuilder.getContent(id) | Get content of current by id field | pageBuilder.rebuild(id) | Rebuild current by id field |

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>