summernote's renderer

gistfile1.md

implements Summernote's renderer

Summernote Base UI

• Toolbar
• Button
• ButtonGroup
• Dropdown
• Tooltip
• Dialog

Toolbar -> ButtonGroup -> Button -> Tooltip

Template Based UI

• Toolbar

<div class='btn-toolbar'></div>

• ButtonGroup

<div class='btn-group'></div>

• Button

<a class='btn' data-event='insertParagraph' title='' ><i class='fa fa-plus'></i> name</a>

• Dropdown

<a class='btn' title='' dropdown-toggle="dropdown">
    <i class='fa fa-plus'></i>
    <ul>
        <li><a data-event='menu1'>menu1</a></li>
        <li><a data-event='menu1'>menu1</a></li>
        <li><a data-event='menu1'>menu1</a></li>
        <li><a data-event='menu1'>menu1</a></li>
        <li><a data-event='menu1'>menu1</a></li>
    </ul>
</a>

• Dialog

<div class='modal'>
   <div class='modal-head'>
      <title>Insert Video Link</title>
   </div>
   <div class='modal-body'>
       contents.....
   </div>
   
   <div class='modal-foot'>
      
   </div>
</div>

Concept

$(".summernote").summernote({
    ...
    renderer : 'summernote',   // default value is bootstrap  
    ...
});

var renderer = $(".summernote").summernote("renderer");

var button = renderer.button({
   ,options,...
});

button.on('click', function(e, layoutInfo) { 

})

Button Information

{
   name : 'buttonName',    // button's name,
   event : 'eventName',    // fired event name 
   title : 'ButtonText',   // button's title
   icon : 'fa fa-icon',    // button's icon 
   checked : true,         // check status 
   disabled : true         // whether disabled ,
   hide : false             // whether hided 
}

Button Default API

var button = renderer.button(obj);

// set click event 
button.on('click', function(e, $holder) { });

// set button information, and then re-render 
button.set(key, value);
or 

button.set({
   key : value, 
   ....
})

// get button information 
button.get('checked'[, false /* default value */ ]);

// add toolbar 
$holder.summernote("toolbar.add", button [, 'group' [, isAppend]]);

// get button object by dom
var button = renderer.button($holder, name);

button.el // dom object 
button.$el // jquery object 

button.$el.css({
   ....
});

button.$el.show();
button.$el.hide();

$holder.on('summernote.change', function() { 
   button.set('checked', !button.get('checked'));
});

Dropdown

var dropdown = renderer.dropdown(
   name : 'file',
   title : 'File',
   icon : 'fa fa-checked',
   disabled : true, 
   hide : true,
   dropdown : [
      { event : 'new', title : 'New File', icon : 'fa fa-plus', checked : true, disabled : true },
      '-',  // divider line 
      { event : 'save', title : 'Save', icon : 'fa fa-plus', checked : false (or true) },
      { event : 'save as', title : 'Save as', icon : 'fa fa-plus', checked : false (or true) },
   ]);

dropdown = renderer.dropdown($holder, 'name');   

// hmmm
dropdown.on('click', function(e, $holder) {
   // this is dropdown
   if (e.button.event == 'new') {
      this.set('title', e.button.title);
   }
};



$holder.summernote('toolbar.addGroup', 'groupName');

$holder.summernote('toolbar.add', dropdown); // dropdown is used as group 

Dialog

var custom = renderer.button(options);

custom.on('click', function(e, $holder, dialog) { 
   // this is button
});

var dropdown = renderer.dropdown(options);

dropdown.on('click', function(e, $holder, dialog) { 

});

var dialog = renderer.dialog({
   title : 'Hello Dialog',
   body : $("<div />") or "<div ></div>",
   buttons : [ "apply", "cancel", renderer.button("title", options), dropdown]
});

dialog.show();
dialog.hide();

dialog.on("apply", function(e) { 
   // console.log(this.getValue());
});

dialog.on('cancel', function(e) { 
   this.hide();
})

dialog.on('show', function() {
   // this is dialog 
});

dialog.on('hide', function() {
   // this is dialog 
});