fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

BI-17382 rich_editor交互

es6
windy 6 years ago
parent
5b2309180e
commit
fca45a2ca5
16 changed files with 170 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      demo/js/base/editor/demo.rich_editor.js
  2. 5
      dist/base.css
  3. 5
      dist/bundle.css
  4. 78
      dist/bundle.js
  5. 60
      dist/case.js
  6. 14
      dist/core.js
  7. 3
      dist/demo.js
  8. 5
      dist/fineui.css
  9. 4
      dist/widget.js
  10. 10
      src/case/richeditor/bar/action.richeditor.param.js
  11. 50
      src/case/richeditor/richeditor.js
  12. 14
      src/core/func/function.js
  13. 5
      src/css/base/richeditor/richeditor.css
  14. 7
      src/less/base/richeditor/richeditor.less
  15. 2
      src/widget/datepane/datepane.js
  16. 2
      src/widget/datetimepane/datetimepane.js

3
demo/js/base/editor/demo.rich_editor.js
Unescape View File

@ -29,8 +29,7 @@ Demo.RichEditor = BI.inherit(BI.Widget, {
var image = BI.DOM.getImage("测试"); var image = BI.DOM.getImage("测试");
var src = image.src; var src = image.src;
var style = image.style; var style = image.style;
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>");
this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
} }
}); });
BI.shortcut("demo.rich_editor", Demo.RichEditor); BI.shortcut("demo.rich_editor", Demo.RichEditor);

5
dist/base.css vendored
Unescape View File

@ -958,6 +958,11 @@ li.CodeMirror-hint-active {
.bi-direction-pager .direction-pager-next { .bi-direction-pager .direction-pager-next {
font-size: 16px; 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 { .bi-rich-editor-text-toolbar .text-toolbar-button {
font-size: 16px; font-size: 16px;
} }

5
dist/bundle.css vendored
Unescape View File

@ -2996,6 +2996,11 @@ li.CodeMirror-hint-active {
.bi-direction-pager .direction-pager-next { .bi-direction-pager .direction-pager-next {
font-size: 16px; 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 { .bi-rich-editor-text-toolbar .text-toolbar-button {
font-size: 16px; font-size: 16px;
} }

78
dist/bundle.js vendored
Unescape View File

@ -28465,17 +28465,19 @@ BI.extend(BI.DOM, {
$("body").append(canvas); $("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6; var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w; canvas.width = w;
canvas.height = 16; canvas.height = 24;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.font = "14px Georgia"; // ctx.fillStyle = "#EAF2FD";
ctx.fillStyle = "#ffffff"; ctx.font = "12px Georgia";
ctx.fillText(param, 3, 14); ctx.fillStyle = "#3D4D66";
ctx.textBaseline = "middle";
ctx.fillText(param, 6, 12);
$(canvas).destroy(); $(canvas).destroy();
return { return {
width: w, width: w,
height: 16, height: 24,
src: canvas.toDataURL("image/png"), 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 alt: param
}; };
} }
@ -81966,7 +81968,11 @@ BI.RichEditorAction = BI.inherit(BI.Widget, {
*/ */
BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, { BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
_defaultConfig: function () { _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 () { _init: function () {
@ -82001,11 +82007,11 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
var o = this.options; var o = this.options;
var instance = o.editor.instance; var instance = o.editor.instance;
var image = new Image(); var image = new Image();
var attrs = BI.DOM.getImage(param); var attrs = BI.DOM.getImage(o.paramFormatter(param));
image.src = attrs.src; image.src = attrs.src;
image.alt = param; image.alt = param;
image.style = attrs.style; image.style = attrs.style;
$(image).addClass("rich-editor-param");
var sel = this._get$Sel(); var sel = this._get$Sel();
var wrapper = o.editor.instance.getElm().element; var wrapper = o.editor.instance.getElm().element;
if (wrapper.find(sel).length <= 0) { if (wrapper.find(sel).length <= 0) {
@ -83037,20 +83043,23 @@ BI.shortcut("bi.rich_editor_size_chooser", BI.RichEditorSizeChooser);/**
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.RichEditor = BI.inherit(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", 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; var self = this, o = this.options;
this.editor = BI.createWidget({ var editor = {
type: "bi.nic_editor", type: "bi.nic_editor",
width: o.width, width: o.width,
height: o.height, height: o.height,
readOnly: o.readOnly, readOnly: o.readOnly,
ref: function () {
self.editor = this;
},
listeners: [{ listeners: [{
eventName: BI.NicEditor.EVENT_BLUR, eventName: BI.NicEditor.EVENT_BLUR,
action: function () { action: function () {
@ -83059,23 +83068,28 @@ BI.RichEditor = BI.inherit(BI.Widget, {
}, { }, {
eventName: BI.NicEditor.EVENT_FOCUS, eventName: BI.NicEditor.EVENT_FOCUS,
action: function () { action: function () {
if(!self.combo.isViewVisible()) { if (!o.readOnly && !self.combo.isViewVisible()) {
self.combo.showView(); self.combo.showView();
} }
self.fireEvent(BI.RichEditor.EVENT_FOCUS); self.fireEvent(BI.RichEditor.EVENT_FOCUS);
} }
}] }]
}); };
if(o.readOnly) {
this.combo = BI.createWidget({ return editor;
}
this.editor = BI.createWidget(editor);
return {
type: "bi.combo", type: "bi.combo",
element: this,
toggle: false, toggle: false,
trigger: o.readOnly ? "" : "click", trigger: "click",
direction: "top,right", direction: "top,right",
isNeedAdjustWidth: false, isNeedAdjustWidth: false,
isNeedAdjustHeight: false, isNeedAdjustHeight: false,
adjustLength: 1, adjustLength: 1,
ref: function () {
self.combo = this;
},
el: this.editor, el: this.editor,
popup: { popup: {
el: BI.extend({ el: BI.extend({
@ -83085,12 +83099,14 @@ BI.RichEditor = BI.inherit(BI.Widget, {
height: 30, height: 30,
stopPropagation: true, stopPropagation: true,
stopEvent: true stopEvent: true
} },
}); listeners: [{
eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { action: function () {
self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW); self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
}); }
}]
};
}, },
focus: function () { focus: function () {
@ -88128,7 +88144,7 @@ BI.shortcut("bi.static_date_pane_card", BI.StaticDatePaneCard);BI.DynamicDatePan
} }
}], }],
ref: function () { ref: function () {
self.switch = this; self.switcher = this;
} }
}, },
height: 30 height: 30
@ -88863,7 +88879,7 @@ BI.shortcut("bi.static_date_time_pane_card", BI.StaticDateTimePaneCard);BI.Dynam
} }
}], }],
ref: function () { ref: function () {
self.switch = this; self.switcher = this;
} }
}, },
height: 30 height: 30

60
dist/case.js vendored
Unescape View File

@ -10035,7 +10035,11 @@ BI.RichEditorAction = BI.inherit(BI.Widget, {
*/ */
BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, { BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
_defaultConfig: function () { _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 () { _init: function () {
@ -10070,11 +10074,11 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
var o = this.options; var o = this.options;
var instance = o.editor.instance; var instance = o.editor.instance;
var image = new Image(); var image = new Image();
var attrs = BI.DOM.getImage(param); var attrs = BI.DOM.getImage(o.paramFormatter(param));
image.src = attrs.src; image.src = attrs.src;
image.alt = param; image.alt = param;
image.style = attrs.style; image.style = attrs.style;
$(image).addClass("rich-editor-param");
var sel = this._get$Sel(); var sel = this._get$Sel();
var wrapper = o.editor.instance.getElm().element; var wrapper = o.editor.instance.getElm().element;
if (wrapper.find(sel).length <= 0) { if (wrapper.find(sel).length <= 0) {
@ -11106,20 +11110,23 @@ BI.shortcut("bi.rich_editor_size_chooser", BI.RichEditorSizeChooser);/**
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.RichEditor = BI.inherit(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", 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; var self = this, o = this.options;
this.editor = BI.createWidget({ var editor = {
type: "bi.nic_editor", type: "bi.nic_editor",
width: o.width, width: o.width,
height: o.height, height: o.height,
readOnly: o.readOnly, readOnly: o.readOnly,
ref: function () {
self.editor = this;
},
listeners: [{ listeners: [{
eventName: BI.NicEditor.EVENT_BLUR, eventName: BI.NicEditor.EVENT_BLUR,
action: function () { action: function () {
@ -11128,23 +11135,28 @@ BI.RichEditor = BI.inherit(BI.Widget, {
}, { }, {
eventName: BI.NicEditor.EVENT_FOCUS, eventName: BI.NicEditor.EVENT_FOCUS,
action: function () { action: function () {
if(!self.combo.isViewVisible()) { if (!o.readOnly && !self.combo.isViewVisible()) {
self.combo.showView(); self.combo.showView();
} }
self.fireEvent(BI.RichEditor.EVENT_FOCUS); self.fireEvent(BI.RichEditor.EVENT_FOCUS);
} }
}] }]
}); };
if(o.readOnly) {
this.combo = BI.createWidget({ return editor;
}
this.editor = BI.createWidget(editor);
return {
type: "bi.combo", type: "bi.combo",
element: this,
toggle: false, toggle: false,
trigger: o.readOnly ? "" : "click", trigger: "click",
direction: "top,right", direction: "top,right",
isNeedAdjustWidth: false, isNeedAdjustWidth: false,
isNeedAdjustHeight: false, isNeedAdjustHeight: false,
adjustLength: 1, adjustLength: 1,
ref: function () {
self.combo = this;
},
el: this.editor, el: this.editor,
popup: { popup: {
el: BI.extend({ el: BI.extend({
@ -11154,12 +11166,14 @@ BI.RichEditor = BI.inherit(BI.Widget, {
height: 30, height: 30,
stopPropagation: true, stopPropagation: true,
stopEvent: true stopEvent: true
} },
}); listeners: [{
eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { action: function () {
self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW); self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
}); }
}]
};
}, },
focus: function () { focus: function () {

14
dist/core.js vendored
Unescape View File

@ -28465,17 +28465,19 @@ BI.extend(BI.DOM, {
$("body").append(canvas); $("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6; var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w; canvas.width = w;
canvas.height = 16; canvas.height = 24;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.font = "14px Georgia"; // ctx.fillStyle = "#EAF2FD";
ctx.fillStyle = "#ffffff"; ctx.font = "12px Georgia";
ctx.fillText(param, 3, 14); ctx.fillStyle = "#3D4D66";
ctx.textBaseline = "middle";
ctx.fillText(param, 6, 12);
$(canvas).destroy(); $(canvas).destroy();
return { return {
width: w, width: w,
height: 16, height: 24,
src: canvas.toDataURL("image/png"), 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 alt: param
}; };
} }

3
dist/demo.js vendored
Unescape View File

@ -882,8 +882,7 @@ BI.shortcut("demo.multifile_editor", Demo.CodeEditor);Demo.RichEditor = BI.inher
var image = BI.DOM.getImage("测试"); var image = BI.DOM.getImage("测试");
var src = image.src; var src = image.src;
var style = image.style; var style = image.style;
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>");
this.editor.setValue("<div>这是一条<font size=\"4\" color=\"#009de3\">测试</font>数据<img width='" + image.width + "' height='" + image.height + "' src='" + src + "' style='" + style + "' /></div>");
} }
}); });
BI.shortcut("demo.rich_editor", Demo.RichEditor);/** BI.shortcut("demo.rich_editor", Demo.RichEditor);/**

5
dist/fineui.css vendored
Unescape View File

@ -2996,6 +2996,11 @@ li.CodeMirror-hint-active {
.bi-direction-pager .direction-pager-next { .bi-direction-pager .direction-pager-next {
font-size: 16px; 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 { .bi-rich-editor-text-toolbar .text-toolbar-button {
font-size: 16px; font-size: 16px;
} }

4
dist/widget.js vendored
Unescape View File

@ -1628,7 +1628,7 @@ BI.shortcut("bi.static_date_pane_card", BI.StaticDatePaneCard);BI.DynamicDatePan
} }
}], }],
ref: function () { ref: function () {
self.switch = this; self.switcher = this;
} }
}, },
height: 30 height: 30
@ -2363,7 +2363,7 @@ BI.shortcut("bi.static_date_time_pane_card", BI.StaticDateTimePaneCard);BI.Dynam
} }
}], }],
ref: function () { ref: function () {
self.switch = this; self.switcher = this;
} }
}, },
height: 30 height: 30

10
src/case/richeditor/bar/action.richeditor.param.js
Unescape View File

@ -6,7 +6,11 @@
*/ */
BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, { BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
_defaultConfig: function () { _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 () { _init: function () {
@ -41,11 +45,11 @@ BI.RichEditorParamAction = BI.inherit(BI.RichEditorAction, {
var o = this.options; var o = this.options;
var instance = o.editor.instance; var instance = o.editor.instance;
var image = new Image(); var image = new Image();
var attrs = BI.DOM.getImage(param); var attrs = BI.DOM.getImage(o.paramFormatter(param));
image.src = attrs.src; image.src = attrs.src;
image.alt = param; image.alt = param;
image.style = attrs.style; image.style = attrs.style;
$(image).addClass("rich-editor-param");
var sel = this._get$Sel(); var sel = this._get$Sel();
var wrapper = o.editor.instance.getElm().element; var wrapper = o.editor.instance.getElm().element;
if (wrapper.find(sel).length <= 0) { if (wrapper.find(sel).length <= 0) {

50
src/case/richeditor/richeditor.js
Unescape View File

@ -6,20 +6,23 @@
* @extends BI.Widget * @extends BI.Widget
*/ */
BI.RichEditor = BI.inherit(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", 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; var self = this, o = this.options;
this.editor = BI.createWidget({ var editor = {
type: "bi.nic_editor", type: "bi.nic_editor",
width: o.width, width: o.width,
height: o.height, height: o.height,
readOnly: o.readOnly, readOnly: o.readOnly,
ref: function () {
self.editor = this;
},
listeners: [{ listeners: [{
eventName: BI.NicEditor.EVENT_BLUR, eventName: BI.NicEditor.EVENT_BLUR,
action: function () { action: function () {
@ -28,23 +31,28 @@ BI.RichEditor = BI.inherit(BI.Widget, {
}, { }, {
eventName: BI.NicEditor.EVENT_FOCUS, eventName: BI.NicEditor.EVENT_FOCUS,
action: function () { action: function () {
if(!self.combo.isViewVisible()) { if (!o.readOnly && !self.combo.isViewVisible()) {
self.combo.showView(); self.combo.showView();
} }
self.fireEvent(BI.RichEditor.EVENT_FOCUS); self.fireEvent(BI.RichEditor.EVENT_FOCUS);
} }
}] }]
}); };
if(o.readOnly) {
this.combo = BI.createWidget({ return editor;
}
this.editor = BI.createWidget(editor);
return {
type: "bi.combo", type: "bi.combo",
element: this,
toggle: false, toggle: false,
trigger: o.readOnly ? "" : "click", trigger: "click",
direction: "top,right", direction: "top,right",
isNeedAdjustWidth: false, isNeedAdjustWidth: false,
isNeedAdjustHeight: false, isNeedAdjustHeight: false,
adjustLength: 1, adjustLength: 1,
ref: function () {
self.combo = this;
},
el: this.editor, el: this.editor,
popup: { popup: {
el: BI.extend({ el: BI.extend({
@ -54,12 +62,14 @@ BI.RichEditor = BI.inherit(BI.Widget, {
height: 30, height: 30,
stopPropagation: true, stopPropagation: true,
stopEvent: true stopEvent: true
} },
}); listeners: [{
eventName: BI.Combo.EVENT_AFTER_HIDEVIEW,
this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () { action: function () {
self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW); self.fireEvent(BI.RichEditor.EVENT_AFTER_HIDEVIEW);
}); }
}]
};
}, },
focus: function () { focus: function () {

14
src/core/func/function.js
Unescape View File

@ -306,17 +306,19 @@ BI.extend(BI.DOM, {
$("body").append(canvas); $("body").append(canvas);
var w = BI.DOM.getTextSizeWidth(param, 14) + 6; var w = BI.DOM.getTextSizeWidth(param, 14) + 6;
canvas.width = w; canvas.width = w;
canvas.height = 16; canvas.height = 24;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.font = "14px Georgia"; // ctx.fillStyle = "#EAF2FD";
ctx.fillStyle = "#ffffff"; ctx.font = "12px Georgia";
ctx.fillText(param, 3, 14); ctx.fillStyle = "#3D4D66";
ctx.textBaseline = "middle";
ctx.fillText(param, 6, 12);
$(canvas).destroy(); $(canvas).destroy();
return { return {
width: w, width: w,
height: 16, height: 24,
src: canvas.toDataURL("image/png"), 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 alt: param
}; };
} }

5
src/css/base/richeditor/richeditor.css
Unescape View File

@ -0,0 +1,5 @@
.bi-rich-editor .rich-editor-param {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}

7
src/less/base/richeditor/richeditor.less
Unescape View File

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

2
src/widget/datepane/datepane.js
Unescape View File

@ -47,7 +47,7 @@ BI.DynamicDatePane = BI.inherit(BI.Widget, {
} }
}], }],
ref: function () { ref: function () {
self.switch = this; self.switcher = this;
} }
}, },
height: 30 height: 30

2
src/widget/datetimepane/datetimepane.js
Unescape View File

@ -47,7 +47,7 @@ BI.DynamicDateTimePane = BI.inherit(BI.Widget, {
} }
}], }],
ref: function () { ref: function () {
self.switch = this; self.switcher = this;
} }
}, },
height: 30 height: 30

Write Preview
Loading…
Cancel
Save