diff --git a/demo/js/base/editor/demo.rich_editor.js b/demo/js/base/editor/demo.rich_editor.js
index 61059fc2df..80e0c8b07d 100644
--- a/demo/js/base/editor/demo.rich_editor.js
+++ b/demo/js/base/editor/demo.rich_editor.js
@@ -29,8 +29,7 @@ Demo.RichEditor = BI.inherit(BI.Widget, {
         var image = BI.DOM.getImage("测试");
         var src = image.src;
         var style = image.style;
-
-        this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
+        this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
     }
 });
 BI.shortcut("demo.rich_editor", Demo.RichEditor);
\ No newline at end of file
diff --git a/dist/base.css b/dist/base.css
index 4226264e3a..2a743c2135 100644
--- a/dist/base.css
+++ b/dist/base.css
@@ -958,6 +958,11 @@ li.CodeMirror-hint-active {
 .bi-direction-pager .direction-pager-next {
   font-size: 16px;
 }
+.bi-rich-editor .rich-editor-param {
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
 .bi-rich-editor-text-toolbar .text-toolbar-button {
   font-size: 16px;
 }
diff --git a/dist/bundle.css b/dist/bundle.css
index 15e926abe2..5cefebc55a 100644
--- a/dist/bundle.css
+++ b/dist/bundle.css
@@ -2996,6 +2996,11 @@ li.CodeMirror-hint-active {
 .bi-direction-pager .direction-pager-next {
   font-size: 16px;
 }
+.bi-rich-editor .rich-editor-param {
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
 .bi-rich-editor-text-toolbar .text-toolbar-button {
   font-size: 16px;
 }
diff --git a/dist/bundle.js b/dist/bundle.js
index 44a94abe19..bf21151a83 100644
--- a/dist/bundle.js
+++ b/dist/bundle.js
@@ -28465,17 +28465,19 @@ BI.extend(BI.DOM, {
         $("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w;
-        canvas.height = 16;
+        canvas.height = 24;
         var ctx = canvas.getContext("2d");
-        ctx.font = "14px Georgia";
-        ctx.fillStyle = "#ffffff";
-        ctx.fillText(param, 3, 14);
+        // ctx.fillStyle = "#EAF2FD";
+        ctx.font = "12px Georgia";
+        ctx.fillStyle = "#3D4D66";
+        ctx.textBaseline = "middle";
+        ctx.fillText(param, 6, 12);
         $(canvas).destroy();
         return {
             width: w,
-            height: 16,
+            height: 24,
             src: canvas.toDataURL("image/png"),
-            style: "background-color: #3f8ce8; vertical-align: sub; margin: 0 3px;",
+            style: "background-color: #EAF2FD; vertical-align: sub; margin: 0 3px;",
             alt: param
         };
     }
@@ -81966,7 +81968,11 @@ BI.RichEditorAction = BI.inherit(BI.Widget, {
  */
 BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
     _defaultConfig: function () {
-        return BI.extend(BI.RichEditorParamAction.superclass._defaultConfig.apply(this, arguments), {});
+        return BI.extend(BI.RichEditorParamAction.superclass._defaultConfig.apply(this, arguments), {
+            paramFormatter: function (v) {
+                return v;
+            }
+        });
     },
 
     _init: function () {
@@ -82001,11 +82007,11 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
         var o = this.options;
         var instance = o.editor.instance;
         var image = new Image();
-        var attrs = BI.DOM.getImage(param);
+        var attrs = BI.DOM.getImage(o.paramFormatter(param));
         image.src = attrs.src;
         image.alt = param;
         image.style = attrs.style;
-
+        $(image).addClass("rich-editor-param");
         var sel = this._get$Sel();
         var wrapper = o.editor.instance.getElm().element;
         if (wrapper.find(sel).length <= 0) {
@@ -83037,20 +83043,23 @@ BI.shortcut("bi.rich_editor_size_chooser", BI.RichEditorSizeChooser);/**
  * @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",
-            toolbar: {}
-        });
+
+    props: {
+        baseCls: "bi-rich-editor",
+        toolbar: {},
+        readOnly: false
     },
-    _init: function () {
-        BI.RichEditor.superclass._init.apply(this, arguments);
+
+    render: function () {
         var self = this, o = this.options;
-        this.editor = BI.createWidget({
+        var editor = {
             type: "bi.nic_editor",
             width: o.width,
             height: o.height,
             readOnly: o.readOnly,
+            ref: function () {
+                self.editor = this;
+            },
             listeners: [{
                 eventName: BI.NicEditor.EVENT_BLUR,
                 action: function () {
@@ -83059,23 +83068,28 @@ BI.RichEditor = BI.inherit(BI.Widget, {
             }, {
                 eventName: BI.NicEditor.EVENT_FOCUS,
                 action: function () {
-                    if(!self.combo.isViewVisible()) {
+                    if (!o.readOnly && !self.combo.isViewVisible()) {
                         self.combo.showView();
                     }
                     self.fireEvent(BI.RichEditor.EVENT_FOCUS);
                 }
             }]
-        });
-
-        this.combo = BI.createWidget({
+        };
+        if(o.readOnly) {
+            return editor;
+        }
+        this.editor = BI.createWidget(editor);
+        return {
             type: "bi.combo",
-            element: this,
             toggle: false,
-            trigger: o.readOnly ? "" : "click",
+            trigger: "click",
             direction: "top,right",
             isNeedAdjustWidth: false,
             isNeedAdjustHeight: false,
             adjustLength: 1,
+            ref: function () {
+                self.combo = this;
+            },
             el: this.editor,
             popup: {
                 el: BI.extend({
@@ -83085,12 +83099,14 @@ BI.RichEditor = BI.inherit(BI.Widget, {
                 height: 30,
                 stopPropagation: true,
                 stopEvent: true
-            }
-        });
-
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
-            self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
-        });
+            },
+            listeners: [{
+                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
+                action: function () {
+                    self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
+                }
+            }]
+        };
     },
 
     focus: function () {
@@ -88128,7 +88144,7 @@ BI.shortcut("bi.static_date_pane_card", BI.StaticDatePaneCard);BI.DynamicDatePan
                         }
                     }],
                     ref: function () {
-                        self.switch = this;
+                        self.switcher = this;
                     }
                 },
                 height: 30
@@ -88863,7 +88879,7 @@ BI.shortcut("bi.static_date_time_pane_card", BI.StaticDateTimePaneCard);BI.Dynam
                         }
                     }],
                     ref: function () {
-                        self.switch = this;
+                        self.switcher = this;
                     }
                 },
                 height: 30
diff --git a/dist/case.js b/dist/case.js
index 5273716648..53d151eaa8 100644
--- a/dist/case.js
+++ b/dist/case.js
@@ -10035,7 +10035,11 @@ BI.RichEditorAction = BI.inherit(BI.Widget, {
  */
 BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
     _defaultConfig: function () {
-        return BI.extend(BI.RichEditorParamAction.superclass._defaultConfig.apply(this, arguments), {});
+        return BI.extend(BI.RichEditorParamAction.superclass._defaultConfig.apply(this, arguments), {
+            paramFormatter: function (v) {
+                return v;
+            }
+        });
     },
 
     _init: function () {
@@ -10070,11 +10074,11 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
         var o = this.options;
         var instance = o.editor.instance;
         var image = new Image();
-        var attrs = BI.DOM.getImage(param);
+        var attrs = BI.DOM.getImage(o.paramFormatter(param));
         image.src = attrs.src;
         image.alt = param;
         image.style = attrs.style;
-
+        $(image).addClass("rich-editor-param");
         var sel = this._get$Sel();
         var wrapper = o.editor.instance.getElm().element;
         if (wrapper.find(sel).length <= 0) {
@@ -11106,20 +11110,23 @@ BI.shortcut("bi.rich_editor_size_chooser", BI.RichEditorSizeChooser);/**
  * @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",
-            toolbar: {}
-        });
+
+    props: {
+        baseCls: "bi-rich-editor",
+        toolbar: {},
+        readOnly: false
     },
-    _init: function () {
-        BI.RichEditor.superclass._init.apply(this, arguments);
+
+    render: function () {
         var self = this, o = this.options;
-        this.editor = BI.createWidget({
+        var editor = {
             type: "bi.nic_editor",
             width: o.width,
             height: o.height,
             readOnly: o.readOnly,
+            ref: function () {
+                self.editor = this;
+            },
             listeners: [{
                 eventName: BI.NicEditor.EVENT_BLUR,
                 action: function () {
@@ -11128,23 +11135,28 @@ BI.RichEditor = BI.inherit(BI.Widget, {
             }, {
                 eventName: BI.NicEditor.EVENT_FOCUS,
                 action: function () {
-                    if(!self.combo.isViewVisible()) {
+                    if (!o.readOnly && !self.combo.isViewVisible()) {
                         self.combo.showView();
                     }
                     self.fireEvent(BI.RichEditor.EVENT_FOCUS);
                 }
             }]
-        });
-
-        this.combo = BI.createWidget({
+        };
+        if(o.readOnly) {
+            return editor;
+        }
+        this.editor = BI.createWidget(editor);
+        return {
             type: "bi.combo",
-            element: this,
             toggle: false,
-            trigger: o.readOnly ? "" : "click",
+            trigger: "click",
             direction: "top,right",
             isNeedAdjustWidth: false,
             isNeedAdjustHeight: false,
             adjustLength: 1,
+            ref: function () {
+                self.combo = this;
+            },
             el: this.editor,
             popup: {
                 el: BI.extend({
@@ -11154,12 +11166,14 @@ BI.RichEditor = BI.inherit(BI.Widget, {
                 height: 30,
                 stopPropagation: true,
                 stopEvent: true
-            }
-        });
-
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
-            self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
-        });
+            },
+            listeners: [{
+                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
+                action: function () {
+                    self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
+                }
+            }]
+        };
     },
 
     focus: function () {
diff --git a/dist/core.js b/dist/core.js
index bb332bde76..6be0fadb60 100644
--- a/dist/core.js
+++ b/dist/core.js
@@ -28465,17 +28465,19 @@ BI.extend(BI.DOM, {
         $("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w;
-        canvas.height = 16;
+        canvas.height = 24;
         var ctx = canvas.getContext("2d");
-        ctx.font = "14px Georgia";
-        ctx.fillStyle = "#ffffff";
-        ctx.fillText(param, 3, 14);
+        // ctx.fillStyle = "#EAF2FD";
+        ctx.font = "12px Georgia";
+        ctx.fillStyle = "#3D4D66";
+        ctx.textBaseline = "middle";
+        ctx.fillText(param, 6, 12);
         $(canvas).destroy();
         return {
             width: w,
-            height: 16,
+            height: 24,
             src: canvas.toDataURL("image/png"),
-            style: "background-color: #3f8ce8; vertical-align: sub; margin: 0 3px;",
+            style: "background-color: #EAF2FD; vertical-align: sub; margin: 0 3px;",
             alt: param
         };
     }
diff --git a/dist/demo.js b/dist/demo.js
index 23a00fd2b6..eaa2076164 100644
--- a/dist/demo.js
+++ b/dist/demo.js
@@ -882,8 +882,7 @@ BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.RichEditor = BI.inher
         var image = BI.DOM.getImage("测试");
         var src = image.src;
         var style = image.style;
-
-        this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
+        this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img class=\"rich-editor-param\" width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
     }
 });
 BI.shortcut("demo.rich_editor", Demo.RichEditor);/**
diff --git a/dist/fineui.css b/dist/fineui.css
index 6c9ae539a4..c6a02c98fd 100644
--- a/dist/fineui.css
+++ b/dist/fineui.css
@@ -2996,6 +2996,11 @@ li.CodeMirror-hint-active {
 .bi-direction-pager .direction-pager-next {
   font-size: 16px;
 }
+.bi-rich-editor .rich-editor-param {
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
 .bi-rich-editor-text-toolbar .text-toolbar-button {
   font-size: 16px;
 }
diff --git a/dist/widget.js b/dist/widget.js
index 62520f30ec..61c1cd36ba 100644
--- a/dist/widget.js
+++ b/dist/widget.js
@@ -1628,7 +1628,7 @@ BI.shortcut("bi.static_date_pane_card", BI.StaticDatePaneCard);BI.DynamicDatePan
                         }
                     }],
                     ref: function () {
-                        self.switch = this;
+                        self.switcher = this;
                     }
                 },
                 height: 30
@@ -2363,7 +2363,7 @@ BI.shortcut("bi.static_date_time_pane_card", BI.StaticDateTimePaneCard);BI.Dynam
                         }
                     }],
                     ref: function () {
-                        self.switch = this;
+                        self.switcher = this;
                     }
                 },
                 height: 30
diff --git a/src/case/richeditor/bar/action.richeditor.param.js b/src/case/richeditor/bar/action.richeditor.param.js
index 222774ff30..3bbfea6118 100644
--- a/src/case/richeditor/bar/action.richeditor.param.js
+++ b/src/case/richeditor/bar/action.richeditor.param.js
@@ -6,7 +6,11 @@
  */
 BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
     _defaultConfig: function () {
-        return BI.extend(BI.RichEditorParamAction.superclass._defaultConfig.apply(this, arguments), {});
+        return BI.extend(BI.RichEditorParamAction.superclass._defaultConfig.apply(this, arguments), {
+            paramFormatter: function (v) {
+                return v;
+            }
+        });
     },
 
     _init: function () {
@@ -41,11 +45,11 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
         var o = this.options;
         var instance = o.editor.instance;
         var image = new Image();
-        var attrs = BI.DOM.getImage(param);
+        var attrs = BI.DOM.getImage(o.paramFormatter(param));
         image.src = attrs.src;
         image.alt = param;
         image.style = attrs.style;
-
+        $(image).addClass("rich-editor-param");
         var sel = this._get$Sel();
         var wrapper = o.editor.instance.getElm().element;
         if (wrapper.find(sel).length <= 0) {
diff --git a/src/case/richeditor/richeditor.js b/src/case/richeditor/richeditor.js
index e7f8acc228..809c2a6716 100644
--- a/src/case/richeditor/richeditor.js
+++ b/src/case/richeditor/richeditor.js
@@ -6,20 +6,23 @@
  * @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",
-            toolbar: {}
-        });
+
+    props: {
+        baseCls: "bi-rich-editor",
+        toolbar: {},
+        readOnly: false
     },
-    _init: function () {
-        BI.RichEditor.superclass._init.apply(this, arguments);
+
+    render: function () {
         var self = this, o = this.options;
-        this.editor = BI.createWidget({
+        var editor = {
             type: "bi.nic_editor",
             width: o.width,
             height: o.height,
             readOnly: o.readOnly,
+            ref: function () {
+                self.editor = this;
+            },
             listeners: [{
                 eventName: BI.NicEditor.EVENT_BLUR,
                 action: function () {
@@ -28,23 +31,28 @@ BI.RichEditor = BI.inherit(BI.Widget, {
             }, {
                 eventName: BI.NicEditor.EVENT_FOCUS,
                 action: function () {
-                    if(!self.combo.isViewVisible()) {
+                    if (!o.readOnly && !self.combo.isViewVisible()) {
                         self.combo.showView();
                     }
                     self.fireEvent(BI.RichEditor.EVENT_FOCUS);
                 }
             }]
-        });
-
-        this.combo = BI.createWidget({
+        };
+        if(o.readOnly) {
+            return editor;
+        }
+        this.editor = BI.createWidget(editor);
+        return {
             type: "bi.combo",
-            element: this,
             toggle: false,
-            trigger: o.readOnly ? "" : "click",
+            trigger: "click",
             direction: "top,right",
             isNeedAdjustWidth: false,
             isNeedAdjustHeight: false,
             adjustLength: 1,
+            ref: function () {
+                self.combo = this;
+            },
             el: this.editor,
             popup: {
                 el: BI.extend({
@@ -54,12 +62,14 @@ BI.RichEditor = BI.inherit(BI.Widget, {
                 height: 30,
                 stopPropagation: true,
                 stopEvent: true
-            }
-        });
-
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
-            self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
-        });
+            },
+            listeners: [{
+                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
+                action: function () {
+                    self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
+                }
+            }]
+        };
     },
 
     focus: function () {
diff --git a/src/core/func/function.js b/src/core/func/function.js
index 64c6f6454d..3877f7e7aa 100644
--- a/src/core/func/function.js
+++ b/src/core/func/function.js
@@ -306,17 +306,19 @@ BI.extend(BI.DOM, {
         $("body").append(canvas);
         var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
         canvas.width = w;
-        canvas.height = 16;
+        canvas.height = 24;
         var ctx = canvas.getContext("2d");
-        ctx.font = "14px Georgia";
-        ctx.fillStyle = "#ffffff";
-        ctx.fillText(param, 3, 14);
+        // ctx.fillStyle = "#EAF2FD";
+        ctx.font = "12px Georgia";
+        ctx.fillStyle = "#3D4D66";
+        ctx.textBaseline = "middle";
+        ctx.fillText(param, 6, 12);
         $(canvas).destroy();
         return {
             width: w,
-            height: 16,
+            height: 24,
             src: canvas.toDataURL("image/png"),
-            style: "background-color: #3f8ce8; vertical-align: sub; margin: 0 3px;",
+            style: "background-color: #EAF2FD; vertical-align: sub; margin: 0 3px;",
             alt: param
         };
     }
diff --git a/src/css/base/richeditor/richeditor.css b/src/css/base/richeditor/richeditor.css
new file mode 100644
index 0000000000..84375e60c3
--- /dev/null
+++ b/src/css/base/richeditor/richeditor.css
@@ -0,0 +1,5 @@
+.bi-rich-editor .rich-editor-param {
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+}
diff --git a/src/less/base/richeditor/richeditor.less b/src/less/base/richeditor/richeditor.less
new file mode 100644
index 0000000000..52d0cd8765
--- /dev/null
+++ b/src/less/base/richeditor/richeditor.less
@@ -0,0 +1,7 @@
+@import "../../index";
+
+.bi-rich-editor {
+  & .rich-editor-param{
+    .border-radius(12px);
+  }
+}
\ No newline at end of file
diff --git a/src/widget/datepane/datepane.js b/src/widget/datepane/datepane.js
index f559cb8c83..1104fe74cc 100644
--- a/src/widget/datepane/datepane.js
+++ b/src/widget/datepane/datepane.js
@@ -47,7 +47,7 @@ BI.DynamicDatePane = BI.inherit(BI.Widget, {
                         }
                     }],
                     ref: function () {
-                        self.switch = this;
+                        self.switcher = this;
                     }
                 },
                 height: 30
diff --git a/src/widget/datetimepane/datetimepane.js b/src/widget/datetimepane/datetimepane.js
index 64b41be516..97b0eff4a7 100644
--- a/src/widget/datetimepane/datetimepane.js
+++ b/src/widget/datetimepane/datetimepane.js
@@ -47,7 +47,7 @@ BI.DynamicDateTimePane = BI.inherit(BI.Widget, {
                         }
                     }],
                     ref: function () {
-                        self.switch = this;
+                        self.switcher = this;
                     }
                 },
                 height: 30