diff --git a/README.md b/README.md
index 460f804..17f2d8c 100644
--- a/README.md
+++ b/README.md
@@ -80,10 +80,12 @@ There is a list of options, you could pass to init: $("#editor").brickyeditor(op
### Template system
-In current version there are 3 type of fields you can use inside your templates.
- - Html Field - *Any html tag with possibility to edit content with base formatting (bold, italic, links, lists).*
- - Image Field - *Div or img tag, that allows to upload image in base64 format.*
- - Embed Field - *Embed field for instagram, youtube, twitter and other providers. Based on [https://noembed.com](https://noembed.com) service.*
+There are 4 base types of fields you can use inside your templates:
+ - **Html Field** - *Any html tag with possibility to edit content with base formatting (bold, italic, links, lists).*
+ - **Image Field** - *Div or img tag, that allows to upload image in base64 format.*
+ - **Embed Field** - *Embed field for instagram, youtube, twitter and other providers. Based on [https://noembed.com](https://noembed.com) service.*
+ - **Container Field** - *Container tag, that allows to put other templates inside. It's useful if you want to use layout templates.*
+
Fields tags should be marked with attribute `data-bre-field="{ 'name' : 'caption', 'type' : 'html'}"`, with field settings inside it.
All templates should be placed inside `
+
+
+
+>
+```
\ No newline at end of file
diff --git a/demo/css/jquery.brickyeditor.css b/demo/css/jquery.brickyeditor.css
index 75d9eee..78579fe 100644
--- a/demo/css/jquery.brickyeditor.css
+++ b/demo/css/jquery.brickyeditor.css
@@ -256,6 +256,13 @@
width: 100%;
height: 99%;
overflow: auto; }
+ .bre-tools .bre-tools-templates .bre-template-group {
+ color: #92819F;
+ font-size: .5rem;
+ padding: .5rem .5rem 0rem .5rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ cursor: pointer; }
.bre-tools .bre-tools-templates .bre-template {
cursor: pointer;
background: #fff;
@@ -270,6 +277,18 @@
zoom: 0.2; }
.bre-tools .bre-tools-templates .bre-template:hover {
background: #f2f2f2; }
+ .bre-tools .bre-tools-templates .bre-template .bre-field-container {
+ padding: 1rem;
+ border: 1px solid #DDDDDD;
+ border-right-width: 0px;
+ text-align: center;
+ font-weight: bold;
+ font-size: 1rem;
+ color: #92819F; }
+ .bre-tools .bre-tools-templates .bre-template .bre-field-container::after {
+ content: '\2295'; }
+ .bre-tools .bre-tools-templates .bre-template .bre-field-container:last-child {
+ border-right-width: 1px; }
@media (min-width: 576px) and (max-width: 1023px) {
.bre-tools .bre-tools-templates .bre-template > * {
zoom: 0.3; } }
@@ -280,6 +299,9 @@
.bre-tools-collapsed {
right: -196px; }
+.bre-field-selected {
+ outline: dotted 1px #DDDDDD; }
+
.bre * {
font-family: sans-serif; }
diff --git a/demo/data.json b/demo/data.json
index 40debb2..983dc4a 100644
--- a/demo/data.json
+++ b/demo/data.json
@@ -1,5 +1,5 @@
[{
- "template": "Display Heading 1",
+ "template": "Container",
"fields": [
{
"name": "text",
@@ -7,90 +7,4 @@
"html": "Hi! This is bricky editor example."
}
]
-},
-{
- "template": "Paragraph Lead",
- "fields": [
- {
- "name": "text",
- "type": "html",
- "html": "Ok, you put some traditional wysiwyg to your site and give html freedom to your editors.
But this freedom played a cruel joke with you and now you need to correct every article by yourself.
"
- }
- ]
-},
-{
- "template": "Paragraph",
- "fields": [
- {
- "name": "text",
- "type": "html",
- "html": "I know this situation, cause I'm very often hear something like: \"I don't how this happens, it maked it by itself\". And this poor guys are right - sometimes wysiwygs made \"this\" by themselfs. And one day I decide to correct this situation."
- }
- ]
-},
-{
- "template": "Paragraph",
- "fields": [
- {
- "name": "text",
- "type": "html",
- "html": "If you look closely, you will see, that 99 percents of all articles in web contains some typical blocks. Escpeccialy in pro media: headers, paragraps, photos, embed fragments from social networks, or, maybe, galleries. And I started creation of my own universal WYSIWYG plugin with predifined blocks. Of cource I made some quick googling for plugins of this type, but this field is still pure and have only a few solutions. And the best one is payed and it's vendor locked. I'm not greedy, but I really love open source because it speeds up the evolution of the solution (you know it buy yourself, couse 99% that you come here from github ;))."
- }
- ]
-},
-{
- "template": "Blockquote Reverse",
- "fields": [
- {
- "name": "text",
- "type": "html",
- "html": "I am fond of pigs. Dogs look up to us. Cats look down on us. Pigs treat us as equals."
- },
- {
- "name": "author",
- "type": "html",
- "html": "Winston Churchill"
- },
- {
- "name": "author",
- "type": "html",
- "html": "This quote is here, because I need to show, what brickyeditor can. And, yes, I', civ fan."
- }
- ]
-},
-{
- "template": "Image with caption",
- "fields": [
- {
- "name": "image",
- "type": "image",
- "src": "assets/photo.jpg"
- },
- {
- "name": "caption",
- "type": "html",
- "html": "I don't love to write a lot. So I put here my cats photo, his name is Shprotski."
- }
- ]
-},
-{
- "template": "Paragraph Lead",
- "fields": [
- {
- "name": "text",
- "type": "html",
- "html": "I think I must write more marketing words here, but sorry, I don't have no time for that shit. But I can instagram embed photo, I like it."
- }
- ]
-},
-{
- "template": "Embed",
- "fields": [
- {
- "name": "embed",
- "type": "embed",
- "url": "http://instagr.am/p/BYJAes_HEI0/"
- }
- ]
-}
-]
\ No newline at end of file
+}]
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index d13d453..791f4a9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -12,17 +12,15 @@
+