Merge branch 'master' of http://www.finedevelop.com:2015/scm/~guy/fineui

# Conflicts: # bi/widget.css # dist/bundle.css # dist/bundle.min.css # dist/widget.css # src/addons/slider/css/singleslider/slider/widget.slider.css # src/addons/slider/less/singleslider/slider/widget.slider.less
7 years ago · 3525e81cbf
554 changed files with 106150 additions and 71520 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -87,6 +87,12 @@ module.exports = function (grunt) {
                ],
                dest: 'dist/slider.js'
            },
+            sliderCss: {
+                src: [
+                    'src/addons/slider/**/*.css'
+                ],
+                dest: 'dist/slider.css'
+            },
            jqueryuiJs: {
                src: [
                    'src/addons/slider/lib/jquery.ui.core.js',
@ -128,8 +134,12 @@ module.exports = function (grunt) {
                dest: 'dist/bundle.css'
            },

+            configJs: {
+                src: ['demo/version.js'],
+                dest: 'dist/config.js'
+            },
            demoJs: {
-                src: ['demo/version.js', 'demo/app.js', 'demo/js/**/*.js', 'demo/config.js'],
+                src: ['demo/app.js', 'demo/js/**/*.js',' demo/config.js'],
                dest: 'dist/demo.js'
            },
            demoCss: {
@ -230,6 +240,12 @@ module.exports = function (grunt) {
                ],
                dest: 'bi/slider.js'
            },
+            bi_sliderCss: {
+                src: [
+                    'src/addons/slider/**/*.css'
+                ],
+                dest: 'bi/slider.css'
+            },
            bi_jqueryuiJs: {
                src: [
                    'src/addons/slider/lib/jquery.ui.core.js',
--- a/bi/base.css
+++ b/bi/base.css
@ -275,10 +275,11 @@
  color: #00c;
 }
 .cm-s-default span[class*="fieldName"] {
+  display: inline-block;
  color: white;
-  padding: 1px;
-  margin: 1px 0px;
  background: #3f8ce8;
+  padding: 0 5px;
+  margin: 1px 1px;
 }
 .cm-s-default span[class*="start"] {
  -webkit-border-radius: 3px 0px 0px 3px;
@ -616,6 +617,9 @@ li.CodeMirror-hint-active {
 .bi-direction-pager .direction-pager-next {
  font-size: 16px;
 }
+.bi-rich-editor-text-toolbar .text-toolbar-button {
+  font-size: 16px;
+}
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-segment > .center-element {
@ -815,6 +819,22 @@ li.CodeMirror-hint-active {
 /**** custom color(自定义颜色,用于特定场景) ****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
+.bi-code-editor .param {
+  color: #ffffff;
+  padding: 0 5px;
+  margin: 1px 1px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #3f8ce8;
+  display: inline-block;
+}
+.bi-code-editor .error-param {
+  color: #e85050;
+  padding: 0 5px;
+  margin: 1px 1px;
+  display: inline-block;
+}
 .bi-editor {
  font-size: 12px;
 }
--- a/bi/base.js
+++ b/bi/base.js
@ -3024,6 +3024,9 @@ BI.Combo = BI.inherit(BI.Widget, {
                    var debounce = BI.debounce(function (e) {
                        if (self.combo.element.__isMouseInBounds__(e)) {
                            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) {
+                                if (!o.toggle && self.isViewVisible()) {
+                                    return;
+                                }
                                o.toggle ? self._toggle() : self._popupView();
                                if (self.isViewVisible()) {
                                    self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo);
@ -3040,6 +3043,33 @@ BI.Combo = BI.inherit(BI.Widget, {
                        st(e);
                    });
                    break;
+                case "click-hover":
+                    var debounce = BI.debounce(function (e) {
+                        if (self.combo.element.__isMouseInBounds__(e)) {
+                            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) {
+                                if (self.isViewVisible()) {
+                                    return;
+                                }
+                                self._popupView();
+                                if (self.isViewVisible()) {
+                                    self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo);
+                                    self.fireEvent(BI.Combo.EVENT_EXPAND);
+                                }
+                            }
+                        }
+                    }, BI.EVENT_RESPONSE_TIME, true);
+                    self.element.off("click." + self.getName()).on("click." + self.getName(), function (e) {
+                        debounce(e);
+                        st(e);
+                    });
+                    self.element.on("mouseleave." + self.getName(), function (e) {
+                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
+                            self._hideView();
+                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
+                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
+                        }
+                    });
+                    break;
            }
        });
    },
@ -16057,6 +16087,941 @@ BI.Pager = BI.inherit(BI.Widget, {
 BI.Pager.EVENT_CHANGE = "EVENT_CHANGE";
 BI.Pager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
 BI.shortcut("bi.pager", BI.Pager);/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.TextToolbar
+ * @extends BI.Widget
+ */
+BI.RichEditorAction = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAction.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "",
+            disabled: true
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAction.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        o.editor.on(BI.NicEditor.EVENT_SELECTED, function (ins, target) {
+            self.setEnable(true);
+            self.checkNodes(target);
+        });
+        o.editor.on(BI.NicEditor.EVENT_BLUR, function () {
+            self.setEnable(false);
+        });
+        o.editor.on(BI.NicEditor.EVENT_KEY, BI.bind(this.key, this));
+    },
+
+    checkNodes: function (e) {
+        if (!e) {
+            return false;
+        }
+        var elm = e;
+        do {
+            if (this.options.tags && this.options.tags.contains(elm.nodeName)) {
+                this.activate();
+                return true;
+            }
+        } while (elm = elm.parentNode && elm.className && elm.className.indexOf("bi-nic-editor") >= -1);
+        elm = e;
+        while (elm.nodeType == 3) {
+            elm = elm.parentNode;
+        }
+        if (this.options.css) {
+            for (var itm in this.options.css) {
+                if ($(elm).css(itm) == this.options.css[itm]) {
+                    this.activate();
+                    return true;
+                }
+            }
+        }
+        this.deactivate();
+        return false;
+    },
+
+    key: function () {
+
+    },
+
+    activate: function () {
+    },
+
+    deactivate: function () {
+    },
+
+    doCommand: function (args) {
+        if (this.options.command) {
+            this.options.editor.nicCommand(this.options.command, args);
+        }
+        this.options.editor.fireEvent("buttonClick", this);
+    }
+});/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorTextToolbar
+ * @extends BI.Widget
+ */
+BI.RichEditorTextToolbar = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-rich-editor-text-toolbar bi-background",
+            buttons: [
+                {type: "bi.rich_editor_size_chooser"},
+                {type: "bi.rich_editor_bold_button"},
+                {type: "bi.rich_editor_italic_button"},
+                {type: "bi.rich_editor_underline_button"},
+                {type: "bi.rich_editor_color_chooser"},
+                {type: "bi.rich_editor_background_color_chooser"},
+                {type: "bi.rich_editor_align_left_button"},
+                {type: "bi.rich_editor_align_center_button"},
+                {type: "bi.rich_editor_align_right_button"},
+            ],
+            height: 28
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorTextToolbar.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        BI.createWidget({
+            type: "bi.left",
+            element: this,
+            items: BI.map(o.buttons, function (i, btn) {
+                return BI.extend(btn, {
+                    editor: o.editor
+                });
+            }),
+            hgap: 3,
+            vgap: 3
+        })
+    },
+
+    mounted: function () {
+        var self = this;
+        if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框
+            this.element.mousedown(function () {
+                self._noSelect(self.element[0]);
+            });
+            this._noSelect(this.element[0]);
+        }
+    },
+
+    _noSelect: function (element) {
+        if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') {
+            element.setAttribute('unselectable', 'on');
+        }
+        for (var i = 0; i < element.childNodes.length; i++) {
+            this._noSelect(element.childNodes[i]);
+        }
+    }
+});
+BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/**
+ * 富文本编辑器
+ *
+ * Created by GUY on 2017/9/15.
+ * @class BI.NicEditor
+ * @extends BI.Widget
+ */
+!(function () {
+    BI.NicEditor = BI.inherit(BI.Widget, {
+        _defaultConfig: function () {
+            return BI.extend(BI.NicEditor.superclass._defaultConfig.apply(this, arguments), {
+                baseCls: "bi-nic-editor"
+            });
+        },
+        _init: function () {
+            BI.NicEditor.superclass._init.apply(this, arguments);
+            var o = this.options;
+            $(document).bind("mousedown." + this.getName(), BI.bind(this.selectCheck, this));
+            BI.createWidget({
+                type: "bi.vertical",
+                element: this,
+                items: [{
+                    type: "bi.layout",
+                    height: 1
+                }, this.instance = this.addInstance()]
+            })
+        },
+
+        addInstance: function () {
+            var o = this.options;
+            var conf = {
+                ne: this,
+                height: o.height - 1,
+                maxHeight: o.maxHeight ? o.maxHeight : null
+            };
+            if (this.element[0].contentEditable || !!window.opera) {
+                var newInstance = new nicEditorInstance(conf);
+            } else {
+                console.error("不支持此浏览器");
+            }
+            return newInstance;
+        },
+
+        nicCommand: function (cmd, args) {
+            if (this.selectedInstance) {
+                this.selectedInstance.nicCommand(cmd, args);
+            }
+        },
+
+        selectCheck: function (e) {
+            var t = e.target;
+            var found = false;
+            do {
+                if (t.nodeName !== "svg" && t.className && t.className.indexOf(prefix) != -1) {
+                    return;
+                    // return false;
+                }
+            } while (t = t.parentNode);
+            this.fireEvent('blur', this.selectedInstance, t);
+            this.lastSelectedInstance = this.selectedInstance;
+            this.selectedInstance = null;
+            // return false;
+        },
+
+        setValue: function (v) {
+            this.instance.setContent(v);
+        },
+
+        getValue: function () {
+            return this.instance.getContent();
+        },
+
+        destroyed: function () {
+            $(document).unbind("mousedown." + this.getName());
+        }
+    });
+    BI.NicEditor.EVENT_SELECTED = "selected";
+    BI.NicEditor.EVENT_BLUR = "blur";
+    BI.NicEditor.EVENT_KEY = "key";
+    BI.shortcut('bi.nic_editor', BI.NicEditor);
+
+    var prefix = "niceditor-";
+
+    var nicEditorInstance = BI.inherit(BI.Layout, {
+        isSelected: false,
+        _init: function () {
+            nicEditorInstance.superclass._init.apply(this, arguments);
+            var o = this.options;
+            this.ne = this.options.ne;
+            this.elm = BI.createWidget({
+                type: "bi.layout",
+                width: o.width - 8,
+                scrollable: false
+            });
+            this.elm.element.css({
+                margin: "4px",
+                minHeight: (o.height - 8) + "px",
+                outline: "none"
+            }).html(o.value);
+
+            this.element.css("maxHeight", (o.maxHeight) ? o.maxHeight + 'px' : null);
+
+            this.e = BI.createWidget({
+                type: "bi.layout",
+                invisible: true,
+                tagName: "textarea"
+            });
+            BI.createWidget({
+                type: "bi.default",
+                element: this,
+                scrolly: true,
+                items: [this.elm, this.e]
+            });
+
+            this.ne.on("blur", BI.bind(this.blur, this));
+
+            this.start();
+            this.blur();
+        },
+
+        start: function () {
+            this.elm.element.attr("contentEditable", true);
+            if (this.getContent() == "") {
+                this.setContent("<br />");
+            }
+            this.instanceDoc = document.defaultView;
+            this.elm.element.on('mousedown', BI.bind(this.selected, this));
+            this.elm.element.on('keypress', BI.bind(this.keyDown, this));
+            this.elm.element.on('focus', BI.bind(this.selected, this));
+            this.elm.element.on('blur', BI.bind(this.blur, this));
+            this.elm.element.on('keyup', BI.bind(this.selected, this));
+            this.ne.fireEvent('add', this);
+        },
+
+        disable: function () {
+            this.elm.element.attr("contentEditable", false);
+        },
+
+        getSel: function () {
+            return (window.getSelection) ? window.getSelection() : document.selection;
+        },
+
+        getRng: function () {
+            var s = this.getSel();
+            if (!s || s.rangeCount === 0) {
+                return;
+            }
+            return (s.rangeCount > 0) ? s.getRangeAt(0) : s.createRange();
+        },
+
+        selRng: function (rng, s) {
+            if (window.getSelection) {
+                s.removeAllRanges();
+                s.addRange(rng);
+            } else {
+                rng.select();
+            }
+        },
+
+        selElm: function () {
+            var r = this.getRng();
+            if (!r) {
+                return;
+            }
+            if (r.startContainer) {
+                var contain = r.startContainer;
+                if (r.cloneContents().childNodes.length == 1) {
+                    for (var i = 0; i < contain.childNodes.length; i++) {
+                        var rng = contain.childNodes[i].ownerDocument.createRange();
+                        rng.selectNode(contain.childNodes[i]);
+                        if (r.compareBoundaryPoints(Range.START_TO_START, rng) != 1 &&
+                            r.compareBoundaryPoints(Range.END_TO_END, rng) != -1) {
+                            return contain.childNodes[i];
+                        }
+                    }
+                }
+                return contain;
+            } else {
+                return (this.getSel().type == "Control") ? r.item(0) : r.parentElement();
+            }
+        },
+
+        saveRng: function () {
+            this.savedRange = this.getRng();
+            this.savedSel = this.getSel();
+        },
+
+        restoreRng: function () {
+            if (this.savedRange) {
+                this.selRng(this.savedRange, this.savedSel);
+            }
+        },
+
+        keyDown: function (e, t) {
+            if (e.ctrlKey) {
+                this.ne.fireEvent('key', this, e);
+            }
+        },
+
+        selected: function (e) {
+            var t = e.target;
+            if (!t && !(t = this.selElm())) {
+                t = this.selElm();
+            }
+            if (!e.ctrlKey) {
+                var selInstance = this.ne.selectedInstance;
+                if (selInstance != this) {
+                    if (selInstance) {
+                        this.ne.fireEvent('blur', selInstance, t);
+                    }
+                    this.ne.selectedInstance = this;
+                    this.ne.fireEvent('focus', selInstance, t);
+                }
+                this.ne.fireEvent('selected', selInstance, t);
+                this.isFocused = true;
+                this.elm.element.addClass(prefix + 'selected');
+            }
+            // return false;
+        },
+
+        blur: function () {
+            this.isFocused = false;
+            this.elm.element.removeClass(prefix + 'selected');
+        },
+
+        saveContent: function () {
+            this.ne.fireEvent('save', this);
+            this.e.element.value(this.getContent());
+        },
+
+        getElm: function () {
+            return this.elm;
+        },
+
+        getContent: function () {
+            this.content = this.getElm().element.html();
+            this.ne.fireEvent('get', this);
+            return this.content;
+        },
+
+        setContent: function (e) {
+            this.content = e;
+            this.ne.fireEvent('set', this);
+            this.elm.element.html(this.content);
+        },
+
+        nicCommand: function (cmd, args) {
+            document.execCommand(cmd, false, args);
+        }
+    });
+}());
+/**
+ * 颜色选择trigger
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorBackgroundChooserTrigger
+ * @extends BI.Widget
+ */
+BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments);
+        return BI.extend(conf, {
+            width: 20,
+            height: 20
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments);
+        this.font = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-background-font"
+        });
+
+        this.underline = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-color-underline-font"
+        });
+
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: this.font,
+                top: 2,
+                left: 2
+            }, {
+                el: this.underline,
+                top: 7,
+                left: 2
+            }]
+        })
+    },
+
+    setValue: function (color) {
+        this.underline.element.css("color", color);
+    },
+
+    getValue: function () {
+        return this.font.element.css("color");
+    }
+});
+BI.shortcut('bi.rich_editor_background_color_chooser_trigger', BI.RichEditorBackgroundChooserTrigger);/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorAlignCenterButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorAlignCenterButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAlignCenterButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "justifycenter"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAlignCenterButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.align = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            forceNotSelected: true,
+            title: BI.i18nText("BI-Word_Align_Center"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-align-center-font",
+        });
+        this.align.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut("bi.rich_editor_align_center_button", BI.RichEditorAlignCenterButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorAlignLeftButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorAlignLeftButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAlignLeftButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "justifyleft"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAlignLeftButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.align = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            forceNotSelected: true,
+            title: BI.i18nText("BI-Word_Align_Left"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-align-left-font",
+        });
+        this.align.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut("bi.rich_editor_align_left_button", BI.RichEditorAlignLeftButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorAlignRightButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorAlignRightButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAlignRightButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "justifyright"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAlignRightButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.align = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            forceNotSelected: true,
+            title: BI.i18nText("BI-Word_Align_Right"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-align-right-font",
+        });
+        this.align.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut("bi.rich_editor_align_right_button", BI.RichEditorAlignRightButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorBoldButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorBoldButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorBoldButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "Bold",
+            tags: ["B", "STRONG"],
+            css: {fontWeight: "bold"}
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorBoldButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.bold = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            title: BI.i18nText("BI-Basic_Bold"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-bold-font",
+        });
+        this.bold.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+        this.bold.setSelected(true);
+    },
+
+    deactivate: function () {
+        this.bold.setSelected(false);
+    },
+});
+BI.shortcut("bi.rich_editor_bold_button", BI.RichEditorBoldButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorItalicButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorItalicButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorItalicButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "Italic",
+            tags: ["EM", "I"],
+            css: {fontStyle: "italic"}
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorItalicButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.italic = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            title: BI.i18nText("BI-Basic_Italic"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-italic-font",
+        });
+        this.italic.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+        this.italic.setSelected(true);
+    },
+
+    deactivate: function () {
+        this.italic.setSelected(false);
+    },
+});
+BI.shortcut("bi.rich_editor_italic_button", BI.RichEditorItalicButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorItalicButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorUnderlineButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorUnderlineButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "Underline",
+            tags: ["U"],
+            css: {textDecoration: "underline"}
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorUnderlineButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.underline = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            title: BI.i18nText("BI-Basic_Underline"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-underline-font",
+        });
+        this.underline.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+        this.underline.setSelected(true);
+    },
+
+    deactivate: function () {
+        this.underline.setSelected(false);
+    },
+});
+BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/**
+ * 颜色选择trigger
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorColorChooserTrigger
+ * @extends BI.Widget
+ */
+BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
+        return BI.extend(conf, {
+            width: 20,
+            height: 20
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments);
+        this.font = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-color-font"
+        });
+
+        this.underline = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-color-underline-font"
+        });
+
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: this.font,
+                top: 2,
+                left: 2
+            }, {
+                el: this.underline,
+                top: 7,
+                left: 2
+            }]
+        })
+    },
+
+    setValue: function (color) {
+        this.underline.element.css("color", color);
+    },
+
+    getValue: function () {
+        return this.font.element.css("color");
+    }
+});
+BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorBackgroundColorChooser
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.colorchooser = BI.createWidget({
+            type: "bi.color_chooser",
+            element: this,
+            width: o.width,
+            height: o.height,
+            el: {
+                type: "bi.rich_editor_background_color_chooser_trigger",
+                title: BI.i18nText("BI-Widget_Background_Colour"),
+                cls: "text-toolbar-button"
+            }
+        });
+        this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () {
+            var backgroundColor = this.getValue();
+            o.editor.element.css({
+                backgroundColor: backgroundColor,
+                color: BI.DOM.getContrastColor(backgroundColor)
+            });
+            this.setValue("");
+        });
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorColorChooser
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "foreColor"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorColorChooser.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.colorchooser = BI.createWidget({
+            type: "bi.color_chooser",
+            element: this,
+            width: o.width,
+            height: o.height,
+            el: {
+                type: "bi.rich_editor_color_chooser_trigger",
+                title: BI.i18nText("BI-Font_Colour"),
+                cls: "text-toolbar-button"
+            }
+        });
+        this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () {
+            self.doCommand(this.getValue());
+        });
+
+    },
+
+    deactivate: function () {
+        this.colorchooser.setValue("");
+    }
+});
+BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/**
+ * 字体大小选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorSizeChooser
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-rich-editor-size-chooser bi-border bi-card",
+            command: "FontSize",
+            width: 50,
+            height: 20
+        });
+    },
+
+    _items: [{
+        value: 1,
+        text: "1(8pt)"
+    }, {
+        value: 2,
+        text: "2(10pt)"
+    }, {
+        value: 3,
+        text: "3(12pt)"
+    }, {
+        value: 4,
+        text: "4(14pt)"
+    }, {
+        value: 5,
+        text: "5(18pt)"
+    }, {
+        value: 6,
+        text: "6(24pt)"
+    }],
+
+    _init: function () {
+        BI.RichEditorSizeChooser.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.trigger = BI.createWidget({
+            type: "bi.text_trigger",
+            readonly: true,
+            height: o.height,
+            triggerWidth: 12,
+            text: BI.i18nText("BI-Font_Size")
+        });
+
+        this.combo = BI.createWidget({
+            type: "bi.combo",
+            element: this,
+            el: this.trigger,
+            adjustLength: 1,
+            popup: {
+                maxWidth: 70,
+                minWidth: 70,
+                el: {
+                    type: "bi.button_group",
+                    items: BI.createItems(this._items, {
+                        type: "bi.single_select_item"
+                    }),
+                    layouts: [{
+                        type: "bi.vertical"
+                    }]
+                }
+            }
+        });
+        this.combo.on(BI.Combo.EVENT_CHANGE, function () {
+            var val = this.getValue()[0];
+            self.doCommand(val);
+            this.hideView();
+            this.setValue([]);
+        })
+    }
+});
+BI.shortcut('bi.rich_editor_size_chooser', BI.RichEditorSizeChooser);/**
+ * 富文本编辑器
+ *
+ * Created by GUY on 2017/9/15.
+ * @class BI.RichEditor
+ * @extends BI.Widget
+ */
+BI.RichEditor = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditor.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-rich-editor bi-card",
+            toolbar: {}
+        });
+    },
+    _init: function () {
+        BI.RichEditor.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.editor = BI.createWidget({
+            type: "bi.nic_editor",
+            width: o.width,
+            height: o.height
+        });
+
+        this.editor.on(BI.NicEditor.EVENT_BLUR, function () {
+            self.fireEvent(BI.RichEditor.EVENT_CONFIRM);
+        });
+
+        this.combo = BI.createWidget({
+            type: "bi.combo",
+            element: this,
+            toggle: false,
+            direction: "top",
+            isNeedAdjustWidth: false,
+            isNeedAdjustHeight: false,
+            adjustLength: 1,
+            el: this.editor,
+            popup: {
+                el: BI.extend({
+                    type: "bi.rich_editor_text_toolbar",
+                    editor: this.editor
+                }, o.toolbar),
+                height: 30,
+                stopPropagation: true,
+                stopEvent: true
+            }
+        });
+
+        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
+        });
+    },
+
+    setValue: function (v) {
+        this.editor.setValue(v);
+    },
+
+    getValue: function () {
+        return this.editor.getValue();
+    }
+});
+BI.RichEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
+BI.shortcut('bi.rich_editor', BI.RichEditor);/**
 * 超链接
 *
 * Created by GUY on 2015/9/9.
--- a/bi/case.js
+++ b/bi/case.js
@ -12628,15 +12628,15 @@ BI.shortcut("bi.icon_text_trigger", BI.IconTextTrigger);/**
 */
 BI.TextTrigger = BI.inherit(BI.Trigger, {
    _const: {
-        hgap: 4,
-        triggerWidth: 30
+        hgap: 4
    },

    _defaultConfig: function () {
        var conf = BI.TextTrigger.superclass._defaultConfig.apply(this, arguments);
        return BI.extend(conf, {
            baseCls: (conf.baseCls || "") + " bi-text-trigger",
-            height: 30
+            height: 30,
+            triggerWidth: 30
        });
    },

@ -12648,12 +12648,13 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
            textAlign: "left",
            height: o.height,
            text: o.text,
-            hgap: c.hgap
+            hgap: c.hgap,
+            readonly: o.readonly
        });
        this.trigerButton = BI.createWidget({
            type: "bi.trigger_icon_button",
            cls: "bi-border-left",
-            width: c.triggerWidth
+            width: o.triggerWidth
        });

        BI.createWidget({
@ -12664,7 +12665,7 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
                    el: this.text
                }, {
                    el: this.trigerButton,
-                    width: c.triggerWidth
+                    width: o.triggerWidth
                }
            ]
        });
@ -12794,14 +12795,14 @@ BI.shortcut("bi.small_select_text_trigger", BI.SmallSelectTextTrigger);/**
 BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
    _const: {
        hgap: 4,
-        triggerWidth: 20
    },

    _defaultConfig: function () {
        var conf = BI.SmallTextTrigger.superclass._defaultConfig.apply(this, arguments);
        return BI.extend(conf, {
            baseCls: (conf.baseCls || "") + " bi-text-trigger",
-            height: 20
+            height: 20,
+            triggerWidth: 20
        });
    },

@ -12817,7 +12818,7 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
        });
        this.trigerButton = BI.createWidget({
            type: "bi.trigger_icon_button",
-            width: c.triggerWidth
+            width: o.triggerWidth
        });

        BI.createWidget({
@ -12828,7 +12829,7 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
                    el: this.text
                }, {
                    el: this.trigerButton,
-                    width: c.triggerWidth
+                    width: o.triggerWidth
                }
            ]
        });
--- a/bi/core.css
+++ b/bi/core.css
@ -220,6 +220,13 @@ input::-moz-focus-inner {
  border: 0;
  padding: 0;
 }
+input::-webkit-contacts-auto-fill-button {
+  visibility: hidden;
+  display: none !important;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+}
 textarea {
  overflow: auto;
  vertical-align: top;
@ -267,7 +274,6 @@ li {
  list-style-type: none;
 }
 i {
-  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
@ -1338,6 +1344,32 @@ i {
  -o-flex-wrap: nowrap;
  flex-wrap: nowrap;
 }
+.bi-flex-vertical-center.stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 09版 */
+  -webkit-box-pack: center;
+  /* 12版 */
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  -o-justify-content: center;
+  justify-content: center;
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
 .bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
  display: box;
  /* OLD - Android 4.4- */
@ -1494,6 +1526,33 @@ i {
  min-height: 100%;
  float: left;
 }
+.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
+  width: 100%;
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 09版 */
+  -webkit-box-pack: center;
+  /* 12版 */
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  -o-justify-content: center;
+  justify-content: center;
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
 .bi-inline-center-adapt-layout:after {
  display: inline-block;
  width: 0;
--- a/bi/core.js
+++ b/bi/core.js
@ -4190,12 +4190,14 @@ _.extend(BI, {
    HorizontalAlign: {
        Left: "left",
        Right: "right",
-        Center: "center"
+        Center: "center",
+        Stretch: "stretch"
    },
    VerticalAlign: {
        Middle: "middle",
        Top: "top",
-        Bottom: "bottom"
+        Bottom: "bottom",
+        Stretch: "stretch"
    }
 });/**
 * 客户端观察者，主要处理事件的添加、删除、执行等
@ -5082,7 +5084,7 @@ BI.Widget = BI.inherit(BI.OB, {
            return this.attributes[attr];
        }
        var sta = _.result(this, "_static");
-        return BI.isFunction(sta[attr]) ? sta[attr].apply(this, BI.values(arguments).slice(1)) : sta[attr];
+        return BI.isFunction(sta[attr]) ? sta[attr].apply(this, Array.prototype.slice.apply(arguments, [1])) : sta[attr];
    },

    get: function () {
@ -9210,14 +9212,23 @@ BI.IntegerBufferSet.prototype = {
 })();window.BI = window.BI || {};

 $.extend(BI, {
-    $defaultImport: function (options) {
-        var config = $.extend({
+    $defaultImport: function (options, type) {
+        var config;
+        if (BI.isObject(options)) {
+            config = $.extend({
                op: 'resource',
                path: null,
                type: null,
                must: false
            }, options);
            config.url = BI.servletURL + '?op=' + config.op + '&resource=' + config.path;
+        } else {
+            config = {
+                url: BI.servletURL + "?op=resource&resource=" + options,
+                type: arguments[1],
+                must: arguments[2]
+            }
+        }
        this.$import(config.url, config.type, config.must);
    },
    $import: function () {
@ -12104,6 +12115,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
    props: {
        baseCls: "bi-vertical-adapt-layout",
        columnSize: [],
+        horizontalAlign: BI.HorizontalAlign.Left,
        hgap: 0,
        vgap: 0,
        lgap: 0,
@ -12113,8 +12125,10 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
    },
    render: function () {
        BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
+        var o = this.options;
        this.$table = $("<table>").attr({"cellspacing": 0, "cellpadding": 0}).css({
            "position": "relative",
+            "width": o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
            "height": "100%",
            "white-space": "nowrap",
            "border-spacing": "0px",
@ -12459,7 +12473,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-horizontal-layout",
-            verticalAlign: "middle",
+            verticalAlign: BI.VerticalAlign.Middle,
            columnSize: [],
            scrollx: true,
            hgap: 0,
@ -12524,6 +12538,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-vertical-center",
+            horizontalAlign: BI.HorizontalAlign.Left,
            columnSize: [],
            hgap: 0,
            vgap: 0,
@ -12536,6 +12551,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    render: function () {
        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
        var o = this.options;
+        this.element.addClass(o.horizontalAlign);
        this.populate(this.options.items);
    },

@ -12641,9 +12657,9 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: "middle",
+            verticalAlign: BI.VerticalAlign.Middle,
            columnSize: [],
-            scrollx: true,
+            // scrollable: true,
            hgap: 0,
            vgap: 0,
            lgap: 0,
@ -12726,7 +12742,9 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-wrapper-vertical-center clearfix",
+            horizontalAlign: BI.HorizontalAlign.Middle,
            columnSize: [],
+            // scrollable: true,
            hgap: 0,
            vgap: 0,
            lgap: 0,
@ -12738,7 +12756,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    render: function () {
        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
        var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper");
+        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
        this.populate(this.options.items);
    },

--- a/bi/slider.css
+++ b/bi/slider.css
@ -0,0 +1,20 @@
+.bi-single-slider-slider .slider-button {
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+}
+.bi-slider-track .gray-track {
+  background-color: rgba(153, 153, 153, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.bi-slider-track .blue-track {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
--- a/bi/slider.js
+++ b/bi/slider.js
@ -45,13 +45,15 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
    },
    _defaultConfig: function () {
        return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-single-slider bi-slider-track"
+            baseCls: "bi-single-slider bi-slider-track",
+            digit: ""
        });
    },
    _init: function () {
        BI.SingleSlider.superclass._init.apply(this, arguments);

-        var self = this;
+        var self = this, o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
        var c = this._constant;
        this.enable = false;
        this.value = "";
@ -81,8 +83,10 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                self._setBlueTrack(significantPercent);
                self._setLabelPosition(significantPercent);
                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
                self.label.setValue(v);
                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
            },
            stop: function (e, ui) {
                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
@ -117,6 +121,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                var significantPercent = BI.parseFloat(percent.toFixed(1));
                self._setAllPosition(significantPercent);
                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
                self.label.setValue(v);
                self.value = v;
                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
@ -138,10 +143,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
        });
        this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
            var v = BI.parseFloat(this.getValue());
-            self.value = v;
            var percent = self._getPercentByValue(v);
            var significantPercent = BI.parseFloat(percent.toFixed(1));
            self._setAllPosition(significantPercent);
+            v = digitExist ? v.toFixed(o.digit) : v;
+            this.setValue(v);
+            self.value = v;
            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
        });
        this._setVisible(false);
@ -262,7 +269,10 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
    },

    setValue: function (v) {
+        var o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
        var value = BI.parseFloat(v);
+        value = digitExist ? value.toFixed(o.digit) : value;
        if ((!isNaN(value))) {
            if (this._checkValidation(value)) {
                this.value = value;
@ -311,6 +321,279 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
 });
 BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.single_slider", BI.SingleSlider);/**
+ * Created by Urthur on 2017/9/12.
+ */
+BI.SingleSliderLabel = BI.inherit(BI.Widget, {
+    _constant: {
+        EDITOR_WIDTH: 90,
+        EDITOR_HEIGHT: 30,
+        HEIGHT: 28,
+        SLIDER_WIDTH_HALF: 15,
+        SLIDER_WIDTH: 30,
+        SLIDER_HEIGHT: 30,
+        TRACK_HEIGHT: 24
+    },
+    _defaultConfig: function () {
+        return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider bi-slider-track",
+            digit: "",
+            unit: ""
+        });
+    },
+    _init: function () {
+        BI.SingleSliderLabel.superclass._init.apply(this, arguments);
+
+        var self = this, o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
+        var c = this._constant;
+        this.enable = false;
+        this.value = "";
+
+        this.grayTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "gray-track",
+            height: 6
+        });
+        this.blueTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "blue-track bi-high-light-background",
+            height: 6
+        });
+        this.track = this._createTrackWrapper();
+
+        this.slider = BI.createWidget({
+            type: "bi.single_slider_button"
+        });
+        this.slider.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
+                self.label.setText(v + o.unit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        });
+        var sliderVertical = BI.createWidget({
+            type: "bi.vertical",
+            items: [{
+                type: "bi.absolute",
+                items: [this.slider]
+            }],
+            hgap: c.SLIDER_WIDTH_HALF,
+            height: c.SLIDER_HEIGHT
+        });
+        sliderVertical.element.click(function (e) {
+            if (self.enable) {
+                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
+                var trackLength = self.track.element[0].scrollWidth;
+                var percent = 0;
+                if (offset < 0) {
+                    percent = 0
+                }
+                if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
+                    percent = offset * 100 / self._getGrayTrackLength();
+                }
+                if (offset > (trackLength - c.SLIDER_WIDTH)) {
+                    percent = 100
+                }
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setAllPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
+                self.label.setText(v + o.unit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        });
+        this.label = BI.createWidget({
+            type: "bi.label",
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH - 2
+        });
+
+        this._setVisible(false);
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.track,
+                            width: "100%",
+                            height: c.TRACK_HEIGHT
+                        }]
+                    }],
+                    hgap: 7,
+                    height: c.TRACK_HEIGHT
+                },
+                top: 33,
+                left: 0,
+                width: "100%"
+            }, {
+                el: sliderVertical,
+                top: 30,
+                left: 0,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [this.label]
+                    }],
+                    rgap: c.EDITOR_WIDTH,
+                    height: c.EDITOR_HEIGHT
+                },
+                top: 10,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _createTrackWrapper: function () {
+        return BI.createWidget({
+            type: "bi.absolute",
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.grayTrack,
+                            top: 0,
+                            left: 0,
+                            width: "100%"
+                        }, {
+                            el: this.blueTrack,
+                            top: 0,
+                            left: 0,
+                            width: "0%"
+                        }]
+                    }],
+                    hgap: 8,
+                    height: 8
+                },
+                top: 8,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _checkValidation: function (v) {
+        return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
+    },
+
+    _setBlueTrack: function (percent) {
+        this.blueTrack.element.css({"width": percent + "%"});
+    },
+
+    _setLabelPosition: function (percent) {
+        this.label.element.css({"left": percent + "%"});
+    },
+
+    _setSliderPosition: function (percent) {
+        this.slider.element.css({"left": percent + "%"});
+    },
+
+    _setAllPosition: function (percent) {
+        this._setSliderPosition(percent);
+        this._setLabelPosition(percent);
+        this._setBlueTrack(percent);
+    },
+
+    _setVisible: function (visible) {
+        this.slider.setVisible(visible);
+        this.label.setVisible(visible);
+    },
+
+    _getGrayTrackLength: function () {
+        return this.grayTrack.element[0].scrollWidth
+    },
+
+    _getValueByPercent: function (percent) {
+        var thousandth = BI.parseInt(percent * 10);
+        return (((this.max - this.min) * thousandth) / 1000 + this.min);
+    },
+
+    _getPercentByValue: function (v) {
+        return (v - this.min) * 100 / (this.max - this.min);
+    },
+
+    getValue: function () {
+        return this.value;
+    },
+
+    setValue: function (v) {
+        var o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
+        var value = BI.parseFloat(v);
+        value = digitExist ? value.toFixed(o.digit) : value;
+        if ((!isNaN(value))) {
+            if (this._checkValidation(value)) {
+                this.value = value;
+            }
+            if (value > this.max) {
+                this.value = this.max;
+            }
+            if (value < this.min) {
+                this.value = this.min;
+            }
+        }
+    },
+
+    setMinAndMax: function (v) {
+        var minNumber = BI.parseFloat(v.min);
+        var maxNumber = BI.parseFloat(v.max);
+        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+            this.min = minNumber;
+            this.max = maxNumber;
+        }
+    },
+
+    reset: function () {
+        this._setVisible(false);
+        this.enable = false;
+        this.value = "";
+        this.min = 0;
+        this.max = 0;
+        this._setBlueTrack(0);
+    },
+
+    populate: function () {
+        var o = this.options;
+        if (!isNaN(this.min) && !isNaN(this.max)) {
+            this._setVisible(true);
+            this.enable = true;
+            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+                this.label.setValue(this.value + o.unit);
+                this._setAllPosition(this._getPercentByValue(this.value));
+            } else {
+                this.label.setValue(this.max + o.unit);
+                this._setAllPosition(100);
+            }
+        }
+    }
+});
+BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);/**
 * normal single slider
 * Created by Young on 2017/6/21.
 */
--- a/bi/widget.js
+++ b/bi/widget.js
@ -10650,10 +10650,12 @@ BI.MultiSelectList = BI.inherit(BI.Widget, {
                    if (obj instanceof BI.MultiSelectBar) {
                        self._joinAll(this.getValue(), function () {
                            assertShowValue();
+                            self.fireEvent(BI.MultiSelectList.EVENT_CHANGE);
                        });
                    } else {
                        self._join(this.getValue(), function () {//安徽省 北京
                            assertShowValue();
+                            self.fireEvent(BI.MultiSelectList.EVENT_CHANGE);
                        });
                    }
                }
--- a/demo/js/base/editor/demo.rich_editor.js
+++ b/demo/js/base/editor/demo.rich_editor.js
@ -0,0 +1,25 @@
+Demo.RichEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-rich-editor"
+    },
+    render: function () {
+        this.editor = BI.createWidget({
+            type: "bi.rich_editor",
+            cls: "mvc-border",
+            width: 600,
+            height: 400
+        });
+        BI.createWidget({
+            type: "bi.vertical",
+            element: this,
+            hgap: 30,
+            vgap: 50,
+            items: [this.editor]
+        })
+    },
+
+    mounted: function(){
+        this.editor.setValue('这是一条<font size="4" color="#009de3">测试</font>数据')
+    }
+});
+BI.shortcut("demo.rich_editor", Demo.RichEditor);
--- a/demo/js/config/base.js
+++ b/demo/js/config/base.js
@ -66,6 +66,10 @@ Demo.BASE_CONFIG = [{
    pId: 202,
    text: "bi.formula_editor",
    value: "demo.formula_editor"
+}, {
+    pId: 202,
+    text: "bi.rich_editor",
+    value: "demo.rich_editor"
 }, {
    pId: 2,
    id: 203,
--- a/demo/js/widget/slider/demo.slider.js
+++ b/demo/js/widget/slider/demo.slider.js
@ -14,6 +14,7 @@ Demo.Slider = BI.inherit(BI.Widget, {

        var singleSlider = BI.createWidget({
            type: "bi.single_slider",
+            digit: 0,
            width: 300,
            height: 50
        });
@ -23,21 +24,36 @@ Demo.Slider = BI.inherit(BI.Widget, {
            max: 100
        });

+        singleSlider.setValue(30);
        singleSlider.populate();
+        singleSlider.on(BI.SingleSlider.EVENT_CHANGE, function () {
+            console.log(this.getValue());
+        });
+
+        var singleSliderLabel = BI.createWidget({
+            type: "bi.single_slider_label",
+            height: 30,
+            width: 300,
+            digit: 0,
+            unit: "个"
+        });
+        singleSliderLabel.setMinAndMax({
+            min: 0,
+            max: 100
+        });
+        singleSliderLabel.setValue(10);
+        singleSliderLabel.populate();

        var normalSingleSlider = BI.createWidget({
            type: "bi.single_slider_normal",
            height: 30,
            width: 300
        });
-
        normalSingleSlider.setMinAndMax({
            min: 0,
            max: 100
        });
-
        normalSingleSlider.setValue(10);
-
        normalSingleSlider.populate();

        BI.createWidget({
@ -59,6 +75,14 @@ Demo.Slider = BI.inherit(BI.Widget, {
                    }]
                },
                height: 200
+            }, {
+                el: {
+                    type: "bi.center_adapt",
+                    items: [{
+                        el: singleSliderLabel
+                    }]
+                },
+                height: 200
            }],
            hgap: 20
        });
--- a/demo/version.js
+++ b/demo/version.js
@ -2,7 +2,9 @@ Demo = {
    version: 1.0
 };

-
+if (!window.BI) {
+    window.BI = {};
+}
 BI.servletURL = "";
 BI.resourceURL = "resource/";
 BI.i18n = {
--- a/dist/base.css
+++ b/dist/base.css
@ -275,10 +275,11 @@
  color: #00c;
 }
 .cm-s-default span[class*="fieldName"] {
+  display: inline-block;
  color: white;
-  padding: 1px;
-  margin: 1px 0px;
  background: #3f8ce8;
+  padding: 0 5px;
+  margin: 1px 1px;
 }
 .cm-s-default span[class*="start"] {
  -webkit-border-radius: 3px 0px 0px 3px;
@ -616,6 +617,9 @@ li.CodeMirror-hint-active {
 .bi-direction-pager .direction-pager-next {
  font-size: 16px;
 }
+.bi-rich-editor-text-toolbar .text-toolbar-button {
+  font-size: 16px;
+}
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-segment > .center-element {
@ -815,6 +819,22 @@ li.CodeMirror-hint-active {
 /**** custom color(自定义颜色,用于特定场景) ****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
+.bi-code-editor .param {
+  color: #ffffff;
+  padding: 0 5px;
+  margin: 1px 1px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #3f8ce8;
+  display: inline-block;
+}
+.bi-code-editor .error-param {
+  color: #e85050;
+  padding: 0 5px;
+  margin: 1px 1px;
+  display: inline-block;
+}
 .bi-editor {
  font-size: 12px;
 }
--- a/dist/base.js
+++ b/dist/base.js
@ -3024,6 +3024,9 @@ BI.Combo = BI.inherit(BI.Widget, {
                    var debounce = BI.debounce(function (e) {
                        if (self.combo.element.__isMouseInBounds__(e)) {
                            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) {
+                                if (!o.toggle && self.isViewVisible()) {
+                                    return;
+                                }
                                o.toggle ? self._toggle() : self._popupView();
                                if (self.isViewVisible()) {
                                    self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo);
@ -3040,6 +3043,33 @@ BI.Combo = BI.inherit(BI.Widget, {
                        st(e);
                    });
                    break;
+                case "click-hover":
+                    var debounce = BI.debounce(function (e) {
+                        if (self.combo.element.__isMouseInBounds__(e)) {
+                            if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid()) {
+                                if (self.isViewVisible()) {
+                                    return;
+                                }
+                                self._popupView();
+                                if (self.isViewVisible()) {
+                                    self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EXPAND, "", self.combo);
+                                    self.fireEvent(BI.Combo.EVENT_EXPAND);
+                                }
+                            }
+                        }
+                    }, BI.EVENT_RESPONSE_TIME, true);
+                    self.element.off("click." + self.getName()).on("click." + self.getName(), function (e) {
+                        debounce(e);
+                        st(e);
+                    });
+                    self.element.on("mouseleave." + self.getName(), function (e) {
+                        if (self.isEnabled() && self.isValid() && self.combo.isEnabled() && self.combo.isValid() && o.toggle === true) {
+                            self._hideView();
+                            self.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.COLLAPSE, "", self.combo);
+                            self.fireEvent(BI.Combo.EVENT_COLLAPSE);
+                        }
+                    });
+                    break;
            }
        });
    },
@ -16057,6 +16087,941 @@ BI.Pager = BI.inherit(BI.Widget, {
 BI.Pager.EVENT_CHANGE = "EVENT_CHANGE";
 BI.Pager.EVENT_AFTER_POPULATE = "EVENT_AFTER_POPULATE";
 BI.shortcut("bi.pager", BI.Pager);/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.TextToolbar
+ * @extends BI.Widget
+ */
+BI.RichEditorAction = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAction.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "",
+            disabled: true
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAction.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        o.editor.on(BI.NicEditor.EVENT_SELECTED, function (ins, target) {
+            self.setEnable(true);
+            self.checkNodes(target);
+        });
+        o.editor.on(BI.NicEditor.EVENT_BLUR, function () {
+            self.setEnable(false);
+        });
+        o.editor.on(BI.NicEditor.EVENT_KEY, BI.bind(this.key, this));
+    },
+
+    checkNodes: function (e) {
+        if (!e) {
+            return false;
+        }
+        var elm = e;
+        do {
+            if (this.options.tags && this.options.tags.contains(elm.nodeName)) {
+                this.activate();
+                return true;
+            }
+        } while (elm = elm.parentNode && elm.className && elm.className.indexOf("bi-nic-editor") >= -1);
+        elm = e;
+        while (elm.nodeType == 3) {
+            elm = elm.parentNode;
+        }
+        if (this.options.css) {
+            for (var itm in this.options.css) {
+                if ($(elm).css(itm) == this.options.css[itm]) {
+                    this.activate();
+                    return true;
+                }
+            }
+        }
+        this.deactivate();
+        return false;
+    },
+
+    key: function () {
+
+    },
+
+    activate: function () {
+    },
+
+    deactivate: function () {
+    },
+
+    doCommand: function (args) {
+        if (this.options.command) {
+            this.options.editor.nicCommand(this.options.command, args);
+        }
+        this.options.editor.fireEvent("buttonClick", this);
+    }
+});/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorTextToolbar
+ * @extends BI.Widget
+ */
+BI.RichEditorTextToolbar = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorTextToolbar.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-rich-editor-text-toolbar bi-background",
+            buttons: [
+                {type: "bi.rich_editor_size_chooser"},
+                {type: "bi.rich_editor_bold_button"},
+                {type: "bi.rich_editor_italic_button"},
+                {type: "bi.rich_editor_underline_button"},
+                {type: "bi.rich_editor_color_chooser"},
+                {type: "bi.rich_editor_background_color_chooser"},
+                {type: "bi.rich_editor_align_left_button"},
+                {type: "bi.rich_editor_align_center_button"},
+                {type: "bi.rich_editor_align_right_button"},
+            ],
+            height: 28
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorTextToolbar.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        BI.createWidget({
+            type: "bi.left",
+            element: this,
+            items: BI.map(o.buttons, function (i, btn) {
+                return BI.extend(btn, {
+                    editor: o.editor
+                });
+            }),
+            hgap: 3,
+            vgap: 3
+        })
+    },
+
+    mounted: function () {
+        var self = this;
+        if (BI.isIE9Below()) {//IE8下必须要设置unselectable才能不blur输入框
+            this.element.mousedown(function () {
+                self._noSelect(self.element[0]);
+            });
+            this._noSelect(this.element[0]);
+        }
+    },
+
+    _noSelect: function (element) {
+        if (element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') {
+            element.setAttribute('unselectable', 'on');
+        }
+        for (var i = 0; i < element.childNodes.length; i++) {
+            this._noSelect(element.childNodes[i]);
+        }
+    }
+});
+BI.shortcut('bi.rich_editor_text_toolbar', BI.RichEditorTextToolbar);/**
+ * 富文本编辑器
+ *
+ * Created by GUY on 2017/9/15.
+ * @class BI.NicEditor
+ * @extends BI.Widget
+ */
+!(function () {
+    BI.NicEditor = BI.inherit(BI.Widget, {
+        _defaultConfig: function () {
+            return BI.extend(BI.NicEditor.superclass._defaultConfig.apply(this, arguments), {
+                baseCls: "bi-nic-editor"
+            });
+        },
+        _init: function () {
+            BI.NicEditor.superclass._init.apply(this, arguments);
+            var o = this.options;
+            $(document).bind("mousedown." + this.getName(), BI.bind(this.selectCheck, this));
+            BI.createWidget({
+                type: "bi.vertical",
+                element: this,
+                items: [{
+                    type: "bi.layout",
+                    height: 1
+                }, this.instance = this.addInstance()]
+            })
+        },
+
+        addInstance: function () {
+            var o = this.options;
+            var conf = {
+                ne: this,
+                height: o.height - 1,
+                maxHeight: o.maxHeight ? o.maxHeight : null
+            };
+            if (this.element[0].contentEditable || !!window.opera) {
+                var newInstance = new nicEditorInstance(conf);
+            } else {
+                console.error("不支持此浏览器");
+            }
+            return newInstance;
+        },
+
+        nicCommand: function (cmd, args) {
+            if (this.selectedInstance) {
+                this.selectedInstance.nicCommand(cmd, args);
+            }
+        },
+
+        selectCheck: function (e) {
+            var t = e.target;
+            var found = false;
+            do {
+                if (t.nodeName !== "svg" && t.className && t.className.indexOf(prefix) != -1) {
+                    return;
+                    // return false;
+                }
+            } while (t = t.parentNode);
+            this.fireEvent('blur', this.selectedInstance, t);
+            this.lastSelectedInstance = this.selectedInstance;
+            this.selectedInstance = null;
+            // return false;
+        },
+
+        setValue: function (v) {
+            this.instance.setContent(v);
+        },
+
+        getValue: function () {
+            return this.instance.getContent();
+        },
+
+        destroyed: function () {
+            $(document).unbind("mousedown." + this.getName());
+        }
+    });
+    BI.NicEditor.EVENT_SELECTED = "selected";
+    BI.NicEditor.EVENT_BLUR = "blur";
+    BI.NicEditor.EVENT_KEY = "key";
+    BI.shortcut('bi.nic_editor', BI.NicEditor);
+
+    var prefix = "niceditor-";
+
+    var nicEditorInstance = BI.inherit(BI.Layout, {
+        isSelected: false,
+        _init: function () {
+            nicEditorInstance.superclass._init.apply(this, arguments);
+            var o = this.options;
+            this.ne = this.options.ne;
+            this.elm = BI.createWidget({
+                type: "bi.layout",
+                width: o.width - 8,
+                scrollable: false
+            });
+            this.elm.element.css({
+                margin: "4px",
+                minHeight: (o.height - 8) + "px",
+                outline: "none"
+            }).html(o.value);
+
+            this.element.css("maxHeight", (o.maxHeight) ? o.maxHeight + 'px' : null);
+
+            this.e = BI.createWidget({
+                type: "bi.layout",
+                invisible: true,
+                tagName: "textarea"
+            });
+            BI.createWidget({
+                type: "bi.default",
+                element: this,
+                scrolly: true,
+                items: [this.elm, this.e]
+            });
+
+            this.ne.on("blur", BI.bind(this.blur, this));
+
+            this.start();
+            this.blur();
+        },
+
+        start: function () {
+            this.elm.element.attr("contentEditable", true);
+            if (this.getContent() == "") {
+                this.setContent("<br />");
+            }
+            this.instanceDoc = document.defaultView;
+            this.elm.element.on('mousedown', BI.bind(this.selected, this));
+            this.elm.element.on('keypress', BI.bind(this.keyDown, this));
+            this.elm.element.on('focus', BI.bind(this.selected, this));
+            this.elm.element.on('blur', BI.bind(this.blur, this));
+            this.elm.element.on('keyup', BI.bind(this.selected, this));
+            this.ne.fireEvent('add', this);
+        },
+
+        disable: function () {
+            this.elm.element.attr("contentEditable", false);
+        },
+
+        getSel: function () {
+            return (window.getSelection) ? window.getSelection() : document.selection;
+        },
+
+        getRng: function () {
+            var s = this.getSel();
+            if (!s || s.rangeCount === 0) {
+                return;
+            }
+            return (s.rangeCount > 0) ? s.getRangeAt(0) : s.createRange();
+        },
+
+        selRng: function (rng, s) {
+            if (window.getSelection) {
+                s.removeAllRanges();
+                s.addRange(rng);
+            } else {
+                rng.select();
+            }
+        },
+
+        selElm: function () {
+            var r = this.getRng();
+            if (!r) {
+                return;
+            }
+            if (r.startContainer) {
+                var contain = r.startContainer;
+                if (r.cloneContents().childNodes.length == 1) {
+                    for (var i = 0; i < contain.childNodes.length; i++) {
+                        var rng = contain.childNodes[i].ownerDocument.createRange();
+                        rng.selectNode(contain.childNodes[i]);
+                        if (r.compareBoundaryPoints(Range.START_TO_START, rng) != 1 &&
+                            r.compareBoundaryPoints(Range.END_TO_END, rng) != -1) {
+                            return contain.childNodes[i];
+                        }
+                    }
+                }
+                return contain;
+            } else {
+                return (this.getSel().type == "Control") ? r.item(0) : r.parentElement();
+            }
+        },
+
+        saveRng: function () {
+            this.savedRange = this.getRng();
+            this.savedSel = this.getSel();
+        },
+
+        restoreRng: function () {
+            if (this.savedRange) {
+                this.selRng(this.savedRange, this.savedSel);
+            }
+        },
+
+        keyDown: function (e, t) {
+            if (e.ctrlKey) {
+                this.ne.fireEvent('key', this, e);
+            }
+        },
+
+        selected: function (e) {
+            var t = e.target;
+            if (!t && !(t = this.selElm())) {
+                t = this.selElm();
+            }
+            if (!e.ctrlKey) {
+                var selInstance = this.ne.selectedInstance;
+                if (selInstance != this) {
+                    if (selInstance) {
+                        this.ne.fireEvent('blur', selInstance, t);
+                    }
+                    this.ne.selectedInstance = this;
+                    this.ne.fireEvent('focus', selInstance, t);
+                }
+                this.ne.fireEvent('selected', selInstance, t);
+                this.isFocused = true;
+                this.elm.element.addClass(prefix + 'selected');
+            }
+            // return false;
+        },
+
+        blur: function () {
+            this.isFocused = false;
+            this.elm.element.removeClass(prefix + 'selected');
+        },
+
+        saveContent: function () {
+            this.ne.fireEvent('save', this);
+            this.e.element.value(this.getContent());
+        },
+
+        getElm: function () {
+            return this.elm;
+        },
+
+        getContent: function () {
+            this.content = this.getElm().element.html();
+            this.ne.fireEvent('get', this);
+            return this.content;
+        },
+
+        setContent: function (e) {
+            this.content = e;
+            this.ne.fireEvent('set', this);
+            this.elm.element.html(this.content);
+        },
+
+        nicCommand: function (cmd, args) {
+            document.execCommand(cmd, false, args);
+        }
+    });
+}());
+/**
+ * 颜色选择trigger
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorBackgroundChooserTrigger
+ * @extends BI.Widget
+ */
+BI.RichEditorBackgroundChooserTrigger = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        var conf = BI.RichEditorBackgroundChooserTrigger.superclass._defaultConfig.apply(this, arguments);
+        return BI.extend(conf, {
+            width: 20,
+            height: 20
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorBackgroundChooserTrigger.superclass._init.apply(this, arguments);
+        this.font = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-background-font"
+        });
+
+        this.underline = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-color-underline-font"
+        });
+
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: this.font,
+                top: 2,
+                left: 2
+            }, {
+                el: this.underline,
+                top: 7,
+                left: 2
+            }]
+        })
+    },
+
+    setValue: function (color) {
+        this.underline.element.css("color", color);
+    },
+
+    getValue: function () {
+        return this.font.element.css("color");
+    }
+});
+BI.shortcut('bi.rich_editor_background_color_chooser_trigger', BI.RichEditorBackgroundChooserTrigger);/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorAlignCenterButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorAlignCenterButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAlignCenterButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "justifycenter"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAlignCenterButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.align = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            forceNotSelected: true,
+            title: BI.i18nText("BI-Word_Align_Center"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-align-center-font",
+        });
+        this.align.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut("bi.rich_editor_align_center_button", BI.RichEditorAlignCenterButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorAlignLeftButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorAlignLeftButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAlignLeftButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "justifyleft"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAlignLeftButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.align = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            forceNotSelected: true,
+            title: BI.i18nText("BI-Word_Align_Left"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-align-left-font",
+        });
+        this.align.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut("bi.rich_editor_align_left_button", BI.RichEditorAlignLeftButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorAlignRightButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorAlignRightButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorAlignRightButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "justifyright"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorAlignRightButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.align = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            forceNotSelected: true,
+            title: BI.i18nText("BI-Word_Align_Right"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-align-right-font",
+        });
+        this.align.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut("bi.rich_editor_align_right_button", BI.RichEditorAlignRightButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorBoldButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorBoldButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorBoldButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "Bold",
+            tags: ["B", "STRONG"],
+            css: {fontWeight: "bold"}
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorBoldButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.bold = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            title: BI.i18nText("BI-Basic_Bold"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-bold-font",
+        });
+        this.bold.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+        this.bold.setSelected(true);
+    },
+
+    deactivate: function () {
+        this.bold.setSelected(false);
+    },
+});
+BI.shortcut("bi.rich_editor_bold_button", BI.RichEditorBoldButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorItalicButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorItalicButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorItalicButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "Italic",
+            tags: ["EM", "I"],
+            css: {fontStyle: "italic"}
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorItalicButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.italic = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            title: BI.i18nText("BI-Basic_Italic"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-italic-font",
+        });
+        this.italic.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+        this.italic.setSelected(true);
+    },
+
+    deactivate: function () {
+        this.italic.setSelected(false);
+    },
+});
+BI.shortcut("bi.rich_editor_italic_button", BI.RichEditorItalicButton)/**
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorItalicButton
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorUnderlineButton = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorUnderlineButton.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "Underline",
+            tags: ["U"],
+            css: {textDecoration: "underline"}
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorUnderlineButton.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.underline = BI.createWidget({
+            type: "bi.icon_button",
+            element: this,
+            title: BI.i18nText("BI-Basic_Underline"),
+            height: 20,
+            width: 20,
+            cls: "text-toolbar-button bi-list-item-active text-underline-font",
+        });
+        this.underline.on(BI.IconButton.EVENT_CHANGE, function () {
+            self.doCommand();
+        });
+    },
+    activate: function () {
+        this.underline.setSelected(true);
+    },
+
+    deactivate: function () {
+        this.underline.setSelected(false);
+    },
+});
+BI.shortcut("bi.rich_editor_underline_button", BI.RichEditorUnderlineButton)/**
+ * 颜色选择trigger
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorColorChooserTrigger
+ * @extends BI.Widget
+ */
+BI.RichEditorColorChooserTrigger = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        var conf = BI.RichEditorColorChooserTrigger.superclass._defaultConfig.apply(this, arguments);
+        return BI.extend(conf, {
+            width: 20,
+            height: 20
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorColorChooserTrigger.superclass._init.apply(this, arguments);
+        this.font = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-color-font"
+        });
+
+        this.underline = BI.createWidget({
+            type: "bi.icon_button",
+            cls: "text-color-underline-font"
+        });
+
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: this.font,
+                top: 2,
+                left: 2
+            }, {
+                el: this.underline,
+                top: 7,
+                left: 2
+            }]
+        })
+    },
+
+    setValue: function (color) {
+        this.underline.element.css("color", color);
+    },
+
+    getValue: function () {
+        return this.font.element.css("color");
+    }
+});
+BI.shortcut('bi.rich_editor_color_chooser_trigger', BI.RichEditorColorChooserTrigger);/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorBackgroundColorChooser
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorBackgroundColorChooser = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorBackgroundColorChooser.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorBackgroundColorChooser.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.colorchooser = BI.createWidget({
+            type: "bi.color_chooser",
+            element: this,
+            width: o.width,
+            height: o.height,
+            el: {
+                type: "bi.rich_editor_background_color_chooser_trigger",
+                title: BI.i18nText("BI-Widget_Background_Colour"),
+                cls: "text-toolbar-button"
+            }
+        });
+        this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () {
+            var backgroundColor = this.getValue();
+            o.editor.element.css({
+                backgroundColor: backgroundColor,
+                color: BI.DOM.getContrastColor(backgroundColor)
+            });
+            this.setValue("");
+        });
+    },
+
+    deactivate: function () {
+    }
+});
+BI.shortcut('bi.rich_editor_background_color_chooser', BI.RichEditorBackgroundColorChooser);/**
+ * 颜色选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorColorChooser
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorColorChooser = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorColorChooser.superclass._defaultConfig.apply(this, arguments), {
+            width: 20,
+            height: 20,
+            command: "foreColor"
+        });
+    },
+
+    _init: function () {
+        BI.RichEditorColorChooser.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.colorchooser = BI.createWidget({
+            type: "bi.color_chooser",
+            element: this,
+            width: o.width,
+            height: o.height,
+            el: {
+                type: "bi.rich_editor_color_chooser_trigger",
+                title: BI.i18nText("BI-Font_Colour"),
+                cls: "text-toolbar-button"
+            }
+        });
+        this.colorchooser.on(BI.ColorChooser.EVENT_CHANGE, function () {
+            self.doCommand(this.getValue());
+        });
+
+    },
+
+    deactivate: function () {
+        this.colorchooser.setValue("");
+    }
+});
+BI.shortcut('bi.rich_editor_color_chooser', BI.RichEditorColorChooser);/**
+ * 字体大小选择
+ *
+ * Created by GUY on 2015/11/26.
+ * @class BI.RichEditorSizeChooser
+ * @extends BI.RichEditorAction
+ */
+BI.RichEditorSizeChooser = BI.inherit(BI.RichEditorAction, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditorSizeChooser.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-rich-editor-size-chooser bi-border bi-card",
+            command: "FontSize",
+            width: 50,
+            height: 20
+        });
+    },
+
+    _items: [{
+        value: 1,
+        text: "1(8pt)"
+    }, {
+        value: 2,
+        text: "2(10pt)"
+    }, {
+        value: 3,
+        text: "3(12pt)"
+    }, {
+        value: 4,
+        text: "4(14pt)"
+    }, {
+        value: 5,
+        text: "5(18pt)"
+    }, {
+        value: 6,
+        text: "6(24pt)"
+    }],
+
+    _init: function () {
+        BI.RichEditorSizeChooser.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.trigger = BI.createWidget({
+            type: "bi.text_trigger",
+            readonly: true,
+            height: o.height,
+            triggerWidth: 12,
+            text: BI.i18nText("BI-Font_Size")
+        });
+
+        this.combo = BI.createWidget({
+            type: "bi.combo",
+            element: this,
+            el: this.trigger,
+            adjustLength: 1,
+            popup: {
+                maxWidth: 70,
+                minWidth: 70,
+                el: {
+                    type: "bi.button_group",
+                    items: BI.createItems(this._items, {
+                        type: "bi.single_select_item"
+                    }),
+                    layouts: [{
+                        type: "bi.vertical"
+                    }]
+                }
+            }
+        });
+        this.combo.on(BI.Combo.EVENT_CHANGE, function () {
+            var val = this.getValue()[0];
+            self.doCommand(val);
+            this.hideView();
+            this.setValue([]);
+        })
+    }
+});
+BI.shortcut('bi.rich_editor_size_chooser', BI.RichEditorSizeChooser);/**
+ * 富文本编辑器
+ *
+ * Created by GUY on 2017/9/15.
+ * @class BI.RichEditor
+ * @extends BI.Widget
+ */
+BI.RichEditor = BI.inherit(BI.Widget, {
+    _defaultConfig: function () {
+        return BI.extend(BI.RichEditor.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-rich-editor bi-card",
+            toolbar: {}
+        });
+    },
+    _init: function () {
+        BI.RichEditor.superclass._init.apply(this, arguments);
+        var self = this, o = this.options;
+        this.editor = BI.createWidget({
+            type: "bi.nic_editor",
+            width: o.width,
+            height: o.height
+        });
+
+        this.editor.on(BI.NicEditor.EVENT_BLUR, function () {
+            self.fireEvent(BI.RichEditor.EVENT_CONFIRM);
+        });
+
+        this.combo = BI.createWidget({
+            type: "bi.combo",
+            element: this,
+            toggle: false,
+            direction: "top",
+            isNeedAdjustWidth: false,
+            isNeedAdjustHeight: false,
+            adjustLength: 1,
+            el: this.editor,
+            popup: {
+                el: BI.extend({
+                    type: "bi.rich_editor_text_toolbar",
+                    editor: this.editor
+                }, o.toolbar),
+                height: 30,
+                stopPropagation: true,
+                stopEvent: true
+            }
+        });
+
+        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
+        });
+    },
+
+    setValue: function (v) {
+        this.editor.setValue(v);
+    },
+
+    getValue: function () {
+        return this.editor.getValue();
+    }
+});
+BI.RichEditor.EVENT_CONFIRM = "EVENT_CONFIRM";
+BI.shortcut('bi.rich_editor', BI.RichEditor);/**
 * 超链接
 *
 * Created by GUY on 2015/9/9.
--- a/dist/bundle.css
+++ b/dist/bundle.css
@ -220,6 +220,13 @@ input::-moz-focus-inner {
  border: 0;
  padding: 0;
 }
+input::-webkit-contacts-auto-fill-button {
+  visibility: hidden;
+  display: none !important;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+}
 textarea {
  overflow: auto;
  vertical-align: top;
@ -267,7 +274,6 @@ li {
  list-style-type: none;
 }
 i {
-  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
@ -1338,6 +1344,32 @@ i {
  -o-flex-wrap: nowrap;
  flex-wrap: nowrap;
 }
+.bi-flex-vertical-center.stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 09版 */
+  -webkit-box-pack: center;
+  /* 12版 */
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  -o-justify-content: center;
+  justify-content: center;
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
 .bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
  display: box;
  /* OLD - Android 4.4- */
@ -1494,6 +1526,33 @@ i {
  min-height: 100%;
  float: left;
 }
+.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
+  width: 100%;
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 09版 */
+  -webkit-box-pack: center;
+  /* 12版 */
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  -o-justify-content: center;
+  justify-content: center;
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
 .bi-inline-center-adapt-layout:after {
  display: inline-block;
  width: 0;
@ -1796,10 +1855,11 @@ i {
  color: #00c;
 }
 .cm-s-default span[class*="fieldName"] {
+  display: inline-block;
  color: white;
-  padding: 1px;
-  margin: 1px 0px;
  background: #3f8ce8;
+  padding: 0 5px;
+  margin: 1px 1px;
 }
 .cm-s-default span[class*="start"] {
  -webkit-border-radius: 3px 0px 0px 3px;
@ -2137,6 +2197,9 @@ li.CodeMirror-hint-active {
 .bi-direction-pager .direction-pager-next {
  font-size: 16px;
 }
+.bi-rich-editor-text-toolbar .text-toolbar-button {
+  font-size: 16px;
+}
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
 .bi-segment > .center-element {
@ -2336,6 +2399,22 @@ li.CodeMirror-hint-active {
 /**** custom color(自定义颜色,用于特定场景) ****/
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
+.bi-code-editor .param {
+  color: #ffffff;
+  padding: 0 5px;
+  margin: 1px 1px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #3f8ce8;
+  display: inline-block;
+}
+.bi-code-editor .error-param {
+  color: #e85050;
+  padding: 0 5px;
+  margin: 1px 1px;
+  display: inline-block;
+}
 .bi-editor {
  font-size: 12px;
 }
@ -3206,38 +3285,8 @@ li.CodeMirror-hint-active {
  box-sizing: border-box;
  /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
 }
-/****添加计算宽度的--运算符直接需要space****/
-/****** common color(常用颜色,可用于普遍场景) *****/
-/**** custom color(自定义颜色,用于特定场景) ****/
-.bi-single-slider-button .slider-button {
-  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 7px;
-  -moz-border-radius: 7px;
-  border-radius: 7px;
-}
-.bi-slider-track .gray-track {
-  background-color: rgba(153, 153, 153, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.bi-slider-track .blue-track {
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
 /****** common color(常用颜色,可用于普遍场景) *****/
 /**** custom color(自定义颜色,用于特定场景) ****/
-.bi-slider .bi-slider-track {
-  background-color: rgba(153, 153, 153, 0.3);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
 .bi-param-time-interval.time-error .bi-input {
  color: #e85050;
 }
@ -3406,6 +3455,10 @@ textarea::-webkit-scrollbar-thumb:hover {
  
  /*  iOS 4.1- */
 }
+@font-face {
+  font-family: 'bi';
+  src: url('https://fanruan.coding.me/fineui/dist/font/iconfont.eot') /* IE6-IE8 */;
+}
 .b-font {
  font-family: "bi";
  font-style: normal;
@ -4132,6 +4185,114 @@ textarea::-webkit-scrollbar-thumb:hover {
  content: "\e636";
  color: inherit;
 }
+.text-bold-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe64d;');
+}
+.text-bold-font .b-font:before {
+  content: "\e64d";
+  color: inherit;
+}
+.text-bold-font.native .b-font:before,
+.text-bold-font.disabled .b-font:before {
+  content: "\e64d";
+  color: inherit;
+}
+.text-italic-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe656;');
+}
+.text-italic-font .b-font:before {
+  content: "\e656";
+  color: inherit;
+}
+.text-italic-font.native .b-font:before,
+.text-italic-font.disabled .b-font:before {
+  content: "\e656";
+  color: inherit;
+}
+.text-underline-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe650;');
+}
+.text-underline-font .b-font:before {
+  content: "\e650";
+  color: inherit;
+}
+.text-underline-font.native .b-font:before,
+.text-underline-font.disabled .b-font:before {
+  content: "\e650";
+  color: inherit;
+}
+.text-color-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe69c;');
+}
+.text-color-font .b-font:before {
+  content: "\e69c";
+  color: inherit;
+}
+.text-color-font.native .b-font:before,
+.text-color-font.disabled .b-font:before {
+  content: "\e69c";
+  color: inherit;
+}
+.text-background-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe696;');
+}
+.text-background-font .b-font:before {
+  content: "\e696";
+  color: inherit;
+}
+.text-background-font.native .b-font:before,
+.text-background-font.disabled .b-font:before {
+  content: "\e696";
+  color: inherit;
+}
+.text-color-underline-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe69d;');
+}
+.text-color-underline-font .b-font:before {
+  content: "\e69d";
+  color: inherit;
+}
+.text-color-underline-font.native .b-font:before,
+.text-color-underline-font.disabled .b-font:before {
+  content: "\e69d";
+  color: inherit;
+}
+.text-align-left-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe654;');
+}
+.text-align-left-font .b-font:before {
+  content: "\e654";
+  color: inherit;
+}
+.text-align-left-font.native .b-font:before,
+.text-align-left-font.disabled .b-font:before {
+  content: "\e654";
+  color: inherit;
+}
+.text-align-center-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe64f;');
+}
+.text-align-center-font .b-font:before {
+  content: "\e64f";
+  color: inherit;
+}
+.text-align-center-font.native .b-font:before,
+.text-align-center-font.disabled .b-font:before {
+  content: "\e64f";
+  color: inherit;
+}
+.text-align-right-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe651;');
+}
+.text-align-right-font .b-font:before {
+  content: "\e651";
+  color: inherit;
+}
+.text-align-right-font.native .b-font:before,
+.text-align-right-font.disabled .b-font:before {
+  content: "\e651";
+  color: inherit;
+}
 .tree-collapse-icon-type1 .x-icon,
 .tree-collapse-icon-type1:hover .x-icon,
 .tree-collapse-icon-type1:active .x-icon {
--- a/dist/bundle.js
+++ b/dist/bundle.js
--- a/dist/bundle.min.css
+++ b/dist/bundle.min.css
--- a/dist/bundle.min.js
+++ b/dist/bundle.min.js
--- a/dist/case.js
+++ b/dist/case.js
@ -12628,15 +12628,15 @@ BI.shortcut("bi.icon_text_trigger", BI.IconTextTrigger);/**
 */
 BI.TextTrigger = BI.inherit(BI.Trigger, {
    _const: {
-        hgap: 4,
-        triggerWidth: 30
+        hgap: 4
    },

    _defaultConfig: function () {
        var conf = BI.TextTrigger.superclass._defaultConfig.apply(this, arguments);
        return BI.extend(conf, {
            baseCls: (conf.baseCls || "") + " bi-text-trigger",
-            height: 30
+            height: 30,
+            triggerWidth: 30
        });
    },

@ -12648,12 +12648,13 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
            textAlign: "left",
            height: o.height,
            text: o.text,
-            hgap: c.hgap
+            hgap: c.hgap,
+            readonly: o.readonly
        });
        this.trigerButton = BI.createWidget({
            type: "bi.trigger_icon_button",
            cls: "bi-border-left",
-            width: c.triggerWidth
+            width: o.triggerWidth
        });

        BI.createWidget({
@ -12664,7 +12665,7 @@ BI.TextTrigger = BI.inherit(BI.Trigger, {
                    el: this.text
                }, {
                    el: this.trigerButton,
-                    width: c.triggerWidth
+                    width: o.triggerWidth
                }
            ]
        });
@ -12794,14 +12795,14 @@ BI.shortcut("bi.small_select_text_trigger", BI.SmallSelectTextTrigger);/**
 BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
    _const: {
        hgap: 4,
-        triggerWidth: 20
    },

    _defaultConfig: function () {
        var conf = BI.SmallTextTrigger.superclass._defaultConfig.apply(this, arguments);
        return BI.extend(conf, {
            baseCls: (conf.baseCls || "") + " bi-text-trigger",
-            height: 20
+            height: 20,
+            triggerWidth: 20
        });
    },

@ -12817,7 +12818,7 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
        });
        this.trigerButton = BI.createWidget({
            type: "bi.trigger_icon_button",
-            width: c.triggerWidth
+            width: o.triggerWidth
        });

        BI.createWidget({
@ -12828,7 +12829,7 @@ BI.SmallTextTrigger = BI.inherit(BI.Trigger, {
                    el: this.text
                }, {
                    el: this.trigerButton,
-                    width: c.triggerWidth
+                    width: o.triggerWidth
                }
            ]
        });
--- a/dist/config.js
+++ b/dist/config.js
@ -0,0 +1,60 @@
+Demo = {
+    version: 1.0
+};
+
+if (!window.BI) {
+    window.BI = {};
+}
+BI.servletURL = "";
+BI.resourceURL = "resource/";
+BI.i18n = {
+    "BI-Basic_OK": "确定",
+    "BI-Basic_Sure": "确定",
+    "BI-Basic_Clears": "清空",
+    "BI-Basic_Cancel": "取消",
+    "BI-Basic_Time": "时间",
+    "BI-Basic_Simple_Sunday": "日",
+    "BI-Basic_Simple_Monday": "一",
+    "BI-Basic_Simple_Tuesday": "二",
+    "BI-Basic_Simple_Wednesday": "三",
+    "BI-Basic_Simple_Thursday": "四",
+    "BI-Basic_Simple_Friday": "五",
+    "BI-Basic_Simple_Saturday": "六",
+    "BI-Multi_Date_Year": "年",
+    "BI-Multi_Date_Month": "月",
+    "BI-Multi_Date_Quarter": "季度",
+    "BI-Basic_Unrestricted": "无限制",
+    "BI-Quarter_1": "第1季度",
+    "BI-Quarter_2": "第2季度",
+    "BI-Quarter_3": "第3季度",
+    "BI-Quarter_4": "第4季度",
+    "BI-Basic_Value": "值",
+    "BI-Load_More": "加载更多",
+    "BI-Select_All": "全选",
+    "BI-No_More_Data": "无更多数据",
+    "BI-No_Selected_Value": "没有可选项",
+    "BI-Basic_Clear": "清除",
+    "BI-Multi_Date_Relative_Current_Time": "相对当前时间",
+    "BI-Multi_Date_Year_Prev": "年前",
+    "BI-Multi_Date_Year_Next": "年后",
+    "BI-Multi_Date_Year_Begin": "年初",
+    "BI-Multi_Date_Year_End": "年末",
+    "BI-Multi_Date_Quarter_Prev": "个季度前",
+    "BI-Multi_Date_Quarter_Next": "个季度后",
+    "BI-Multi_Date_Quarter_Begin": "季度初",
+    "BI-Multi_Date_Quarter_End": "季度末",
+    "BI-Multi_Date_Month_Prev": "个月前",
+    "BI-Multi_Date_Month_Next": "个月后",
+    "BI-Multi_Date_Month_Begin": "月初",
+    "BI-Multi_Date_Month_End": "月末",
+    "BI-Multi_Date_Week_Prev": "周前",
+    "BI-Multi_Date_Week_Next": "周后",
+    "BI-Multi_Date_Day_Prev": "天前",
+    "BI-Multi_Date_Day_Next": "天后",
+    "BI-Multi_Date_Today": "今天",
+    "BI-Date_Trigger_Error_Text": "日期格式示例\\:2015-3-11",
+    "BI-Year_Trigger_Invalid_Text": "请输入有效时间",
+    "BI-Multi_Date_YMD": "年/月/日",
+    "BI-Multi_Date_Week": "周",
+    "BI-Multi_Date_Day": "天"
+};
--- a/dist/core.css
+++ b/dist/core.css
@ -220,6 +220,13 @@ input::-moz-focus-inner {
  border: 0;
  padding: 0;
 }
+input::-webkit-contacts-auto-fill-button {
+  visibility: hidden;
+  display: none !important;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+}
 textarea {
  overflow: auto;
  vertical-align: top;
@ -267,7 +274,6 @@ li {
  list-style-type: none;
 }
 i {
-  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
@ -1338,6 +1344,32 @@ i {
  -o-flex-wrap: nowrap;
  flex-wrap: nowrap;
 }
+.bi-flex-vertical-center.stretch {
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 09版 */
+  -webkit-box-pack: center;
+  /* 12版 */
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  -o-justify-content: center;
+  justify-content: center;
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
 .bi-flex-wrapper-center-layout .flex-wrapper-center-layout-wrapper {
  display: box;
  /* OLD - Android 4.4- */
@ -1494,6 +1526,33 @@ i {
  min-height: 100%;
  float: left;
 }
+.bi-flex-wrapper-vertical-center .flex-wrapper-vertical-center-wrapper.stretch {
+  width: 100%;
+  /* 09版 */
+  -webkit-box-orient: vertical;
+  /* 12版 */
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+  /* 09版 */
+  -webkit-box-pack: center;
+  /* 12版 */
+  -webkit-justify-content: center;
+  -moz-justify-content: center;
+  -ms-justify-content: center;
+  -o-justify-content: center;
+  justify-content: center;
+  /* 09版 */
+  -webkit-box-align: stretch;
+  /* 12版 */
+  -webkit-align-items: stretch;
+  -moz-align-items: stretch;
+  -ms-align-items: stretch;
+  -o-align-items: stretch;
+  align-items: stretch;
+}
 .bi-inline-center-adapt-layout:after {
  display: inline-block;
  width: 0;
--- a/dist/core.js
+++ b/dist/core.js
@ -15073,7 +15073,7 @@ BI.Widget = BI.inherit(BI.OB, {
            return this.attributes[attr];
        }
        var sta = _.result(this, "_static");
-        return BI.isFunction(sta[attr]) ? sta[attr].apply(this, BI.values(arguments).slice(1)) : sta[attr];
+        return BI.isFunction(sta[attr]) ? sta[attr].apply(this, Array.prototype.slice.apply(arguments, [1])) : sta[attr];
    },

    get: function () {
@ -17644,14 +17644,23 @@ BI.IntegerBufferSet.prototype = {
 })();window.BI = window.BI || {};

 $.extend(BI, {
-    $defaultImport: function (options) {
-        var config = $.extend({
+    $defaultImport: function (options, type) {
+        var config;
+        if (BI.isObject(options)) {
+            config = $.extend({
                op: 'resource',
                path: null,
                type: null,
                must: false
            }, options);
            config.url = BI.servletURL + '?op=' + config.op + '&resource=' + config.path;
+        } else {
+            config = {
+                url: BI.servletURL + "?op=resource&resource=" + options,
+                type: arguments[1],
+                must: arguments[2]
+            }
+        }
        this.$import(config.url, config.type, config.must);
    },
    $import: function () {
@ -25041,12 +25050,14 @@ _.extend(BI, {
    HorizontalAlign: {
        Left: "left",
        Right: "right",
-        Center: "center"
+        Center: "center",
+        Stretch: "stretch"
    },
    VerticalAlign: {
        Middle: "middle",
        Top: "top",
-        Bottom: "bottom"
+        Bottom: "bottom",
+        Stretch: "stretch"
    }
 });BI.version = "2.0";/**
 * absolute实现的居中布局
@ -25612,6 +25623,7 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
    props: {
        baseCls: "bi-vertical-adapt-layout",
        columnSize: [],
+        horizontalAlign: BI.HorizontalAlign.Left,
        hgap: 0,
        vgap: 0,
        lgap: 0,
@ -25621,8 +25633,10 @@ BI.VerticalAdaptLayout = BI.inherit(BI.Layout, {
    },
    render: function () {
        BI.VerticalAdaptLayout.superclass.render.apply(this, arguments);
+        var o = this.options;
        this.$table = $("<table>").attr({"cellspacing": 0, "cellpadding": 0}).css({
            "position": "relative",
+            "width": o.horizontalAlign === BI.HorizontalAlign.Stretch ? "100%" : "auto",
            "height": "100%",
            "white-space": "nowrap",
            "border-spacing": "0px",
@ -25967,7 +25981,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-horizontal-layout",
-            verticalAlign: "middle",
+            verticalAlign: BI.VerticalAlign.Middle,
            columnSize: [],
            scrollx: true,
            hgap: 0,
@ -26032,6 +26046,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-vertical-center",
+            horizontalAlign: BI.HorizontalAlign.Left,
            columnSize: [],
            hgap: 0,
            vgap: 0,
@ -26044,6 +26059,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    render: function () {
        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
        var o = this.options;
+        this.element.addClass(o.horizontalAlign);
        this.populate(this.options.items);
    },

@ -26149,9 +26165,9 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexHorizontalLayout.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-wrapper-horizontal-layout clearfix",
-            verticalAlign: "middle",
+            verticalAlign: BI.VerticalAlign.Middle,
            columnSize: [],
-            scrollx: true,
+            // scrollable: true,
            hgap: 0,
            vgap: 0,
            lgap: 0,
@ -26234,7 +26250,9 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    props: function () {
        return BI.extend(BI.FlexVerticalCenter.superclass.props.apply(this, arguments), {
            baseCls: "bi-flex-wrapper-vertical-center clearfix",
+            horizontalAlign: BI.HorizontalAlign.Middle,
            columnSize: [],
+            // scrollable: true,
            hgap: 0,
            vgap: 0,
            lgap: 0,
@ -26246,7 +26264,7 @@ BI.FlexVerticalCenter = BI.inherit(BI.Layout, {
    render: function () {
        BI.FlexVerticalCenter.superclass.render.apply(this, arguments);
        var o = this.options;
-        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper");
+        this.$wrapper = $("<div>").addClass("flex-wrapper-vertical-center-wrapper " + o.horizontalAlign);
        this.populate(this.options.items);
    },

--- a/dist/demo.js
+++ b/dist/demo.js
@ -1,61 +1,4 @@
-Demo = {
-    version: 1.0
-};
-
-
-BI.servletURL = "";
-BI.resourceURL = "resource/";
-BI.i18n = {
-    "BI-Basic_OK": "确定",
-    "BI-Basic_Sure": "确定",
-    "BI-Basic_Clears": "清空",
-    "BI-Basic_Cancel": "取消",
-    "BI-Basic_Time": "时间",
-    "BI-Basic_Simple_Sunday": "日",
-    "BI-Basic_Simple_Monday": "一",
-    "BI-Basic_Simple_Tuesday": "二",
-    "BI-Basic_Simple_Wednesday": "三",
-    "BI-Basic_Simple_Thursday": "四",
-    "BI-Basic_Simple_Friday": "五",
-    "BI-Basic_Simple_Saturday": "六",
-    "BI-Multi_Date_Year": "年",
-    "BI-Multi_Date_Month": "月",
-    "BI-Multi_Date_Quarter": "季度",
-    "BI-Basic_Unrestricted": "无限制",
-    "BI-Quarter_1": "第1季度",
-    "BI-Quarter_2": "第2季度",
-    "BI-Quarter_3": "第3季度",
-    "BI-Quarter_4": "第4季度",
-    "BI-Basic_Value": "值",
-    "BI-Load_More": "加载更多",
-    "BI-Select_All": "全选",
-    "BI-No_More_Data": "无更多数据",
-    "BI-No_Selected_Value": "没有可选项",
-    "BI-Basic_Clear": "清除",
-    "BI-Multi_Date_Relative_Current_Time": "相对当前时间",
-    "BI-Multi_Date_Year_Prev": "年前",
-    "BI-Multi_Date_Year_Next": "年后",
-    "BI-Multi_Date_Year_Begin": "年初",
-    "BI-Multi_Date_Year_End": "年末",
-    "BI-Multi_Date_Quarter_Prev": "个季度前",
-    "BI-Multi_Date_Quarter_Next": "个季度后",
-    "BI-Multi_Date_Quarter_Begin": "季度初",
-    "BI-Multi_Date_Quarter_End": "季度末",
-    "BI-Multi_Date_Month_Prev": "个月前",
-    "BI-Multi_Date_Month_Next": "个月后",
-    "BI-Multi_Date_Month_Begin": "月初",
-    "BI-Multi_Date_Month_End": "月末",
-    "BI-Multi_Date_Week_Prev": "周前",
-    "BI-Multi_Date_Week_Next": "周后",
-    "BI-Multi_Date_Day_Prev": "天前",
-    "BI-Multi_Date_Day_Next": "天后",
-    "BI-Multi_Date_Today": "今天",
-    "BI-Date_Trigger_Error_Text": "日期格式示例\\:2015-3-11",
-    "BI-Year_Trigger_Invalid_Text": "请输入有效时间",
-    "BI-Multi_Date_YMD": "年/月/日",
-    "BI-Multi_Date_Week": "周",
-    "BI-Multi_Date_Day": "天"
-};$(function () {
+$(function () {
    var ref;
    BI.createWidget({
        type: "demo.main",
@ -809,7 +752,31 @@ BI.shortcut("demo.formula_editor", Demo.CodeEditor);Demo.CodeEditor = BI.inherit
        }
    }
 });
-BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.CodeEditor = BI.inherit(BI.Widget, {
+BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.RichEditor = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-rich-editor"
+    },
+    render: function () {
+        this.editor = BI.createWidget({
+            type: "bi.rich_editor",
+            cls: "mvc-border",
+            width: 600,
+            height: 400
+        });
+        BI.createWidget({
+            type: "bi.vertical",
+            element: this,
+            hgap: 30,
+            vgap: 50,
+            items: [this.editor]
+        })
+    },
+
+    mounted: function(){
+        this.editor.setValue('这是一条<font size="4" color="#009de3">测试</font>数据')
+    }
+});
+BI.shortcut("demo.rich_editor", Demo.RichEditor);Demo.CodeEditor = BI.inherit(BI.Widget, {
    props: {
        baseCls: "demo-editor"
    },
@ -3136,6 +3103,10 @@ BI.shortcut("demo.value_chooser_pane", Demo.ValueChooserPane);Demo.BASE_CONFIG =
    pId: 202,
    text: "bi.formula_editor",
    value: "demo.formula_editor"
+}, {
+    pId: 202,
+    text: "bi.rich_editor",
+    value: "demo.rich_editor"
 }, {
    pId: 2,
    id: 203,
@ -4487,41 +4458,7 @@ Demo.BorderLayout = BI.inherit(BI.Widget, {
        }
    }
 });
-BI.shortcut("demo.border", Demo.BorderLayout);/**
- * Created by User on 2017/3/22.
- */
-Demo.CenterLayout = BI.inherit(BI.Widget, {
-    props: {
-        baseCls: "demo-center"
-    },
-    render: function () {
-        return {
-            type: "bi.center",
-            items: [{
-                type: "bi.label",
-                text: "Center 1，这里虽然设置label的高度30，但是最终影响高度的是center布局",
-                cls: "layout-bg1",
-                whiteSpace: "normal"
-            },{
-                type: "bi.label",
-                text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal",
-                cls: "layout-bg2",
-                whiteSpace: "normal"
-            },{
-                type: "bi.label",
-                text: "Center 3",
-                cls: "layout-bg3"
-            },{
-                type: "bi.label",
-                text: "Center 4",
-                cls: "layout-bg5"
-            }],
-            hgap: 20,
-            vgap: 20
-        }
-    }
-});
-BI.shortcut("demo.center_layout", Demo.CenterLayout);Demo.CenterAdapt = BI.inherit(BI.Widget, {
+BI.shortcut("demo.border", Demo.BorderLayout);Demo.CenterAdapt = BI.inherit(BI.Widget, {
    props: {
        baseCls: "demo-absolute"
    },
@ -4604,6 +4541,40 @@ BI.shortcut("demo.center_layout", Demo.CenterLayout);Demo.CenterAdapt = BI.inher
 BI.shortcut("demo.center_adapt", Demo.CenterAdapt);/**
 * Created by User on 2017/3/22.
 */
+Demo.CenterLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-center"
+    },
+    render: function () {
+        return {
+            type: "bi.center",
+            items: [{
+                type: "bi.label",
+                text: "Center 1，这里虽然设置label的高度30，但是最终影响高度的是center布局",
+                cls: "layout-bg1",
+                whiteSpace: "normal"
+            },{
+                type: "bi.label",
+                text: "Center 2，为了演示label是占满整个的，用了一个whiteSpace:normal",
+                cls: "layout-bg2",
+                whiteSpace: "normal"
+            },{
+                type: "bi.label",
+                text: "Center 3",
+                cls: "layout-bg3"
+            },{
+                type: "bi.label",
+                text: "Center 4",
+                cls: "layout-bg5"
+            }],
+            hgap: 20,
+            vgap: 20
+        }
+    }
+});
+BI.shortcut("demo.center_layout", Demo.CenterLayout);/**
+ * Created by User on 2017/3/22.
+ */
 Demo.FloatCenterLayout = BI.inherit(BI.Widget, {
    props: {
        baseCls: "demo-float-center"
@ -4848,55 +4819,6 @@ Demo.GridLayout = BI.inherit(BI.Widget, {
    }
 });
 BI.shortcut("demo.grid", Demo.GridLayout);/**
- * Created by User on 2017/3/21.
- */
-Demo.Horizontal = BI.inherit(BI.Widget, {
-    props: {
-        baseCls: "demo-horizontal"
-    },
-    render: function () {
-        return {
-            type: "bi.vertical",
-            items: [{
-                type: "bi.horizontal",
-                items: [{
-                    type: "bi.absolute",
-                    items: [{
-                        el: {
-                            type: "bi.text_button",
-                            cls: "layout-bg1",
-                            text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)",
-                            height: 30
-                        },
-                        left: 0,
-                        right: 0
-                    }],
-                    width: 100,
-                    height: 30
-                }, {
-                    type: "bi.absolute",
-                    items: [{
-                        el: {
-                            type: "bi.text_button",
-                            cls: "layout-bg2",
-                            text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)",
-                            height: 30
-                        },
-                        left: 0,
-                        right: 0
-                    }],
-                    width: 200,
-                    height: 30
-                }]
-            }],
-            lgap: 20,
-            rgap: 80,
-            tgap: 80,
-            bgap: 50
-        }
-    }
-});
-BI.shortcut("demo.horizontal", Demo.Horizontal);/**
 * Created by User on 2017/3/22.
 */
 Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
@ -5013,6 +4935,55 @@ Demo.HorizontalFloat = BI.inherit(BI.Widget, {
    }
 });
 BI.shortcut("demo.horizontal_float", Demo.HorizontalFloat);/**
+ * Created by User on 2017/3/21.
+ */
+Demo.Horizontal = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-horizontal"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            items: [{
+                type: "bi.horizontal",
+                items: [{
+                    type: "bi.absolute",
+                    items: [{
+                        el: {
+                            type: "bi.text_button",
+                            cls: "layout-bg1",
+                            text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)",
+                            height: 30
+                        },
+                        left: 0,
+                        right: 0
+                    }],
+                    width: 100,
+                    height: 30
+                }, {
+                    type: "bi.absolute",
+                    items: [{
+                        el: {
+                            type: "bi.text_button",
+                            cls: "layout-bg2",
+                            text: "这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)这里设置了lgap(左边距)，rgap(右边距)，tgap(上边距)，bgap(下边距)",
+                            height: 30
+                        },
+                        left: 0,
+                        right: 0
+                    }],
+                    width: 200,
+                    height: 30
+                }]
+            }],
+            lgap: 20,
+            rgap: 80,
+            tgap: 80,
+            bgap: 50
+        }
+    }
+});
+BI.shortcut("demo.horizontal", Demo.Horizontal);/**
 * Created by User on 2017/3/22.
 */
 Demo.HtapeLayout = BI.inherit(BI.Widget, {
@ -5358,30 +5329,6 @@ Demo.TdLayout = BI.inherit(BI.Widget, {
    }
 });
 BI.shortcut("demo.td", Demo.TdLayout);/**
- * Created by User on 2017/3/21.
- */
-Demo.VerticalLayout = BI.inherit(BI.Widget, {
-    props: {
-        baseCls: "demo-vertical"
-    },
-    render: function () {
-        return {
-            type: "bi.vertical",
-            items: [{
-                type: "bi.label",
-                cls: "layout-bg1",
-                text: "这里设置了hgap(水平间距)，vgap(垂直间距)",
-                height: 30
-            }, {
-                type: "bi.label",
-                cls: "layout-bg2",
-                text: "这里设置了hgap(水平间距)，vgap(垂直间距)",
-                height: 30
-            }]
-        }
-    }
-});
-BI.shortcut("demo.vertical", Demo.VerticalLayout);/**
 * Created by User on 2017/3/22.
 */
 Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
@ -5423,6 +5370,30 @@ Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
    }
 });
 BI.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout);/**
+ * Created by User on 2017/3/21.
+ */
+Demo.VerticalLayout = BI.inherit(BI.Widget, {
+    props: {
+        baseCls: "demo-vertical"
+    },
+    render: function () {
+        return {
+            type: "bi.vertical",
+            items: [{
+                type: "bi.label",
+                cls: "layout-bg1",
+                text: "这里设置了hgap(水平间距)，vgap(垂直间距)",
+                height: 30
+            }, {
+                type: "bi.label",
+                cls: "layout-bg2",
+                text: "这里设置了hgap(水平间距)，vgap(垂直间距)",
+                height: 30
+            }]
+        }
+    }
+});
+BI.shortcut("demo.vertical", Demo.VerticalLayout);/**
 * Created by User on 2017/3/22.
 */
 Demo.VtapeLayout = BI.inherit(BI.Widget, {
@ -8448,6 +8419,7 @@ Demo.Slider = BI.inherit(BI.Widget, {

        var singleSlider = BI.createWidget({
            type: "bi.single_slider",
+            digit: 0,
            width: 300,
            height: 50
        });
@ -8457,21 +8429,36 @@ Demo.Slider = BI.inherit(BI.Widget, {
            max: 100
        });

+        singleSlider.setValue(30);
        singleSlider.populate();
+        singleSlider.on(BI.SingleSlider.EVENT_CHANGE, function () {
+            console.log(this.getValue());
+        });
+
+        var singleSliderLabel = BI.createWidget({
+            type: "bi.single_slider_label",
+            height: 30,
+            width: 300,
+            digit: 0,
+            unit: "个"
+        });
+        singleSliderLabel.setMinAndMax({
+            min: 0,
+            max: 100
+        });
+        singleSliderLabel.setValue(10);
+        singleSliderLabel.populate();

        var normalSingleSlider = BI.createWidget({
            type: "bi.single_slider_normal",
            height: 30,
            width: 300
        });
-
        normalSingleSlider.setMinAndMax({
            min: 0,
            max: 100
        });
-
        normalSingleSlider.setValue(10);
-
        normalSingleSlider.populate();

        BI.createWidget({
@ -8493,6 +8480,14 @@ Demo.Slider = BI.inherit(BI.Widget, {
                    }]
                },
                height: 200
+            }, {
+                el: {
+                    type: "bi.center_adapt",
+                    items: [{
+                        el: singleSliderLabel
+                    }]
+                },
+                height: 200
            }],
            hgap: 20
        });
--- a/dist/index.html
+++ b/dist/index.html
@ -10,6 +10,7 @@
      <link rel="stylesheet" type="text/css" href="resource.css" />
      <link rel="stylesheet" type="text/css" href="demo.css" />

+      <script src="config.js"></script>
      <script src="polyfill.js"></script>
      <script src="core.js"></script>
      <script src="jqueryui.js"></script>
--- a/dist/resource.css
+++ b/dist/resource.css
@ -138,6 +138,10 @@ textarea::-webkit-scrollbar-thumb:hover {
  
  /*  iOS 4.1- */
 }
+@font-face {
+  font-family: 'bi';
+  src: url('font/iconfont.eot') /* IE6-IE8 */;
+}
 .b-font {
  font-family: "bi";
  font-style: normal;
@ -864,6 +868,114 @@ textarea::-webkit-scrollbar-thumb:hover {
  content: "\e636";
  color: inherit;
 }
+.text-bold-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe64d;');
+}
+.text-bold-font .b-font:before {
+  content: "\e64d";
+  color: inherit;
+}
+.text-bold-font.native .b-font:before,
+.text-bold-font.disabled .b-font:before {
+  content: "\e64d";
+  color: inherit;
+}
+.text-italic-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe656;');
+}
+.text-italic-font .b-font:before {
+  content: "\e656";
+  color: inherit;
+}
+.text-italic-font.native .b-font:before,
+.text-italic-font.disabled .b-font:before {
+  content: "\e656";
+  color: inherit;
+}
+.text-underline-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe650;');
+}
+.text-underline-font .b-font:before {
+  content: "\e650";
+  color: inherit;
+}
+.text-underline-font.native .b-font:before,
+.text-underline-font.disabled .b-font:before {
+  content: "\e650";
+  color: inherit;
+}
+.text-color-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe69c;');
+}
+.text-color-font .b-font:before {
+  content: "\e69c";
+  color: inherit;
+}
+.text-color-font.native .b-font:before,
+.text-color-font.disabled .b-font:before {
+  content: "\e69c";
+  color: inherit;
+}
+.text-background-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe696;');
+}
+.text-background-font .b-font:before {
+  content: "\e696";
+  color: inherit;
+}
+.text-background-font.native .b-font:before,
+.text-background-font.disabled .b-font:before {
+  content: "\e696";
+  color: inherit;
+}
+.text-color-underline-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe69d;');
+}
+.text-color-underline-font .b-font:before {
+  content: "\e69d";
+  color: inherit;
+}
+.text-color-underline-font.native .b-font:before,
+.text-color-underline-font.disabled .b-font:before {
+  content: "\e69d";
+  color: inherit;
+}
+.text-align-left-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe654;');
+}
+.text-align-left-font .b-font:before {
+  content: "\e654";
+  color: inherit;
+}
+.text-align-left-font.native .b-font:before,
+.text-align-left-font.disabled .b-font:before {
+  content: "\e654";
+  color: inherit;
+}
+.text-align-center-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe64f;');
+}
+.text-align-center-font .b-font:before {
+  content: "\e64f";
+  color: inherit;
+}
+.text-align-center-font.native .b-font:before,
+.text-align-center-font.disabled .b-font:before {
+  content: "\e64f";
+  color: inherit;
+}
+.text-align-right-font .b-font {
+  *zoom: expression( this.runtimeStyle['zoom'] = '1',this.innerHTML = '&#xe651;');
+}
+.text-align-right-font .b-font:before {
+  content: "\e651";
+  color: inherit;
+}
+.text-align-right-font.native .b-font:before,
+.text-align-right-font.disabled .b-font:before {
+  content: "\e651";
+  color: inherit;
+}
 .tree-collapse-icon-type1 .x-icon,
 .tree-collapse-icon-type1:hover .x-icon,
 .tree-collapse-icon-type1:active .x-icon {
--- a/dist/slider.css
+++ b/dist/slider.css
@ -0,0 +1,20 @@
+.bi-single-slider-slider .slider-button {
+  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 7px;
+  -moz-border-radius: 7px;
+  border-radius: 7px;
+}
+.bi-slider-track .gray-track {
+  background-color: rgba(153, 153, 153, 0.3);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4d999999,endColorstr=#4d999999);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.bi-slider-track .blue-track {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
--- a/dist/slider.js
+++ b/dist/slider.js
@ -45,13 +45,15 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
    },
    _defaultConfig: function () {
        return BI.extend(BI.SingleSlider.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-single-slider bi-slider-track"
+            baseCls: "bi-single-slider bi-slider-track",
+            digit: ""
        });
    },
    _init: function () {
        BI.SingleSlider.superclass._init.apply(this, arguments);

-        var self = this;
+        var self = this, o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
        var c = this._constant;
        this.enable = false;
        this.value = "";
@ -81,8 +83,10 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                self._setBlueTrack(significantPercent);
                self._setLabelPosition(significantPercent);
                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
                self.label.setValue(v);
                self.value = v;
+                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
            },
            stop: function (e, ui) {
                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
@ -117,6 +121,7 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
                var significantPercent = BI.parseFloat(percent.toFixed(1));
                self._setAllPosition(significantPercent);
                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
                self.label.setValue(v);
                self.value = v;
                self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
@ -138,10 +143,12 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
        });
        this.label.on(BI.SignEditor.EVENT_CONFIRM, function () {
            var v = BI.parseFloat(this.getValue());
-            self.value = v;
            var percent = self._getPercentByValue(v);
            var significantPercent = BI.parseFloat(percent.toFixed(1));
            self._setAllPosition(significantPercent);
+            v = digitExist ? v.toFixed(o.digit) : v;
+            this.setValue(v);
+            self.value = v;
            self.fireEvent(BI.SingleSlider.EVENT_CHANGE);
        });
        this._setVisible(false);
@ -262,7 +269,10 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
    },

    setValue: function (v) {
+        var o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
        var value = BI.parseFloat(v);
+        value = digitExist ? value.toFixed(o.digit) : value;
        if ((!isNaN(value))) {
            if (this._checkValidation(value)) {
                this.value = value;
@ -311,6 +321,279 @@ BI.SingleSlider = BI.inherit(BI.Widget, {
 });
 BI.SingleSlider.EVENT_CHANGE = "EVENT_CHANGE";
 BI.shortcut("bi.single_slider", BI.SingleSlider);/**
+ * Created by Urthur on 2017/9/12.
+ */
+BI.SingleSliderLabel = BI.inherit(BI.Widget, {
+    _constant: {
+        EDITOR_WIDTH: 90,
+        EDITOR_HEIGHT: 30,
+        HEIGHT: 28,
+        SLIDER_WIDTH_HALF: 15,
+        SLIDER_WIDTH: 30,
+        SLIDER_HEIGHT: 30,
+        TRACK_HEIGHT: 24
+    },
+    _defaultConfig: function () {
+        return BI.extend(BI.SingleSliderLabel.superclass._defaultConfig.apply(this, arguments), {
+            baseCls: "bi-single-slider bi-slider-track",
+            digit: "",
+            unit: ""
+        });
+    },
+    _init: function () {
+        BI.SingleSliderLabel.superclass._init.apply(this, arguments);
+
+        var self = this, o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
+        var c = this._constant;
+        this.enable = false;
+        this.value = "";
+
+        this.grayTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "gray-track",
+            height: 6
+        });
+        this.blueTrack = BI.createWidget({
+            type: "bi.layout",
+            cls: "blue-track bi-high-light-background",
+            height: 6
+        });
+        this.track = this._createTrackWrapper();
+
+        this.slider = BI.createWidget({
+            type: "bi.single_slider_button"
+        });
+        this.slider.element.draggable({
+            axis: "x",
+            containment: this.grayTrack.element,
+            scroll: false,
+            drag: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));//直接对计算出来的百分数保留到小数点后一位，相当于分成了1000份。
+                self._setBlueTrack(significantPercent);
+                self._setLabelPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
+                self.label.setText(v + o.unit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            },
+            stop: function (e, ui) {
+                var percent = (ui.position.left) * 100 / (self._getGrayTrackLength());
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setSliderPosition(significantPercent);
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        });
+        var sliderVertical = BI.createWidget({
+            type: "bi.vertical",
+            items: [{
+                type: "bi.absolute",
+                items: [this.slider]
+            }],
+            hgap: c.SLIDER_WIDTH_HALF,
+            height: c.SLIDER_HEIGHT
+        });
+        sliderVertical.element.click(function (e) {
+            if (self.enable) {
+                var offset = e.clientX - self.element.offset().left - c.SLIDER_WIDTH_HALF;
+                var trackLength = self.track.element[0].scrollWidth;
+                var percent = 0;
+                if (offset < 0) {
+                    percent = 0
+                }
+                if (offset > 0 && offset < (trackLength - c.SLIDER_WIDTH)) {
+                    percent = offset * 100 / self._getGrayTrackLength();
+                }
+                if (offset > (trackLength - c.SLIDER_WIDTH)) {
+                    percent = 100
+                }
+                var significantPercent = BI.parseFloat(percent.toFixed(1));
+                self._setAllPosition(significantPercent);
+                var v = self._getValueByPercent(significantPercent);
+                v = digitExist ? v.toFixed(o.digit) : v;
+                self.label.setText(v + o.unit);
+                self.value = v;
+                self.fireEvent(BI.SingleSliderLabel.EVENT_CHANGE);
+            }
+        });
+        this.label = BI.createWidget({
+            type: "bi.label",
+            height: c.HEIGHT,
+            width: c.EDITOR_WIDTH - 2
+        });
+
+        this._setVisible(false);
+        BI.createWidget({
+            type: "bi.absolute",
+            element: this,
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.track,
+                            width: "100%",
+                            height: c.TRACK_HEIGHT
+                        }]
+                    }],
+                    hgap: 7,
+                    height: c.TRACK_HEIGHT
+                },
+                top: 33,
+                left: 0,
+                width: "100%"
+            }, {
+                el: sliderVertical,
+                top: 30,
+                left: 0,
+                width: "100%"
+            }, {
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [this.label]
+                    }],
+                    rgap: c.EDITOR_WIDTH,
+                    height: c.EDITOR_HEIGHT
+                },
+                top: 10,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _createTrackWrapper: function () {
+        return BI.createWidget({
+            type: "bi.absolute",
+            items: [{
+                el: {
+                    type: "bi.vertical",
+                    items: [{
+                        type: "bi.absolute",
+                        items: [{
+                            el: this.grayTrack,
+                            top: 0,
+                            left: 0,
+                            width: "100%"
+                        }, {
+                            el: this.blueTrack,
+                            top: 0,
+                            left: 0,
+                            width: "0%"
+                        }]
+                    }],
+                    hgap: 8,
+                    height: 8
+                },
+                top: 8,
+                left: 0,
+                width: "100%"
+            }]
+        })
+    },
+
+    _checkValidation: function (v) {
+        return BI.isNumeric(v) && !(BI.isNull(v) || v < this.min || v > this.max)
+    },
+
+    _setBlueTrack: function (percent) {
+        this.blueTrack.element.css({"width": percent + "%"});
+    },
+
+    _setLabelPosition: function (percent) {
+        this.label.element.css({"left": percent + "%"});
+    },
+
+    _setSliderPosition: function (percent) {
+        this.slider.element.css({"left": percent + "%"});
+    },
+
+    _setAllPosition: function (percent) {
+        this._setSliderPosition(percent);
+        this._setLabelPosition(percent);
+        this._setBlueTrack(percent);
+    },
+
+    _setVisible: function (visible) {
+        this.slider.setVisible(visible);
+        this.label.setVisible(visible);
+    },
+
+    _getGrayTrackLength: function () {
+        return this.grayTrack.element[0].scrollWidth
+    },
+
+    _getValueByPercent: function (percent) {
+        var thousandth = BI.parseInt(percent * 10);
+        return (((this.max - this.min) * thousandth) / 1000 + this.min);
+    },
+
+    _getPercentByValue: function (v) {
+        return (v - this.min) * 100 / (this.max - this.min);
+    },
+
+    getValue: function () {
+        return this.value;
+    },
+
+    setValue: function (v) {
+        var o = this.options;
+        var digitExist = (o.digit === "") ? false : true;
+        var value = BI.parseFloat(v);
+        value = digitExist ? value.toFixed(o.digit) : value;
+        if ((!isNaN(value))) {
+            if (this._checkValidation(value)) {
+                this.value = value;
+            }
+            if (value > this.max) {
+                this.value = this.max;
+            }
+            if (value < this.min) {
+                this.value = this.min;
+            }
+        }
+    },
+
+    setMinAndMax: function (v) {
+        var minNumber = BI.parseFloat(v.min);
+        var maxNumber = BI.parseFloat(v.max);
+        if ((!isNaN(minNumber)) && (!isNaN(maxNumber)) && (maxNumber > minNumber )) {
+            this.min = minNumber;
+            this.max = maxNumber;
+        }
+    },
+
+    reset: function () {
+        this._setVisible(false);
+        this.enable = false;
+        this.value = "";
+        this.min = 0;
+        this.max = 0;
+        this._setBlueTrack(0);
+    },
+
+    populate: function () {
+        var o = this.options;
+        if (!isNaN(this.min) && !isNaN(this.max)) {
+            this._setVisible(true);
+            this.enable = true;
+            if (BI.isNumeric(this.value) || BI.isNotEmptyString(this.value)) {
+                this.label.setValue(this.value + o.unit);
+                this._setAllPosition(this._getPercentByValue(this.value));
+            } else {
+                this.label.setValue(this.max + o.unit);
+                this._setAllPosition(100);
+            }
+        }
+    }
+});
+BI.SingleSliderLabel.EVENT_CHANGE = "EVENT_CHANGE";
+BI.shortcut("bi.single_slider_label", BI.SingleSliderLabel);/**
 * normal single slider
 * Created by Young on 2017/6/21.
 */
--- a/dist/widget.js
+++ b/dist/widget.js
@ -10650,10 +10650,12 @@ BI.MultiSelectList = BI.inherit(BI.Widget, {
                    if (obj instanceof BI.MultiSelectBar) {
                        self._joinAll(this.getValue(), function () {
                            assertShowValue();
+                            self.fireEvent(BI.MultiSelectList.EVENT_CHANGE);
                        });
                    } else {
                        self._join(this.getValue(), function () {//安徽省 北京
                            assertShowValue();
+                            self.fireEvent(BI.MultiSelectList.EVENT_CHANGE);
                        });
                    }
                }
--- a/uidoc/.gitignore
+++ b/uidoc/.gitignore
@ -10,5 +10,5 @@ dist
 archive
 archive.zip
 *.log
-_book
+#_book
 test
--- a/docs/OVERVIEW.md
+++ b/docs/OVERVIEW.md
@ -0,0 +1,5 @@
+# 通用规范
+1. 控件都会提供setValue, getValue, populate这几个方法来设置值，获取值(展示类控件除外)和刷新控件
+2. 控件都会提供setEnable, setVisible, setValid这几个方法来设置使能，是否可见，是否有效状态，并且在fineui2.0之后，会自动给子组件设置同样的状态，不要重写这些方法，一些需要在设置状态时的额外操作可以通过重写_setXXX来实现
+3. 使用populate来清空或者重置布局，不要使用empty, 慎用resize
+4. 谨慎监听和触发BI.Controller.EVENT_CHANGE事件，一般来说，控件都会有一个BI.ClassName.EVENT_CHANGE事件,一些特殊的事件会在对应控件文档中列出
--- a/docs/README.md
+++ b/docs/README.md
@ -0,0 +1,20 @@
+# FineUIdocs
+FineUI文档
+
+
+## 文档地址
+
+GithubPages: [https://fanruan.github.io/fineui](https://fanruan.github.io/fineui)
+
+CodingPages: [http://fanruan.coding.me/fineui](http://fanruan.coding.me/fineui)
+
+
+## Demo
+
+CodingPages: [http://fanruan.coding.me/fineui/dist/index.html](http://fanruan.coding.me/fineui/dist/index.html)
+
+
+## 代码设计文档
+
+KMS: [http://www.finedevelop.com/display/DR/FineUI](http://www.finedevelop.com/display/DR/FineUI)
+
--- a/docs/START.md
+++ b/docs/START.md
@ -0,0 +1,3 @@
+## 开发教程
+
+KMS: [http://www.finedevelop.com/pages/viewpage.action?pageId=15330077](http://www.finedevelop.com/pages/viewpage.action?pageId=15330077)
--- a/uidoc/SUMMARY.md
+++ b/uidoc/SUMMARY.md
@ -1,7 +1,11 @@
 # Summary

 ## 总览
-* [文档规范](README.md)
+* [概览](README.md)
+* [起步](START.md)
+
+## 通用规范
+* [通用规范](OVERVIEW.md)

 ## 核心控件
 * 布局
--- a/docs/_book/.gitignore
+++ b/docs/_book/.gitignore
@ -0,0 +1,14 @@
+.DS_Store
+.svn
+.sass-cache
+.vscode
+.tmp
+node_modules
+bower_components
+tmp
+dist
+archive
+archive.zip
+*.log
+#_book
+test
--- a/docs/_book/LICENSE
+++ b/docs/_book/LICENSE
--- a/docs/_book/OVERVIEW.html
+++ b/docs/_book/OVERVIEW.html
--- a/docs/_book/START.html
+++ b/docs/_book/START.html
--- a/docs/_book/base/bubble.html
+++ b/docs/_book/base/bubble.html
--- a/docs/_book/base/bubble.md
+++ b/docs/_book/base/bubble.md
--- a/docs/_book/base/button/button.html
+++ b/docs/_book/base/button/button.html
--- a/docs/_book/base/button/button.md
+++ b/docs/_book/base/button/button.md
@ -31,7 +31,6 @@ BI.createWidget({
 | rgap    | 效果相当于文本框right-padding值     |    number  |   —    |  0    |
 | tgap    |效果相当于文本框top-padding值     |    number   | — |  0    |
 | bgap    |  效果相当于文本框bottom-padding值     |    number  |  — |  0    |
-| items | 子控件数组     |    array | — | [ ] |
 | width    |   宽度    |    number   |  — | —    |
 | height    |   高度    |    number   | — |   —   | 

--- a/docs/_book/base/button/icon_button.html
+++ b/docs/_book/base/button/icon_button.html
--- a/docs/_book/base/button/icon_button.md
+++ b/docs/_book/base/button/icon_button.md
--- a/docs/_book/base/button/image_button.html
+++ b/docs/_book/base/button/image_button.html
--- a/docs/_book/base/button/image_button.md
+++ b/docs/_book/base/button/image_button.md
--- a/docs/_book/base/button/text_button.html
+++ b/docs/_book/base/button/text_button.html
--- a/docs/_book/base/button/text_button.md
+++ b/docs/_book/base/button/text_button.md
--- a/docs/_book/base/canvas.html
+++ b/docs/_book/base/canvas.html
--- a/docs/_book/base/canvas.md
+++ b/docs/_book/base/canvas.md
--- a/docs/_book/base/editor/code_editor.html
+++ b/docs/_book/base/editor/code_editor.html
--- a/docs/_book/base/editor/code_editor.md
+++ b/docs/_book/base/editor/code_editor.md
--- a/docs/_book/base/editor/editor.html
+++ b/docs/_book/base/editor/editor.html
--- a/docs/_book/base/editor/editor.md
+++ b/docs/_book/base/editor/editor.md
--- a/docs/_book/base/editor/formula_editor.html
+++ b/docs/_book/base/editor/formula_editor.html
--- a/docs/_book/base/editor/formula_editor.md
+++ b/docs/_book/base/editor/formula_editor.md
--- a/docs/_book/base/editor/multifile_editor.html
+++ b/docs/_book/base/editor/multifile_editor.html
--- a/docs/_book/base/editor/multifile_editor.md
+++ b/docs/_book/base/editor/multifile_editor.md
--- a/docs/_book/base/editor/textarea_editor.html
+++ b/docs/_book/base/editor/textarea_editor.html
--- a/docs/_book/base/editor/textarea_editor.md
+++ b/docs/_book/base/editor/textarea_editor.md
--- a/docs/_book/base/label.html
+++ b/docs/_book/base/label.html
--- a/docs/_book/base/label.md
+++ b/docs/_book/base/label.md
@ -61,7 +61,6 @@ BI.createWidget({
 | getText| 获取文本值 | —|
 | setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} |
 | setValue | 设置文本值 | 需要设置的文本值text |
-| populate| 清空label | —|


 ---
--- a/docs/_book/base/message.html
+++ b/docs/_book/base/message.html
--- a/docs/_book/base/message.md
+++ b/docs/_book/base/message.md
--- a/docs/_book/base/pager.html
+++ b/docs/_book/base/pager.html
--- a/docs/_book/base/pager.md
+++ b/docs/_book/base/pager.md
--- a/docs/_book/base/svg.html
+++ b/docs/_book/base/svg.html
--- a/docs/_book/base/svg.md
+++ b/docs/_book/base/svg.md
--- a/docs/_book/base/table/collection_table.html
+++ b/docs/_book/base/table/collection_table.html
--- a/docs/_book/base/table/collection_table.md
+++ b/docs/_book/base/table/collection_table.md
--- a/docs/_book/base/table/grid_table.html
+++ b/docs/_book/base/table/grid_table.html
--- a/docs/_book/base/table/grid_table.md
+++ b/docs/_book/base/table/grid_table.md
--- a/docs/_book/base/table/resizable_table.html
+++ b/docs/_book/base/table/resizable_table.html
--- a/docs/_book/base/table/resizable_table.md
+++ b/docs/_book/base/table/resizable_table.md
--- a/docs/_book/base/table/table_view.html
+++ b/docs/_book/base/table/table_view.html
--- a/docs/_book/base/table/table_view.md
+++ b/docs/_book/base/table/table_view.md
--- a/docs/_book/base/toast.html
+++ b/docs/_book/base/toast.html
--- a/docs/_book/base/toast.md
+++ b/docs/_book/base/toast.md
@ -37,6 +37,5 @@ BI.createWidget({
 | 名称     | 说明          |  回调参数     
 | :------  |:------------- | :-----   
 | setText  | 设置文本值    | 需要设置的文本值text     |
-| setHeight  | 设置高度    | 需要设置的高度值height   |

 ---
--- a/docs/_book/case/button/multi_select_item.html
+++ b/docs/_book/case/button/multi_select_item.html
--- a/docs/_book/case/button/multi_select_item.md
+++ b/docs/_book/case/button/multi_select_item.md
--- a/docs/_book/case/button/single_select_item.html
+++ b/docs/_book/case/button/single_select_item.html
--- a/docs/_book/case/button/single_select_item.md
+++ b/docs/_book/case/button/single_select_item.md
--- a/docs/_book/case/button/single_select_radio_item.html
+++ b/docs/_book/case/button/single_select_radio_item.html
--- a/docs/_book/case/button/single_select_radio_item.md
+++ b/docs/_book/case/button/single_select_radio_item.md
--- a/docs/_book/case/calendar.html
+++ b/docs/_book/case/calendar.html
--- a/docs/_book/case/calendar.md
+++ b/docs/_book/case/calendar.md
--- a/docs/_book/case/clipboard.html
+++ b/docs/_book/case/clipboard.html
--- a/docs/_book/case/clipboard.md
+++ b/docs/_book/case/clipboard.md
--- a/docs/_book/case/color_chooser.html
+++ b/docs/_book/case/color_chooser.html
--- a/docs/_book/case/color_chooser.md
+++ b/docs/_book/case/color_chooser.md
--- a/docs/_book/case/color_chooser_popup.html
+++ b/docs/_book/case/color_chooser_popup.html
--- a/docs/_book/case/color_chooser_popup.md
+++ b/docs/_book/case/color_chooser_popup.md
--- a/docs/_book/case/combo/bubble_combo.html
+++ b/docs/_book/case/combo/bubble_combo.html
--- a/docs/_book/case/combo/bubble_combo.md
+++ b/docs/_book/case/combo/bubble_combo.md
--- a/docs/_book/case/combo/icon_combo.html
+++ b/docs/_book/case/combo/icon_combo.html
--- a/docs/_book/case/combo/icon_combo.md
+++ b/docs/_book/case/combo/icon_combo.md
--- a/docs/_book/case/combo/static_combo.html
+++ b/docs/_book/case/combo/static_combo.html
--- a/docs/_book/case/combo/static_combo.md
+++ b/docs/_book/case/combo/static_combo.md
--- a/docs/_book/case/combo/text_value_combo.html
+++ b/docs/_book/case/combo/text_value_combo.html
--- a/docs/_book/case/combo/text_value_combo.md
+++ b/docs/_book/case/combo/text_value_combo.md
--- a/Show More
+++ b/Show More