koterion / page_builder

plugin for create pages structure using wysiwyg (TinyMCE)

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>