getting_started.md

Getting Started

Get started with KEditor, the jQuery plugin which provides a content editor with drag n drop, configurable contents.

Dependencies

• jQuery for DOM stuffs such as traversing, manipulation, utilities, etc...
• jQuery UI for sortable and resizable stuffs
• jQuery Fullscreen for fullscreen mode
• FontAwesome for icons
• Bootstrap for content styles (optional)

Usage

There are 2 ways to initialize KEditor:

1. Via jQuery plugin. Examples:

   $('.selector').keditor({
       // options
   });

2. Via init method. Examples:

   KEditor.init($('.selector'), {
       // options
   });

Note: For options, please view at here for all configuration options

Content structure in KEditor

keditor
├───content-area
│    ├───container
│    │    ├───container-content
│    │    │    ├───component
│    │    │    ├───sub-container
│    │    │    │   │───sub-container-content
│    │    │    │   │   │───component
│    │    │    │   │   │───component
│    │    │    │   │   └───...
│    │    │    │   └───...
│    │    │    └───...
│    │    └───...
│    └───...
└───...

Details:

1. Each keditor will have content-area(s) as children
2. Each content-area will have container(s) as children
3. Each container will have container-content(s) as children
4. Each container-content will have sub-container(s) or component as children
5. Each sub-container will have sub-container-content(s) as children
6. Each sub-container-content will have component as children

Content iframe

All content of KEditor will be editing inside iframe. Reason for it:

• Independent styles with editor controls
• Can change devices width when editing and previewing

Stylesheet for iframe

There are 2 ways to specify stylesheet for iframe:

1. Via data-type=keditor-style. KEditor will use href or data-href for external styles and innerHTML for internal styles. Examples:

   <!-- This style will be applied for both current document and iframe -->
   <link rel="stylesheet" data-type="keditor-style" type="text/css" href="/path/to/first/css" />
   
   <!-- This style will be applied for both current document and iframe -->
   <style data-type="keditor-style" type="text/css">
       /* CSS rules */
   </style>
   
   <!-- This style will not impact to current document -->
   <div data-type="keditor-style" data-href="/path/to/second/css"></div>
   
   <!-- This style will not impact to current document -->
   <script data-type="keditor-style" data-href="/path/to/third/css"></script>
   
   <!-- This style will not impact to current document -->
   <script data-type="keditor-style">
       // CSS rules
   </script>

2. Via contentStyles option. Examples:

   $('.selector').keditor({
       contentStyles: [
           {
               id: 'firstStyle',
               href: '/path/to/first/css'
           }, {
               id: 'secondStyle',
               content: 'a { color: red; }'
           }
       ]
   });

---

⬅ Back to documentation list