插件示例：简单HTML组件（分隔符）

目录结构

插件： package.json

由于简单HTML 组件不需要服务器端支持，插件的package.json 保持空即可

{
    "entrance": "",
    "proxy-prefixes": {
        "common": "",
        "manage-page": "",
        "manage-api": "",
        "backend-page": "",
        "backend-api": "",
        "page": "",
        "api": ""
    },
    "proxy-paths": {
        "common": ""
    }
}

组件：package.json

{
    "title": "分隔符",
    "image_icon": "",
    "font_icon": "",
    "html": "<div class=\"mod mod-divider\" style='margin:{{margin-top}} {{margin-right}} {{margin-bottom}} {{margin-left}};'><hr style=\"width:{{width}}\"></div>",
    "data_config": {
        "width": {
            "category": "style",
            "type": "string",
            "required": true,
            "default": "50%"
        },
        "margin-top": {
            "type": "string",
            "required": false
        },
        "margin-right": {
            "type": "string",
            "required": false
        },
        "margin-bottom": {
            "type": "string",
            "required": false
        },
        "margin-left": {
            "type": "string",
            "required": false
        }
    },
    "widgets": {
        "style": [
            {
                "label": "宽度",
                "type": "slider",
                "opt": {
                    "name":"width",
                    "min": 0,
                    "max": 100,
                    "unit": "%"
                }
            },
            {
                "type": "switchrow",
                "label": "调整边距",
                "opt": {
                    "name": "chk_margin",
                    "content": {
                        "type": "margin"
                    }
                }
            }
        ],
        "property": [

        ]
    }
}

editing.js


/*
 组件类定义。
 */
define(['jquery', 'component','lib/mustache','utils/uiHelper'], function($, Component,mustache,uiHelper) {
    'use strict';
    //初始化组件类，参数为组件配置，如果组件第一次创建，将传递空配置，如果组件为已经创建到视图窗口，重新加载，将传递已保存的配置
    return Component.extend({
        html_edit: '<div class=\"mod mod-divider\" style="margin:{{margin-top}} {{margin-right}} {{margin-bottom}} {{margin-left}};"><hr style=\"width:{{width}}\"></div>',
        //输出到配置窗口，事件绑定使用$el.delegate 绑定，当删除$el时同时删除对应事件
        renderConfigurator: function() {
            uiHelper.createConfiguartor(this);
            this.listen("width", "%");
        },
        listen: function (name, unit) {
            var that = this;
            this.$configEl.delegate('[name="' + name + '"] ', 'change',  function (ev) {
                var txt = $(ev.target).val();
                that.data[name] = txt + unit;
                that.renderView();
            });
            return this;
        },
        renderView:function(){
            this.$viewEl.html(mustache.render(this.html_edit,this.getData()));
        }
    });

});

portal.js

不需要，只保留默认即可


define([''], function () {
    'use strict';
    //初始化组件类，参数为组件配置，如果组件第一次创建，将传递空配置，如果组件为已经创建到视图窗口，重新加载，将传递已保存的配置
    return {
            //输出到发布页面，当用户正式发布后，调用此函数创建视图。
            onAfterRender:function(el){
            }
        }
});