BI-17382 rich_editor交互

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);

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;
 }

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;
 }

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

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 () {

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
         };
     }

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);/**

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;
 }

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

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) {

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 () {

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
         };
     }

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;
+}

src/less/base/richeditor/richeditor.less

@@ -0,0 +1,7 @@
+@import "../../index";
+
+.bi-rich-editor {
+  & .rich-editor-param{
+    .border-radius(12px);
+  }
+}

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

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