cms_edit

cms_tree_table

Samples
API Reference
Styling & Controls
Dependences

Add editor control into page sample

There is sample edit control:

Note: you can't update data using edit control of this sample due insufficient permissions of logged demo user

jQuery code snippet:


$(".sample-edit").cms_edit({ // cms edit plugin
  cms_path: skin_cms_path, // cms folder relative path
  admin: ['admin','demo'], // show control when logged such users
  class_control: "sample-edit-control", // edit control button class
  files: skin_files // page include files array
});

HTML code snippet:


<fieldset class="cms-form-fieldset">
  <legend class="cms-form-legend">Add editor control into page sample</legend>
  <div class="sample-edit" data-file="0">There is sample edit control:&nbsp;</div>
  <!-- data-file="0" to set index=0 in files array - see snippets below -->
</fieldset>

CSS code snippet:


.sample-edit { /* element where add control button */
  position: relative;
  display: block;
  float: left
}
.sample-edit-control { /* edit control button */
  position: relative; 
  display: inline;
  float: right;
  width: 24px; 
  height: 24px; 
  background: url('/skin/images/page-white-edit-icon.png') no-repeat center center
}
.sample-edit-control a { /* anchor of edit control button */
  position: absolute; 
  display: block; 
  width: 24px; 
  height: 24px
}

Template code snippet:


<script type="text/javascript">
var skin_files = JSON.parse('{json_encode($file_obj)}');
var skin_cms_path = "{$cms_path}";
</script>

.cms_edit()

Option	Method	Callback
cms_path, class_control, file_no_attr
admin, grp, files
control, cms

.cms_edit( settings )

Description: Plugin will add editor control to specified element. Click control and open WYSIVYG editor to edit page content.

.cms_edit( settings )

- settings
- Type: PlainObject
- A set of key/value pairs that configure cms_edit() plugin.
  - - cms_path (default: '/cms/srv')
    - Type: String
    - Relative path to CMS software
  - - class_control (default: 'cms-edit-control')
    - Type: String
    - Plugin control CSS class
  - - file_no_attr (default: 'data-file')
    - Type: String
    - Attribute name containing file index
  - - admin (default: ['admin'])
    - Type: Array
    - Array of user groups (roles) can use this plugin control
  - - grp (default: [])
    - Type: Array
    - Assigned to logged user groups array. Should be set if plugin is not using with CMS (option cms=false)
  - - files (default: [])
    - Type: Array
    - Array containing included files data (to be selected to edit with file index). File data must be plain object with structure: {"path":"","path_orig":"","link":"","ext":"","cache":"","life":""}
  - - control (default: true)
    - Type: Boolean
    - Show plugin control
  - - cms (default: true)
    - Type: Boolean
    - Use plugin with cms

cms_edit plugin styling and control:

class 'cms-edit-control' - edit control button

Plugin cms_dual_tree depends on following jQuery packages:

User ID:
User Password: