methods.md

Methods

There are many ways to call method

$('.selector').keditor('methodName', param1, param2, ...);

or

var keditor = $('.selector').keditor(options); // Get KEditor instance when initializing
keditor.methodName(param1, param2, ...);

or

$('.selector').keditor(options);
var keditor = $('.selector').data('keditor'); // Get KEditor instance via `data` attribute
keditor.methodName(param1, param2, ...);

Static methods

log

/**
 * Log utility of KEditor with `[ KEditor ] ` as prefix. You can see the log when `window.KEDITOR_DEBUG = true`
 * @param {*} args Values you want to log
 */
KEditor.log(...args);

error

/**
 * Throw error with `[ KEditor ] ` as prefix for message
 * @param {String} message Error message
 */
KEditor.error(message);

init

/**
 * Initialize KEditor instance
 * @param {jQuery} target Element which you want to initialize as KEditor
 * @param {Object} config Configuration of KEditor instance. See https://github.com/Kademi/keditor/blob/master/docs/configuration.md for more details
 */
KEditor.init(target, config);

loadDynamicContent

/**
 * Load dynamic content for elements which have `data-dynamic-href` attribute
 * @param {jQuery} dynamicElement jQuery object of element(s) which you want to load dynamic content. Element(s) must have `data-dynamic-href` attribute
 * @param {Object} options Callbacks include `onSuccess` and `onError` with arguments are `dynamicElement` and `jqXHR`
 */
KEditor.loadDynamicContent(dynamicElement, options);

Instance methods

getSettingContainer

/**
 * Get container which is setting-up
 * @return {jQuery} 
 */
KEditor.prototype.getSettingContainer();

getSettingComponent

/**
 * Get component which is setting-up
 * @return {jQuery} 
 */
KEditor.prototype.getSettingComponent();

generateId

/**
 * Generate a random Id
 * @return {String} 
 */
KEditor.prototype.generateId();

getDataAttributes

/**
 * Get list of `data-*` attributes
 * @param {jQuery} target jQuery of elements which you want to get list of `data-*` attributes
 * @param {Array<String>} ignoreAttributes Array of attributes you want to ignore
 * @param {Boolean} isArray Return list as Array or Object
 * @return {Array|Object}
 */
KEditor.prototype.getDataAttributes(target, ignoreAttributes, isArray);

initIframeCover

/**
 * Init iframe cover which avoid iframe's z-index issue in IE browsers
 * @param {jQuery} iframe Iframe which you want to add cover for
 * @param {jQuery} wrapper Wrapper of iframe
 */
KEditor.prototype.initIframeCover(iframe, wrapper);

initModal

/**
 * Init KEditor modal
 * @param {String} modalId Id of modal
 * @param {Boolean} hasFooter Modal has footer or not
 * @param {Boolean} disableOriginEvents If you want to handle close button by yourself, just set it as `false`
 */
KEditor.prototype.initModal(modalId, hasFooter, disableOriginEvents);

showModal

/**
 * Show a KEditor modal
 * @param {jQuery} modal Modal you want to show
 */
KEditor.prototype.showModal(modal);

hideModal

/**
 * Hide a KEditor modal
 * @param {jQuery} modal Modal you want to show
 */
KEditor.prototype.hideModal(modal);

getContent

/**
 * @param {Boolean} inArray Return your content in array format or just plain string
 * @return {String|Array<String>}
 */
KEditor.prototype.getContent(inArray);

Example:

$('#target1').keditor('getContent'); // For only 1 content-area
$('#target2').keditor('getContent', true); // For more than 1 content-area and you want to get them separately

setContent

/**
 * @param {String} content HTML content
 * @param {String|jQuery} contentArea Can be selector or jQuery object of content area which you want to set new content. If you have only a content area, you can leave it blank
 */
KEditor.prototype.setContent(content, contentArea);

Example:

$('#id').keditor('setContent', `
    <div class="row">
        <div class="col-md-6" data-type="container-content">
            <div data-type="component-text">New content</div>
        </div>
    </div>
`);

destroy

/**
 * Removes the KEditor functionality completely. This will return the element back to its pre-init state with latest content
 */
KEditor.prototype.destroy();

addSnippet

/**
 * Add snippet programmatically 
 * @param {String} type Type of snippet. Can be `container` or `component-*`
 * @param {String} title Text title of snippet
 * @param {String} previewUrl Url to preview image of snippet
 * @param {String} categories Categories list of snippet, separated by `snippetsCategoriesSeparator` option
 * @param {String} content HTML content of snippet
 * @param {Array<String>} extraAttrs If you component contains dynamic content, you will need this parameter to add `data-*` attribute to your component
 */
KEditor.prototype.addSnippet(type, title, previewUrl, categories, content, dataAttributes);

initDynamicContent

/**
 * Load dynamic content for elements which have `data-dynamic-href` attribute
 * @param {jQuery} dynamicElement jQuery object of element(s) which you want to load dynamic content. Element(s) must have `data-dynamic-href` attribute
 * @return {jqXHR}
 */
KEditor.prototype.initDynamicContent(dynamicElement);

---

⬅ Back to documentation list