Kind Editor Documentation

Write Web Editor Plugin

Hello World Plugin
  1. Step 1: Define KE.lang['hello'] = "Hello World".
    KE.lang['hello'] = "HelloWorld";
             
  2. Step 2: Define plugin logic in KE.plugin['hello']. This plugin will pop up a message when end user clicks on tool button.
    KE.plugin['hello'] = {
        click
    : function(id) {
            alert
    ("Hello, the world");
       
    }
    };
             
  3. Step 3: Define image for tool button in CSS file.
    .ke-icon-hello {
          background
    -image: url(./skins/default.gif);
          background
    -position: 0px -672px;
          width
    : 16px;
          height
    : 16px;
    }
             
  4. Step 4: Let editor show this plugin within tool bar.
    KE.show({
        id
    : 'content1',
        items
    : ['hello']
    });
             
    See this demo.
Remote Image Plugin
  1. Step 1: Define language KE.lang['remote_image'] = "Insert remote image".
    KE.lang['remote_image'] = "Insert Remote Image";
             
  2. Step 2: Define logic.
    KE.plugin['remote_image'] = {
        click
    : function(id) {
            KE
    .util.selection(id);
           
    var dialog = new KE.dialog({
                id
    : id,
                cmd
    : 'remote_image',
                width
    : 310,
                height
    : 90,
                title
    : KE.lang['image'],
                yesButton
    : KE.lang['yes'],
                noButton
    : KE.lang['no']
           
    });
            dialog
    .show();
       
    },
        check
    : function(id) {
           
    var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
           
    var url = KE.$('url', dialogDoc).value;
           
    var title = KE.$('imgTitle', dialogDoc).value;
           
    var width = KE.$('imgWidth', dialogDoc).value;
           
    var height = KE.$('imgHeight', dialogDoc).value;
           
    var border = KE.$('imgBorder', dialogDoc).value;
           
    if (url.match(/\.(jpg|jpeg|gif|bmp|png)$/i) == null) {
                alert
    (KE.lang['invalidImg']);
                window
    .focus();
                KE
    .g[id].yesButton.focus();
               
    return false;
           
    }
           
    if (width.match(/^\d+$/) == null) {
                alert
    (KE.lang['invalidWidth']);
                window
    .focus();
                KE
    .g[id].yesButton.focus();
               
    return false;
           
    }
           
    if (height.match(/^\d+$/) == null) {
                alert
    (KE.lang['invalidHeight']);
                window
    .focus();
                KE
    .g[id].yesButton.focus();
               
    return false;
           
    }
           
    if (border.match(/^\d+$/) == null) {
                alert
    (KE.lang['invalidBorder']);
                window
    .focus();
                KE
    .g[id].yesButton.focus();
               
    return false;
           
    }
           
    return true;
       
    },
       
    exec : function(id) {
            KE
    .util.select(id);
           
    var iframeDoc = KE.g[id].iframeDoc;
           
    var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
           
    if (!this.check(id)) return false;
           
    var url = KE.$('url', dialogDoc).value;
           
    var title = KE.$('imgTitle', dialogDoc).value;
           
    var width = KE.$('imgWidth', dialogDoc).value;
           
    var height = KE.$('imgHeight', dialogDoc).value;
           
    var border = KE.$('imgBorder', dialogDoc).value;
           
    this.insert(id, url, title, width, height, border);
       
    },
        insert
    : function(id, url, title, width, height, border) {
           
    var html = ' + url + '" ';
           
    if (width > 0) html += 'width="' + width + '" ';
           
    if (height > 0) html += 'height="' + height + '" ';
           
    if (title) html += 'title="' + title + '" ';
            html
    += 'alt="' + title + '" ';
            html
    += 'border="' + border + '" />';
            KE
    .util.insertHtml(id, html);
            KE
    .layout.hide(id);
            KE
    .util.focus(id);
       
    }
    };
             
  3. Step 3: Define image for tool button in CSS file.
    .ke-icon-remote_image {
          background
    -image: url(./skins/default.gif);
          background
    -position: 0px -496px;
          width
    : 16px;
          height
    : 16px;
    }
             
  4. Step 4: Let editor show this plugin within tool bar.
    KE.show({
        id
    : 'content1',
        items
    : ['remote_image']
    });
             
    See this demo in action.