Example

Set the row object

If you have before created rows, you can pass with two different way.

Option 1 - Static way

Vue.use(plekan,{
 ....
 rows: rows
 ....
})

Option 2 - Dynamic way

<plekan :rows="rows"></plekan>

See Dynamic props

Then, you can watch every changes via event.

---

##Custom components

You need to plekanComponentMixin for write custom component. This mixin handles - when update component html, which language is preview e.g. instead of yourself.

Via Vue template

custom.vue

 <template>
  <div class="plekan-template" v-html="_content" contenteditable="true"></div>
</template>

<script>
  import {mixinComponent} from 'plekan'

  var DEFAULT_CONTENT = `<section class="plekan-module-1">
        <div class="plekan-xs-12 plekan-sm-12 plekan-md-12 plekan-lg-12">
          <div class="p-text-center">
            <h2>I LOVE <small>plekan</small></h2>
            <hr>
          </div>
          <h1 class="p-text-center">Did you like it?</h1>
        </div>
      </section>`

  export default {
    mixins:[ mixinComponent ],
    data () {
      return {
        DEFAULT_CONTENT : DEFAULT_CONTENT
      }
    },
    /**
     * *
     * This method contains a magic variable
     */
    updated(){
     this.me.contents[this.displayLanguage]
       .fields["src"] = this.$el.querySelector('img').src
    }
  }
</script>

Now we can register our component.

//Then you can register this component

import Vue from 'vue';
import {plekan,plekanModules} from './plekan.js';

import customComponent from 'customComponent.vue'

var newComponent = Vue.component('custom',customComponent)

var customComponents = [
   {
    name:"plekanmodule1",
    group:"text",
    thumbnail:"plekanmodule1.png",
    context:newComponent,
   }
]

Vue.use(plekan,{
  defaultLanguage : "en",
  languages : ["en","tr"],
  modules: [
    ...plekanModules,
    ...customComponents
  ],
})

Updated method is a helpfull for extra fields of row.

If you have a any idea about me, displayLanguage ? Check Concept

####Via HTML template

    <script  type="text/x-template" id="custom">
       <div class="twocloumn" v-html="_content"></div>
    </script>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script src="plekan.js"></script>
    <script src="plekanmodules.js"></script>
    <script>

      var newComponent = Vue.component('custom',{
        mixins:[plekan.plekanComponentMixin],
        data:function () {
          return {
            DEFAULT_CONTENT : '<div contenteditable="true" >Hi</div>'
          } 
        },
        template :'#custom'
      })

      var customComponents = [
        {
          info : {
            "name"      : "awesomecomponent",
            "group"     : "image",
            "thumbnail"   : "https://vuejs.org/images/logo.png"
          },
          component : newComponent 
        }
      ]


      Vue.use(plekan.plekan,{
        defaultLanguage : "tr",
        languages : ["tr","en"],
        customComponents:customComponents,
        modules: [
            ...plekanModules,
            ...customComponents
          ],
        }
      })
  </script>

Checkout example on code

• Custom component as vue template

---

###Specail buttons

Now , you can create special buttons , before see Options

This buttons will show under the plekan content area . You can access and change your buttons on run time.

....
  plekan_buttons : { // Special buttons 
    save : {
      text : "Save",
      class:"plekan-footer-button cancel",
      callback : function (e) {
        // do this
      }
    },
    cancel : {
      text : "Cancel",
      class:"plekan-footer-button save",
      callback : function (e) {
        // do this
      }
    }
  }
....

For example on runtime access the special button

this.$plekan_buttons.save.callback =  (rows) => {
    // Do this
}

---

##Custom editor buttons

Some case you want to add specail buttons.

Vue.use(plekan,{
//.....
  customEditorButtons:[
    {
      type : 'stable',
      class : 'fa fa-code',
      callback (target,exec,selo,sel) {
        // open modal or change any then 
        execCommand('bold',null)
      }
    }
  ]
//....
})

Properties and means

• type : 'stable' (left slide buttons group) or 'dynamic'
• class : buttons css class
• value : exec command value

target : <DOM-TARGET>,
execCommand : (cmd,value)
selection : selo object reference to window.selection , 
savedSelection : Selection text node

See more selo

Note : You must use the execCommand function for exec because we are handle it any operation before exec, see more detail on code