BI-17382 rich_editor交互

7 years ago · fca45a2ca5
16 changed files with 170 additions and 97 deletions
--- 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);
--- 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;
 }
--- 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;
 }
--- 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), {
+
+    props: {
        baseCls: "bi-rich-editor",
-            toolbar: {}
-        });
+        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 () {
+            },
+            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
--- 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), {
+
+    props: {
        baseCls: "bi-rich-editor",
-            toolbar: {}
-        });
+        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 () {
+            },
+            listeners: [{
+                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
+                action: function () {
                    self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
-        });
+                }
+            }]
+        };
    },

    focus: function () {
--- 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
        };
    }
--- 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);/**
--- 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;
 }
--- 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
--- 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) {
--- 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), {
+
+    props: {
        baseCls: "bi-rich-editor",
-            toolbar: {}
-        });
+        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 () {
+            },
+            listeners: [{
+                eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
+                action: function () {
                    self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
-        });
+                }
+            }]
+        };
    },

    focus: function () {
--- 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
        };
    }
--- a/src/css/base/richeditor/richeditor.css
+++ 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;
+}
--- a/src/less/base/richeditor/richeditor.less
+++ b/src/less/base/richeditor/richeditor.less
@ -0,0 +1,7 @@
+@import "../../index";
+
+.bi-rich-editor {
+  & .rich-editor-param{
+    .border-radius(12px);
+  }
+}
--- 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
--- 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