Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yakovlevga/brickyeditor

WYSIWYG block editor jQuery plugin.
https://github.com/yakovlevga/brickyeditor

blockeditor jquery-plugin longread wysiwyg wysiwyg-editor wysiwyg-html-editor wysiwyg-js-editor

Last synced: 4 days ago
JSON representation

WYSIWYG block editor jQuery plugin.

Awesome Lists containing this project

README 

        
# BrickyEditor jQuery plugin

### BrickyEditor is the simple WYSIWYG editor, based on block templates system.



Usually, editors without any frontend background makes a lot of mistakes in html code.

On the other side - there is a lot of WYSIWYG editors, that brings them too much freedom, which leads to different appearence of publications.



**BrickyEditor** solve this problems: editors can use only prepared blocks of content and don't need to write any code.

Your longrids and articles will be in one clean style.



Since **BrickyEditor** can save blocks as JSON, not only in rendered HTML, you can easily deliver your content to mobile platforms 

and render it natively, without



![demo gif](https://github.com/yakovlevga/brickyeditor/blob/master/readme/1.gif?raw=true)



## Demo page

**[see demo for details](https://yakovlevga.github.io/brickyeditor/demo/)**



## Installation

### Bower

`bower install brickyeditor`

### NPM

`npm istall brickyeditor`

### Yarn

`yarn add brickyeditor`



important: jquery is not included as dependency in npm and yarn packages. Add it by yourself, if you don't use it in global scope.



## CDNs

### jsDelivr

``



``



Basic templates url: https://cdn.jsdelivr.net/npm/brickyeditor/dist/templates/bootstrap4.html



### unpkg

``



``



Basic templates url: https://unpkg.com/brickyeditor/dist/templates/bootstrap4.html



## Basic usage

1. If you don't want to use CDN or package manager, just copy files from brickyeditor\dist to your site folder.

2. Add script to your page: ``.

3. Add css to your page: ``.

4. If you don't have link to fontawesome, add it too ([http://fontawesome.io/](http://fontawesome.io/))

5. Call init code, when document is loaded

```js

$(function(){

  $("#editor").brickyeditor({

        templatesUrl: "path/to/base/templates/template.html" // by default it's "/templates/bootstrap4.html";

    });

});

```



### Options

There is a list of options, you could pass to init: $("#editor").brickyeditor(options);



| Option | Description |

| --- | --- |

| templatesUrl | Url to templates file. Default is "templates/bootstrap4.html". |

| blocks | Initial blocks json data. |

| blocksUrl | Url to fetch initial blocks json, overrides initial blocks property. |

| ignoreHtml | Ignore blocks html field, if you need only json with block data. Default is false. |

| compactTools | Show blocks selector in compact mode. Default is false. |

| compactToolsWidth | Max screen width to show tools in compact mode. By default it will show tools in compact mode for devices with screen width less than 768. |

| htmlToolsButtons | Custom buttons for inline html editing. |

| formSelector | Form selector to bind form submit event. Use it in pair with inputSelector. Editor will put blocks data to field with inputSelector on form submit. |

| inputSelector | Input selector to put json to on form submit. |

| *Callbacks:* |

| onLoad(editor) | Callback, which called after brickyeditor initialization. |

| onChange(blocksJson, blocksHtml) | Callback, which called when any change happened with blocks (add/remove/content changed). |

| onBlockAdd(block, idx) | Callback, which called when new block added. |

| onBlockDelete(block, idx) | Callback, which called when block removed. |

| onBlockMove(block, from, to) | Callback, which called when block moved (up/down). |

| onBlockSelect(block) | Callback, which called when block selected.  |

| onBlockDeselect(block) | Callback, which called when block desected.  |

| onBlockUpdate(block, property, oldValue, newValue) | Callback, which called when block updated.  |



### Template system



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 `
`. 

If you want custom preview for your template, you could wrap preview html inside block `
`. BrickyEditor will render block with default values as preview if you don't add this block.



##Sample template

```html



  



  

  Lorem ipsum dolor sit amet



```



In this sample two editable fields - img (field type - image) and figcaption (field type = html). 

Editor will get _templates/image-with-caption.jpg_ image as preview to render block inside tools panel.

You could find more examples in `build/templates folder`.



##Template groups

You could use template grouping inside your template file for better semantics. Put templates inside div with class='bre-template-group' and set 'title' attribute to name the group.

```html



    


        


            


            


        


    



    


        


            


            


            


        


    


>

```