From 05cbec7925f275f310408b49721e9c9aeb461d21 Mon Sep 17 00:00:00 2001 From: guy Date: Sun, 17 Sep 2017 18:15:27 +0800 Subject: [PATCH] richeditor --- bi/base.js | 1368 ++++++++++++++++++++++- bi/core.css | 1 - demo/js/base/editor/demo.rich_editor.js | 21 + demo/js/config/base.js | 4 + dist/base.js | 1368 ++++++++++++++++++++++- dist/bundle.css | 1 - dist/bundle.js | 1368 ++++++++++++++++++++++- dist/core.css | 1 - dist/demo.js | 26 +- src/base/richeditor/nicEdit.js | 1325 ++++++++++++++++++++++ src/base/richeditor/richeditor.js | 42 + src/css/core/normalize2.css | 1 - src/less/core/normalize2.less | 2 +- 13 files changed, 5519 insertions(+), 9 deletions(-) create mode 100644 demo/js/base/editor/demo.rich_editor.js create mode 100644 src/base/richeditor/nicEdit.js create mode 100644 src/base/richeditor/richeditor.js diff --git a/bi/base.js b/bi/base.js index e2b18acbc..1b05bc2ee 100644 --- a/bi/base.js +++ b/bi/base.js @@ -16086,7 +16086,1373 @@ 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);/** +BI.shortcut("bi.pager", BI.Pager);!(function(){ + var bkExtend = function(){ + var args = arguments; + if (args.length == 1) args = [this, args[0]]; + for (var prop in args[1]) args[0][prop] = args[1][prop]; + return args[0]; + }; + function bkClass() { } + bkClass.prototype.construct = function() {}; + bkClass.extend = function(def) { + var classDef = function() { + if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments); } + }; + var proto = new this(bkClass); + bkExtend(proto,def); + classDef.prototype = proto; + classDef.extend = this.extend; + return classDef; + }; + + var bkElement = bkClass.extend({ + construct : function(elm,d) { + if(typeof(elm) == "string") { + elm = (d || document).createElement(elm); + } + elm = $BK(elm); + return elm; + }, + + appendTo : function(elm) { + elm.appendChild(this); + return this; + }, + + appendBefore : function(elm) { + elm.parentNode.insertBefore(this,elm); + return this; + }, + + addEvent : function(type, fn) { + bkLib.addEvent(this,type,fn); + return this; + }, + + setContent : function(c) { + this.innerHTML = c; + return this; + }, + + pos : function() { + var curleft = curtop = 0; + var o = obj = this; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + } + var b = (!window.opera) ? parseInt(this.getStyle('border-width') || this.style.border) || 0 : 0; + return [curleft+b,curtop+b+this.offsetHeight]; + }, + + noSelect : function() { + bkLib.noSelect(this); + return this; + }, + + parentTag : function(t) { + var elm = this; + do { + if(elm && elm.nodeName && elm.nodeName.toUpperCase() == t) { + return elm; + } + elm = elm.parentNode; + } while(elm); + return false; + }, + + hasClass : function(cls) { + return this.className.match(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)')); + }, + + addClass : function(cls) { + if (!this.hasClass(cls)) { this.className += " nicEdit-"+cls }; + return this; + }, + + removeClass : function(cls) { + if (this.hasClass(cls)) { + this.className = this.className.replace(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)'),' '); + } + return this; + }, + + setStyle : function(st) { + var elmStyle = this.style; + for(var itm in st) { + switch(itm) { + case 'float': + elmStyle['cssFloat'] = elmStyle['styleFloat'] = st[itm]; + break; + case 'opacity': + elmStyle.opacity = st[itm]; + elmStyle.filter = "alpha(opacity=" + Math.round(st[itm]*100) + ")"; + break; + case 'className': + this.className = st[itm]; + break; + default: + //if(document.compatMode || itm != "cursor") { // Nasty Workaround for IE 5.5 + elmStyle[itm] = st[itm]; + //} + } + } + return this; + }, + + getStyle : function( cssRule, d ) { + var doc = (!d) ? document.defaultView : d; + if(this.nodeType == 1) + return (doc && doc.getComputedStyle) ? doc.getComputedStyle( this, null ).getPropertyValue(cssRule) : this.currentStyle[ bkLib.camelize(cssRule) ]; + }, + + remove : function() { + this.parentNode.removeChild(this); + return this; + }, + + setAttributes : function(at) { + for(var itm in at) { + this[itm] = at[itm]; + } + return this; + } + }); + + var bkLib = { + isMSIE : (navigator.appVersion.indexOf("MSIE") != -1), + + addEvent : function(obj, type, fn) { + (obj.addEventListener) ? obj.addEventListener( type, fn, false ) : obj.attachEvent("on"+type, fn); + }, + + toArray : function(iterable) { + var length = iterable.length, results = new Array(length); + while (length--) { results[length] = iterable[length] }; + return results; + }, + + noSelect : function(element) { + if(element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable','on'); + } + for(var i=0;i'); + } + this.instanceDoc = document.defaultView; + this.elm.addEvent('mousedown',this.selected.closureListener(this)).addEvent('keypress',this.keyDown.closureListener(this)).addEvent('focus',this.selected.closure(this)).addEvent('blur',this.blur.closure(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + remove : function() { + this.saveContent(); + if(this.copyElm || this.options.hasPanel) { + this.editorContain.remove(); + this.e.setStyle({'display' : 'block'}); + this.ne.removePanel(); + } + this.disable(); + this.ne.fireEvent('remove',this); + }, + + disable : function() { + this.elm.setAttribute('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'+((css) ? '' : '')+''+this.initialContent+''); + fd.close(); + this.frameDoc = fd; + + this.frameWin = $BK(this.elmFrame.contentWindow); + this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles); + this.instanceDoc = this.frameWin.document.defaultView; + + this.heightUpdate(); + this.frameDoc.addEvent('mousedown', this.selected.closureListener(this)).addEvent('keyup',this.heightUpdate.closureListener(this)).addEvent('keydown',this.keyDown.closureListener(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + getElm : function() { + return this.frameContent; + }, + + setContent : function(c) { + this.content = c; + this.ne.fireEvent('set',this); + this.frameContent.innerHTML = this.content; + this.heightUpdate(); + }, + + getSel : function() { + return (this.frameWin) ? this.frameWin.getSelection() : this.frameDoc.selection; + }, + + heightUpdate : function() { + this.elmFrame.style.height = Math.max(this.frameContent.offsetHeight,this.initialHeight)+'px'; + }, + + nicCommand : function(cmd,args) { + this.frameDoc.execCommand(cmd,false,args); + setTimeout(this.heightUpdate.closure(this),100); + } + + + }); + var nicEditorPanel = bkClass.extend({ + construct : function(e,options,nicEditor) { + this.elm = e; + this.options = options; + this.ne = nicEditor; + this.panelButtons = new Array(); + this.buttonList = bkExtend([],this.ne.options.buttonList); + + this.panelContain = new bkElement('DIV').setStyle({overflow : 'hidden', width : '100%', border : '1px solid #cccccc', backgroundColor : '#efefef'}).addClass('panelContain'); + this.panelElm = new bkElement('DIV').setStyle({margin : '2px', marginTop : '0px', zoom : 1, overflow : 'hidden'}).addClass('panel').appendTo(this.panelContain); + this.panelContain.appendTo(e); + + var opt = this.ne.options; + var buttons = opt.buttons; + for(button in buttons) { + this.addButton(button,opt,true); + } + this.reorder(); + e.noSelect(); + }, + + addButton : function(buttonName,options,noOrder) { + var button = options.buttons[buttonName]; + var type = (button['type']) ? eval('(typeof('+button['type']+') == "undefined") ? null : '+button['type']+';') : nicEditorButton; + var hasButton = bkLib.inArray(this.buttonList,buttonName); + if(type && (hasButton || this.ne.options.fullPanel)) { + this.panelButtons.push(new type(this.panelElm,buttonName,options,this.ne)); + if(!hasButton) { + this.buttonList.push(buttonName); + } + } + }, + + findButton : function(itm) { + for(var i=0;i'+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFamilySelect = nicEditorSelect.extend({ + sel : {'arial' : 'Arial','comic sans ms' : 'Comic Sans','courier new' : 'Courier New','georgia' : 'Georgia', 'helvetica' : 'Helvetica', 'impact' : 'Impact', 'times new roman' : 'Times', 'trebuchet ms' : 'Trebuchet', 'verdana' : 'Verdana'}, + + init : function() { + this.setDisplay('Font Family...'); + for(itm in this.sel) { + this.add(itm,''+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFormatSelect = nicEditorSelect.extend({ + sel : {'p' : 'Paragraph', 'pre' : 'Pre', 'h6' : 'Heading 6', 'h5' : 'Heading 5', 'h4' : 'Heading 4', 'h3' : 'Heading 3', 'h2' : 'Heading 2', 'h1' : 'Heading 1'}, + + init : function() { + this.setDisplay('Font Format...'); + for(itm in this.sel) { + var tag = itm.toUpperCase(); + this.add('<'+tag+'>','<'+itm+' style="padding: 0px; margin: 0px;">'+this.sel[itm]+''); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSelectOptions); + + + + /* START CONFIG */ + var nicLinkOptions = { + buttons : { + 'link' : {name : 'Add Link', type : 'nicLinkButton', tags : ['A']}, + 'unlink' : {name : 'Remove Link', command : 'unlink', noActive : true} + } + }; + /* END CONFIG */ + + var nicLinkButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.ln = this.ne.selectedInstance.selElm().parentTag('A'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Link'}, + 'href' : {type : 'text', txt : 'URL', value : 'http://', style : {width: '150px'}}, + 'title' : {type : 'text', txt : 'Title'}, + 'target' : {type : 'select', txt : 'Open In', options : {'' : 'Current Window', '_blank' : 'New Window'},style : {width : '100px'}} + },this.ln); + }, + + submit : function(e) { + var url = this.inputs['href'].value; + if(url == "http://" || url == "") { + alert("You must enter a URL to Create a Link"); + return false; + } + this.removePane(); + + if(!this.ln) { + var tmp = 'javascript:nicTemp();'; + this.ne.nicCommand("createlink",tmp); + this.ln = this.findElm('A','href',tmp); + } + if(this.ln) { + this.ln.setAttributes({ + href : this.inputs['href'].value, + title : this.inputs['title'].value, + target : this.inputs['target'].options[this.inputs['target'].selectedIndex].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicLinkOptions); + + + + /* START CONFIG */ + var nicColorOptions = { + buttons : { + 'forecolor' : {name : __('Change Text Color'), type : 'nicEditorColorButton', noClose : true}, + 'bgcolor' : {name : __('Change Background Color'), type : 'nicEditorBgColorButton', noClose : true} + } + }; + /* END CONFIG */ + + var nicEditorColorButton = nicEditorAdvancedButton.extend({ + addPane : function() { + var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 'CC',5 : 'FF'}; + var colorItems = new bkElement('DIV').setStyle({width: '270px'}); + + for(var r in colorList) { + for(var b in colorList) { + for(var g in colorList) { + var colorCode = '#'+colorList[r]+colorList[g]+colorList[b]; + + var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems); + var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare); + var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder); + + if(!window.opera) { + colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent; + } + + } + } + } + this.pane.append(colorItems.noSelect()); + }, + + colorSelect : function(c) { + this.ne.nicCommand('foreColor',c); + this.removePane(); + }, + + on : function(colorBorder) { + colorBorder.setStyle({border : '2px solid #000'}); + }, + + off : function(colorBorder,colorCode) { + colorBorder.setStyle({border : '2px solid '+colorCode}); + } + }); + + var nicEditorBgColorButton = nicEditorColorButton.extend({ + colorSelect : function(c) { + this.ne.nicCommand('hiliteColor',c); + this.removePane(); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicColorOptions); + + + + /* START CONFIG */ + var nicImageOptions = { + buttons : { + 'image' : {name : 'Add Image', type : 'nicImageButton', tags : ['IMG']} + } + + }; + /* END CONFIG */ + + var nicImageButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.im = this.ne.selectedInstance.selElm().parentTag('IMG'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Image'}, + 'src' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}}, + 'alt' : {type : 'text', txt : 'Alt Text', style : {width: '100px'}}, + 'align' : {type : 'select', txt : 'Align', options : {none : 'Default','left' : 'Left', 'right' : 'Right'}} + },this.im); + }, + + submit : function(e) { + var src = this.inputs['src'].value; + if(src == "" || src == "http://") { + alert("You must enter a Image URL to insert"); + return false; + } + this.removePane(); + + if(!this.im) { + var tmp = 'javascript:nicImTemp();'; + this.ne.nicCommand("insertImage",tmp); + this.im = this.findElm('IMG','src',tmp); + } + if(this.im) { + this.im.setAttributes({ + src : this.inputs['src'].value, + alt : this.inputs['alt'].value, + align : this.inputs['align'].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicImageOptions); + + + + + /* START CONFIG */ + var nicSaveOptions = { + buttons : { + 'save' : {name : __('Save this content'), type : 'nicEditorSaveButton'} + } + }; + /* END CONFIG */ + + var nicEditorSaveButton = nicEditorButton.extend({ + init : function() { + if(!this.ne.options.onSave) { + this.margin.setStyle({'display' : 'none'}); + } + }, + mouseClick : function() { + var onSave = this.ne.options.onSave; + var selectedInstance = this.ne.selectedInstance; + onSave(selectedInstance.getContent(), selectedInstance.elm.id, selectedInstance); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSaveOptions); + +}()); + +/** + * 富文本编辑器 + * + * 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" + }); + }, + _init: function () { + BI.RichEditor.superclass._init.apply(this, arguments); + var o = this.options; + this.editor = BI.createWidget({ + type: "bi.layout", + tagName: "textarea", + width: o.width || "100%", + height: o.height || "100%" + }); + BI.createWidget({ + type: "bi.default", + element: this, + items: [this.editor] + }) + }, + + mounted: function () { + this.ne = new BI.nicEditor({ + maxHeight: this.options.height + }).panelInstance(this.editor.element[0]); + }, + + setValue: function (v) { + }, + + getValue: function () { + } +}); +BI.shortcut('bi.rich_editor', BI.RichEditor);/** * 超链接 * * Created by GUY on 2015/9/9. diff --git a/bi/core.css b/bi/core.css index cffc43627..db903348d 100644 --- a/bi/core.css +++ b/bi/core.css @@ -267,7 +267,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; diff --git a/demo/js/base/editor/demo.rich_editor.js b/demo/js/base/editor/demo.rich_editor.js new file mode 100644 index 000000000..1edb37c0f --- /dev/null +++ b/demo/js/base/editor/demo.rich_editor.js @@ -0,0 +1,21 @@ +Demo.RichEditor = BI.inherit(BI.Widget, { + props: { + baseCls: "demo-rich-editor" + }, + render: function () { + var editor = BI.createWidget({ + type: "bi.rich_editor", + cls: "mvc-border", + width: 600, + height: 400 + }); + BI.createWidget({ + type: "bi.vertical", + element: this, + hgap: 30, + vgap: 20, + items: [editor] + }) + } +}); +BI.shortcut("demo.rich_editor", Demo.RichEditor); \ No newline at end of file diff --git a/demo/js/config/base.js b/demo/js/config/base.js index f983e4a55..20f809d81 100644 --- 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, diff --git a/dist/base.js b/dist/base.js index f73bed46a..e3509c106 100644 --- a/dist/base.js +++ b/dist/base.js @@ -16086,7 +16086,1373 @@ 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);/** +BI.shortcut("bi.pager", BI.Pager);!(function(){ + var bkExtend = function(){ + var args = arguments; + if (args.length == 1) args = [this, args[0]]; + for (var prop in args[1]) args[0][prop] = args[1][prop]; + return args[0]; + }; + function bkClass() { } + bkClass.prototype.construct = function() {}; + bkClass.extend = function(def) { + var classDef = function() { + if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments); } + }; + var proto = new this(bkClass); + bkExtend(proto,def); + classDef.prototype = proto; + classDef.extend = this.extend; + return classDef; + }; + + var bkElement = bkClass.extend({ + construct : function(elm,d) { + if(typeof(elm) == "string") { + elm = (d || document).createElement(elm); + } + elm = $BK(elm); + return elm; + }, + + appendTo : function(elm) { + elm.appendChild(this); + return this; + }, + + appendBefore : function(elm) { + elm.parentNode.insertBefore(this,elm); + return this; + }, + + addEvent : function(type, fn) { + bkLib.addEvent(this,type,fn); + return this; + }, + + setContent : function(c) { + this.innerHTML = c; + return this; + }, + + pos : function() { + var curleft = curtop = 0; + var o = obj = this; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + } + var b = (!window.opera) ? parseInt(this.getStyle('border-width') || this.style.border) || 0 : 0; + return [curleft+b,curtop+b+this.offsetHeight]; + }, + + noSelect : function() { + bkLib.noSelect(this); + return this; + }, + + parentTag : function(t) { + var elm = this; + do { + if(elm && elm.nodeName && elm.nodeName.toUpperCase() == t) { + return elm; + } + elm = elm.parentNode; + } while(elm); + return false; + }, + + hasClass : function(cls) { + return this.className.match(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)')); + }, + + addClass : function(cls) { + if (!this.hasClass(cls)) { this.className += " nicEdit-"+cls }; + return this; + }, + + removeClass : function(cls) { + if (this.hasClass(cls)) { + this.className = this.className.replace(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)'),' '); + } + return this; + }, + + setStyle : function(st) { + var elmStyle = this.style; + for(var itm in st) { + switch(itm) { + case 'float': + elmStyle['cssFloat'] = elmStyle['styleFloat'] = st[itm]; + break; + case 'opacity': + elmStyle.opacity = st[itm]; + elmStyle.filter = "alpha(opacity=" + Math.round(st[itm]*100) + ")"; + break; + case 'className': + this.className = st[itm]; + break; + default: + //if(document.compatMode || itm != "cursor") { // Nasty Workaround for IE 5.5 + elmStyle[itm] = st[itm]; + //} + } + } + return this; + }, + + getStyle : function( cssRule, d ) { + var doc = (!d) ? document.defaultView : d; + if(this.nodeType == 1) + return (doc && doc.getComputedStyle) ? doc.getComputedStyle( this, null ).getPropertyValue(cssRule) : this.currentStyle[ bkLib.camelize(cssRule) ]; + }, + + remove : function() { + this.parentNode.removeChild(this); + return this; + }, + + setAttributes : function(at) { + for(var itm in at) { + this[itm] = at[itm]; + } + return this; + } + }); + + var bkLib = { + isMSIE : (navigator.appVersion.indexOf("MSIE") != -1), + + addEvent : function(obj, type, fn) { + (obj.addEventListener) ? obj.addEventListener( type, fn, false ) : obj.attachEvent("on"+type, fn); + }, + + toArray : function(iterable) { + var length = iterable.length, results = new Array(length); + while (length--) { results[length] = iterable[length] }; + return results; + }, + + noSelect : function(element) { + if(element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable','on'); + } + for(var i=0;i'); + } + this.instanceDoc = document.defaultView; + this.elm.addEvent('mousedown',this.selected.closureListener(this)).addEvent('keypress',this.keyDown.closureListener(this)).addEvent('focus',this.selected.closure(this)).addEvent('blur',this.blur.closure(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + remove : function() { + this.saveContent(); + if(this.copyElm || this.options.hasPanel) { + this.editorContain.remove(); + this.e.setStyle({'display' : 'block'}); + this.ne.removePanel(); + } + this.disable(); + this.ne.fireEvent('remove',this); + }, + + disable : function() { + this.elm.setAttribute('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'+((css) ? '' : '')+''+this.initialContent+''); + fd.close(); + this.frameDoc = fd; + + this.frameWin = $BK(this.elmFrame.contentWindow); + this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles); + this.instanceDoc = this.frameWin.document.defaultView; + + this.heightUpdate(); + this.frameDoc.addEvent('mousedown', this.selected.closureListener(this)).addEvent('keyup',this.heightUpdate.closureListener(this)).addEvent('keydown',this.keyDown.closureListener(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + getElm : function() { + return this.frameContent; + }, + + setContent : function(c) { + this.content = c; + this.ne.fireEvent('set',this); + this.frameContent.innerHTML = this.content; + this.heightUpdate(); + }, + + getSel : function() { + return (this.frameWin) ? this.frameWin.getSelection() : this.frameDoc.selection; + }, + + heightUpdate : function() { + this.elmFrame.style.height = Math.max(this.frameContent.offsetHeight,this.initialHeight)+'px'; + }, + + nicCommand : function(cmd,args) { + this.frameDoc.execCommand(cmd,false,args); + setTimeout(this.heightUpdate.closure(this),100); + } + + + }); + var nicEditorPanel = bkClass.extend({ + construct : function(e,options,nicEditor) { + this.elm = e; + this.options = options; + this.ne = nicEditor; + this.panelButtons = new Array(); + this.buttonList = bkExtend([],this.ne.options.buttonList); + + this.panelContain = new bkElement('DIV').setStyle({overflow : 'hidden', width : '100%', border : '1px solid #cccccc', backgroundColor : '#efefef'}).addClass('panelContain'); + this.panelElm = new bkElement('DIV').setStyle({margin : '2px', marginTop : '0px', zoom : 1, overflow : 'hidden'}).addClass('panel').appendTo(this.panelContain); + this.panelContain.appendTo(e); + + var opt = this.ne.options; + var buttons = opt.buttons; + for(button in buttons) { + this.addButton(button,opt,true); + } + this.reorder(); + e.noSelect(); + }, + + addButton : function(buttonName,options,noOrder) { + var button = options.buttons[buttonName]; + var type = (button['type']) ? eval('(typeof('+button['type']+') == "undefined") ? null : '+button['type']+';') : nicEditorButton; + var hasButton = bkLib.inArray(this.buttonList,buttonName); + if(type && (hasButton || this.ne.options.fullPanel)) { + this.panelButtons.push(new type(this.panelElm,buttonName,options,this.ne)); + if(!hasButton) { + this.buttonList.push(buttonName); + } + } + }, + + findButton : function(itm) { + for(var i=0;i'+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFamilySelect = nicEditorSelect.extend({ + sel : {'arial' : 'Arial','comic sans ms' : 'Comic Sans','courier new' : 'Courier New','georgia' : 'Georgia', 'helvetica' : 'Helvetica', 'impact' : 'Impact', 'times new roman' : 'Times', 'trebuchet ms' : 'Trebuchet', 'verdana' : 'Verdana'}, + + init : function() { + this.setDisplay('Font Family...'); + for(itm in this.sel) { + this.add(itm,''+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFormatSelect = nicEditorSelect.extend({ + sel : {'p' : 'Paragraph', 'pre' : 'Pre', 'h6' : 'Heading 6', 'h5' : 'Heading 5', 'h4' : 'Heading 4', 'h3' : 'Heading 3', 'h2' : 'Heading 2', 'h1' : 'Heading 1'}, + + init : function() { + this.setDisplay('Font Format...'); + for(itm in this.sel) { + var tag = itm.toUpperCase(); + this.add('<'+tag+'>','<'+itm+' style="padding: 0px; margin: 0px;">'+this.sel[itm]+''); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSelectOptions); + + + + /* START CONFIG */ + var nicLinkOptions = { + buttons : { + 'link' : {name : 'Add Link', type : 'nicLinkButton', tags : ['A']}, + 'unlink' : {name : 'Remove Link', command : 'unlink', noActive : true} + } + }; + /* END CONFIG */ + + var nicLinkButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.ln = this.ne.selectedInstance.selElm().parentTag('A'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Link'}, + 'href' : {type : 'text', txt : 'URL', value : 'http://', style : {width: '150px'}}, + 'title' : {type : 'text', txt : 'Title'}, + 'target' : {type : 'select', txt : 'Open In', options : {'' : 'Current Window', '_blank' : 'New Window'},style : {width : '100px'}} + },this.ln); + }, + + submit : function(e) { + var url = this.inputs['href'].value; + if(url == "http://" || url == "") { + alert("You must enter a URL to Create a Link"); + return false; + } + this.removePane(); + + if(!this.ln) { + var tmp = 'javascript:nicTemp();'; + this.ne.nicCommand("createlink",tmp); + this.ln = this.findElm('A','href',tmp); + } + if(this.ln) { + this.ln.setAttributes({ + href : this.inputs['href'].value, + title : this.inputs['title'].value, + target : this.inputs['target'].options[this.inputs['target'].selectedIndex].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicLinkOptions); + + + + /* START CONFIG */ + var nicColorOptions = { + buttons : { + 'forecolor' : {name : __('Change Text Color'), type : 'nicEditorColorButton', noClose : true}, + 'bgcolor' : {name : __('Change Background Color'), type : 'nicEditorBgColorButton', noClose : true} + } + }; + /* END CONFIG */ + + var nicEditorColorButton = nicEditorAdvancedButton.extend({ + addPane : function() { + var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 'CC',5 : 'FF'}; + var colorItems = new bkElement('DIV').setStyle({width: '270px'}); + + for(var r in colorList) { + for(var b in colorList) { + for(var g in colorList) { + var colorCode = '#'+colorList[r]+colorList[g]+colorList[b]; + + var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems); + var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare); + var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder); + + if(!window.opera) { + colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent; + } + + } + } + } + this.pane.append(colorItems.noSelect()); + }, + + colorSelect : function(c) { + this.ne.nicCommand('foreColor',c); + this.removePane(); + }, + + on : function(colorBorder) { + colorBorder.setStyle({border : '2px solid #000'}); + }, + + off : function(colorBorder,colorCode) { + colorBorder.setStyle({border : '2px solid '+colorCode}); + } + }); + + var nicEditorBgColorButton = nicEditorColorButton.extend({ + colorSelect : function(c) { + this.ne.nicCommand('hiliteColor',c); + this.removePane(); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicColorOptions); + + + + /* START CONFIG */ + var nicImageOptions = { + buttons : { + 'image' : {name : 'Add Image', type : 'nicImageButton', tags : ['IMG']} + } + + }; + /* END CONFIG */ + + var nicImageButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.im = this.ne.selectedInstance.selElm().parentTag('IMG'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Image'}, + 'src' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}}, + 'alt' : {type : 'text', txt : 'Alt Text', style : {width: '100px'}}, + 'align' : {type : 'select', txt : 'Align', options : {none : 'Default','left' : 'Left', 'right' : 'Right'}} + },this.im); + }, + + submit : function(e) { + var src = this.inputs['src'].value; + if(src == "" || src == "http://") { + alert("You must enter a Image URL to insert"); + return false; + } + this.removePane(); + + if(!this.im) { + var tmp = 'javascript:nicImTemp();'; + this.ne.nicCommand("insertImage",tmp); + this.im = this.findElm('IMG','src',tmp); + } + if(this.im) { + this.im.setAttributes({ + src : this.inputs['src'].value, + alt : this.inputs['alt'].value, + align : this.inputs['align'].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicImageOptions); + + + + + /* START CONFIG */ + var nicSaveOptions = { + buttons : { + 'save' : {name : __('Save this content'), type : 'nicEditorSaveButton'} + } + }; + /* END CONFIG */ + + var nicEditorSaveButton = nicEditorButton.extend({ + init : function() { + if(!this.ne.options.onSave) { + this.margin.setStyle({'display' : 'none'}); + } + }, + mouseClick : function() { + var onSave = this.ne.options.onSave; + var selectedInstance = this.ne.selectedInstance; + onSave(selectedInstance.getContent(), selectedInstance.elm.id, selectedInstance); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSaveOptions); + +}()); + +/** + * 富文本编辑器 + * + * 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" + }); + }, + _init: function () { + BI.RichEditor.superclass._init.apply(this, arguments); + var o = this.options; + this.editor = BI.createWidget({ + type: "bi.layout", + tagName: "textarea", + width: o.width || "100%", + height: o.height || "100%" + }); + BI.createWidget({ + type: "bi.default", + element: this, + items: [this.editor] + }) + }, + + mounted: function () { + this.ne = new BI.nicEditor({ + maxHeight: this.options.height + }).panelInstance(this.editor.element[0]); + }, + + setValue: function (v) { + }, + + getValue: function () { + } +}); +BI.shortcut('bi.rich_editor', BI.RichEditor);/** * 超链接 * * Created by GUY on 2015/9/9. diff --git a/dist/bundle.css b/dist/bundle.css index 363937bd8..d593cfb35 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -267,7 +267,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; diff --git a/dist/bundle.js b/dist/bundle.js index c4817eb37..f1be58ded 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -44892,7 +44892,1373 @@ 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);/** +BI.shortcut("bi.pager", BI.Pager);!(function(){ + var bkExtend = function(){ + var args = arguments; + if (args.length == 1) args = [this, args[0]]; + for (var prop in args[1]) args[0][prop] = args[1][prop]; + return args[0]; + }; + function bkClass() { } + bkClass.prototype.construct = function() {}; + bkClass.extend = function(def) { + var classDef = function() { + if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments); } + }; + var proto = new this(bkClass); + bkExtend(proto,def); + classDef.prototype = proto; + classDef.extend = this.extend; + return classDef; + }; + + var bkElement = bkClass.extend({ + construct : function(elm,d) { + if(typeof(elm) == "string") { + elm = (d || document).createElement(elm); + } + elm = $BK(elm); + return elm; + }, + + appendTo : function(elm) { + elm.appendChild(this); + return this; + }, + + appendBefore : function(elm) { + elm.parentNode.insertBefore(this,elm); + return this; + }, + + addEvent : function(type, fn) { + bkLib.addEvent(this,type,fn); + return this; + }, + + setContent : function(c) { + this.innerHTML = c; + return this; + }, + + pos : function() { + var curleft = curtop = 0; + var o = obj = this; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + } + var b = (!window.opera) ? parseInt(this.getStyle('border-width') || this.style.border) || 0 : 0; + return [curleft+b,curtop+b+this.offsetHeight]; + }, + + noSelect : function() { + bkLib.noSelect(this); + return this; + }, + + parentTag : function(t) { + var elm = this; + do { + if(elm && elm.nodeName && elm.nodeName.toUpperCase() == t) { + return elm; + } + elm = elm.parentNode; + } while(elm); + return false; + }, + + hasClass : function(cls) { + return this.className.match(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)')); + }, + + addClass : function(cls) { + if (!this.hasClass(cls)) { this.className += " nicEdit-"+cls }; + return this; + }, + + removeClass : function(cls) { + if (this.hasClass(cls)) { + this.className = this.className.replace(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)'),' '); + } + return this; + }, + + setStyle : function(st) { + var elmStyle = this.style; + for(var itm in st) { + switch(itm) { + case 'float': + elmStyle['cssFloat'] = elmStyle['styleFloat'] = st[itm]; + break; + case 'opacity': + elmStyle.opacity = st[itm]; + elmStyle.filter = "alpha(opacity=" + Math.round(st[itm]*100) + ")"; + break; + case 'className': + this.className = st[itm]; + break; + default: + //if(document.compatMode || itm != "cursor") { // Nasty Workaround for IE 5.5 + elmStyle[itm] = st[itm]; + //} + } + } + return this; + }, + + getStyle : function( cssRule, d ) { + var doc = (!d) ? document.defaultView : d; + if(this.nodeType == 1) + return (doc && doc.getComputedStyle) ? doc.getComputedStyle( this, null ).getPropertyValue(cssRule) : this.currentStyle[ bkLib.camelize(cssRule) ]; + }, + + remove : function() { + this.parentNode.removeChild(this); + return this; + }, + + setAttributes : function(at) { + for(var itm in at) { + this[itm] = at[itm]; + } + return this; + } + }); + + var bkLib = { + isMSIE : (navigator.appVersion.indexOf("MSIE") != -1), + + addEvent : function(obj, type, fn) { + (obj.addEventListener) ? obj.addEventListener( type, fn, false ) : obj.attachEvent("on"+type, fn); + }, + + toArray : function(iterable) { + var length = iterable.length, results = new Array(length); + while (length--) { results[length] = iterable[length] }; + return results; + }, + + noSelect : function(element) { + if(element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable','on'); + } + for(var i=0;i'); + } + this.instanceDoc = document.defaultView; + this.elm.addEvent('mousedown',this.selected.closureListener(this)).addEvent('keypress',this.keyDown.closureListener(this)).addEvent('focus',this.selected.closure(this)).addEvent('blur',this.blur.closure(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + remove : function() { + this.saveContent(); + if(this.copyElm || this.options.hasPanel) { + this.editorContain.remove(); + this.e.setStyle({'display' : 'block'}); + this.ne.removePanel(); + } + this.disable(); + this.ne.fireEvent('remove',this); + }, + + disable : function() { + this.elm.setAttribute('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'+((css) ? '' : '')+''+this.initialContent+''); + fd.close(); + this.frameDoc = fd; + + this.frameWin = $BK(this.elmFrame.contentWindow); + this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles); + this.instanceDoc = this.frameWin.document.defaultView; + + this.heightUpdate(); + this.frameDoc.addEvent('mousedown', this.selected.closureListener(this)).addEvent('keyup',this.heightUpdate.closureListener(this)).addEvent('keydown',this.keyDown.closureListener(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + getElm : function() { + return this.frameContent; + }, + + setContent : function(c) { + this.content = c; + this.ne.fireEvent('set',this); + this.frameContent.innerHTML = this.content; + this.heightUpdate(); + }, + + getSel : function() { + return (this.frameWin) ? this.frameWin.getSelection() : this.frameDoc.selection; + }, + + heightUpdate : function() { + this.elmFrame.style.height = Math.max(this.frameContent.offsetHeight,this.initialHeight)+'px'; + }, + + nicCommand : function(cmd,args) { + this.frameDoc.execCommand(cmd,false,args); + setTimeout(this.heightUpdate.closure(this),100); + } + + + }); + var nicEditorPanel = bkClass.extend({ + construct : function(e,options,nicEditor) { + this.elm = e; + this.options = options; + this.ne = nicEditor; + this.panelButtons = new Array(); + this.buttonList = bkExtend([],this.ne.options.buttonList); + + this.panelContain = new bkElement('DIV').setStyle({overflow : 'hidden', width : '100%', border : '1px solid #cccccc', backgroundColor : '#efefef'}).addClass('panelContain'); + this.panelElm = new bkElement('DIV').setStyle({margin : '2px', marginTop : '0px', zoom : 1, overflow : 'hidden'}).addClass('panel').appendTo(this.panelContain); + this.panelContain.appendTo(e); + + var opt = this.ne.options; + var buttons = opt.buttons; + for(button in buttons) { + this.addButton(button,opt,true); + } + this.reorder(); + e.noSelect(); + }, + + addButton : function(buttonName,options,noOrder) { + var button = options.buttons[buttonName]; + var type = (button['type']) ? eval('(typeof('+button['type']+') == "undefined") ? null : '+button['type']+';') : nicEditorButton; + var hasButton = bkLib.inArray(this.buttonList,buttonName); + if(type && (hasButton || this.ne.options.fullPanel)) { + this.panelButtons.push(new type(this.panelElm,buttonName,options,this.ne)); + if(!hasButton) { + this.buttonList.push(buttonName); + } + } + }, + + findButton : function(itm) { + for(var i=0;i'+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFamilySelect = nicEditorSelect.extend({ + sel : {'arial' : 'Arial','comic sans ms' : 'Comic Sans','courier new' : 'Courier New','georgia' : 'Georgia', 'helvetica' : 'Helvetica', 'impact' : 'Impact', 'times new roman' : 'Times', 'trebuchet ms' : 'Trebuchet', 'verdana' : 'Verdana'}, + + init : function() { + this.setDisplay('Font Family...'); + for(itm in this.sel) { + this.add(itm,''+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFormatSelect = nicEditorSelect.extend({ + sel : {'p' : 'Paragraph', 'pre' : 'Pre', 'h6' : 'Heading 6', 'h5' : 'Heading 5', 'h4' : 'Heading 4', 'h3' : 'Heading 3', 'h2' : 'Heading 2', 'h1' : 'Heading 1'}, + + init : function() { + this.setDisplay('Font Format...'); + for(itm in this.sel) { + var tag = itm.toUpperCase(); + this.add('<'+tag+'>','<'+itm+' style="padding: 0px; margin: 0px;">'+this.sel[itm]+''); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSelectOptions); + + + + /* START CONFIG */ + var nicLinkOptions = { + buttons : { + 'link' : {name : 'Add Link', type : 'nicLinkButton', tags : ['A']}, + 'unlink' : {name : 'Remove Link', command : 'unlink', noActive : true} + } + }; + /* END CONFIG */ + + var nicLinkButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.ln = this.ne.selectedInstance.selElm().parentTag('A'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Link'}, + 'href' : {type : 'text', txt : 'URL', value : 'http://', style : {width: '150px'}}, + 'title' : {type : 'text', txt : 'Title'}, + 'target' : {type : 'select', txt : 'Open In', options : {'' : 'Current Window', '_blank' : 'New Window'},style : {width : '100px'}} + },this.ln); + }, + + submit : function(e) { + var url = this.inputs['href'].value; + if(url == "http://" || url == "") { + alert("You must enter a URL to Create a Link"); + return false; + } + this.removePane(); + + if(!this.ln) { + var tmp = 'javascript:nicTemp();'; + this.ne.nicCommand("createlink",tmp); + this.ln = this.findElm('A','href',tmp); + } + if(this.ln) { + this.ln.setAttributes({ + href : this.inputs['href'].value, + title : this.inputs['title'].value, + target : this.inputs['target'].options[this.inputs['target'].selectedIndex].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicLinkOptions); + + + + /* START CONFIG */ + var nicColorOptions = { + buttons : { + 'forecolor' : {name : __('Change Text Color'), type : 'nicEditorColorButton', noClose : true}, + 'bgcolor' : {name : __('Change Background Color'), type : 'nicEditorBgColorButton', noClose : true} + } + }; + /* END CONFIG */ + + var nicEditorColorButton = nicEditorAdvancedButton.extend({ + addPane : function() { + var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 'CC',5 : 'FF'}; + var colorItems = new bkElement('DIV').setStyle({width: '270px'}); + + for(var r in colorList) { + for(var b in colorList) { + for(var g in colorList) { + var colorCode = '#'+colorList[r]+colorList[g]+colorList[b]; + + var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems); + var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare); + var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder); + + if(!window.opera) { + colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent; + } + + } + } + } + this.pane.append(colorItems.noSelect()); + }, + + colorSelect : function(c) { + this.ne.nicCommand('foreColor',c); + this.removePane(); + }, + + on : function(colorBorder) { + colorBorder.setStyle({border : '2px solid #000'}); + }, + + off : function(colorBorder,colorCode) { + colorBorder.setStyle({border : '2px solid '+colorCode}); + } + }); + + var nicEditorBgColorButton = nicEditorColorButton.extend({ + colorSelect : function(c) { + this.ne.nicCommand('hiliteColor',c); + this.removePane(); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicColorOptions); + + + + /* START CONFIG */ + var nicImageOptions = { + buttons : { + 'image' : {name : 'Add Image', type : 'nicImageButton', tags : ['IMG']} + } + + }; + /* END CONFIG */ + + var nicImageButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.im = this.ne.selectedInstance.selElm().parentTag('IMG'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Image'}, + 'src' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}}, + 'alt' : {type : 'text', txt : 'Alt Text', style : {width: '100px'}}, + 'align' : {type : 'select', txt : 'Align', options : {none : 'Default','left' : 'Left', 'right' : 'Right'}} + },this.im); + }, + + submit : function(e) { + var src = this.inputs['src'].value; + if(src == "" || src == "http://") { + alert("You must enter a Image URL to insert"); + return false; + } + this.removePane(); + + if(!this.im) { + var tmp = 'javascript:nicImTemp();'; + this.ne.nicCommand("insertImage",tmp); + this.im = this.findElm('IMG','src',tmp); + } + if(this.im) { + this.im.setAttributes({ + src : this.inputs['src'].value, + alt : this.inputs['alt'].value, + align : this.inputs['align'].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicImageOptions); + + + + + /* START CONFIG */ + var nicSaveOptions = { + buttons : { + 'save' : {name : __('Save this content'), type : 'nicEditorSaveButton'} + } + }; + /* END CONFIG */ + + var nicEditorSaveButton = nicEditorButton.extend({ + init : function() { + if(!this.ne.options.onSave) { + this.margin.setStyle({'display' : 'none'}); + } + }, + mouseClick : function() { + var onSave = this.ne.options.onSave; + var selectedInstance = this.ne.selectedInstance; + onSave(selectedInstance.getContent(), selectedInstance.elm.id, selectedInstance); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSaveOptions); + +}()); + +/** + * 富文本编辑器 + * + * 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" + }); + }, + _init: function () { + BI.RichEditor.superclass._init.apply(this, arguments); + var o = this.options; + this.editor = BI.createWidget({ + type: "bi.layout", + tagName: "textarea", + width: o.width || "100%", + height: o.height || "100%" + }); + BI.createWidget({ + type: "bi.default", + element: this, + items: [this.editor] + }) + }, + + mounted: function () { + this.ne = new BI.nicEditor({ + maxHeight: this.options.height + }).panelInstance(this.editor.element[0]); + }, + + setValue: function (v) { + }, + + getValue: function () { + } +}); +BI.shortcut('bi.rich_editor', BI.RichEditor);/** * 超链接 * * Created by GUY on 2015/9/9. diff --git a/dist/core.css b/dist/core.css index cffc43627..db903348d 100644 --- a/dist/core.css +++ b/dist/core.css @@ -267,7 +267,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; diff --git a/dist/demo.js b/dist/demo.js index 64088eb03..bff10f610 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -809,7 +809,27 @@ 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 () { + var editor = BI.createWidget({ + type: "bi.rich_editor", + cls: "mvc-border", + width: 600, + height: 400 + }); + BI.createWidget({ + type: "bi.vertical", + element: this, + hgap: 30, + vgap: 20, + items: [editor] + }) + } +}); +BI.shortcut("demo.rich_editor", Demo.RichEditor);Demo.CodeEditor = BI.inherit(BI.Widget, { props: { baseCls: "demo-editor" }, @@ -3136,6 +3156,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, diff --git a/src/base/richeditor/nicEdit.js b/src/base/richeditor/nicEdit.js new file mode 100644 index 000000000..da7e956d5 --- /dev/null +++ b/src/base/richeditor/nicEdit.js @@ -0,0 +1,1325 @@ +!(function(){ + var bkExtend = function(){ + var args = arguments; + if (args.length == 1) args = [this, args[0]]; + for (var prop in args[1]) args[0][prop] = args[1][prop]; + return args[0]; + }; + function bkClass() { } + bkClass.prototype.construct = function() {}; + bkClass.extend = function(def) { + var classDef = function() { + if (arguments[0] !== bkClass) { return this.construct.apply(this, arguments); } + }; + var proto = new this(bkClass); + bkExtend(proto,def); + classDef.prototype = proto; + classDef.extend = this.extend; + return classDef; + }; + + var bkElement = bkClass.extend({ + construct : function(elm,d) { + if(typeof(elm) == "string") { + elm = (d || document).createElement(elm); + } + elm = $BK(elm); + return elm; + }, + + appendTo : function(elm) { + elm.appendChild(this); + return this; + }, + + appendBefore : function(elm) { + elm.parentNode.insertBefore(this,elm); + return this; + }, + + addEvent : function(type, fn) { + bkLib.addEvent(this,type,fn); + return this; + }, + + setContent : function(c) { + this.innerHTML = c; + return this; + }, + + pos : function() { + var curleft = curtop = 0; + var o = obj = this; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + } + var b = (!window.opera) ? parseInt(this.getStyle('border-width') || this.style.border) || 0 : 0; + return [curleft+b,curtop+b+this.offsetHeight]; + }, + + noSelect : function() { + bkLib.noSelect(this); + return this; + }, + + parentTag : function(t) { + var elm = this; + do { + if(elm && elm.nodeName && elm.nodeName.toUpperCase() == t) { + return elm; + } + elm = elm.parentNode; + } while(elm); + return false; + }, + + hasClass : function(cls) { + return this.className.match(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)')); + }, + + addClass : function(cls) { + if (!this.hasClass(cls)) { this.className += " nicEdit-"+cls }; + return this; + }, + + removeClass : function(cls) { + if (this.hasClass(cls)) { + this.className = this.className.replace(new RegExp('(\\s|^)nicEdit-'+cls+'(\\s|$)'),' '); + } + return this; + }, + + setStyle : function(st) { + var elmStyle = this.style; + for(var itm in st) { + switch(itm) { + case 'float': + elmStyle['cssFloat'] = elmStyle['styleFloat'] = st[itm]; + break; + case 'opacity': + elmStyle.opacity = st[itm]; + elmStyle.filter = "alpha(opacity=" + Math.round(st[itm]*100) + ")"; + break; + case 'className': + this.className = st[itm]; + break; + default: + //if(document.compatMode || itm != "cursor") { // Nasty Workaround for IE 5.5 + elmStyle[itm] = st[itm]; + //} + } + } + return this; + }, + + getStyle : function( cssRule, d ) { + var doc = (!d) ? document.defaultView : d; + if(this.nodeType == 1) + return (doc && doc.getComputedStyle) ? doc.getComputedStyle( this, null ).getPropertyValue(cssRule) : this.currentStyle[ bkLib.camelize(cssRule) ]; + }, + + remove : function() { + this.parentNode.removeChild(this); + return this; + }, + + setAttributes : function(at) { + for(var itm in at) { + this[itm] = at[itm]; + } + return this; + } + }); + + var bkLib = { + isMSIE : (navigator.appVersion.indexOf("MSIE") != -1), + + addEvent : function(obj, type, fn) { + (obj.addEventListener) ? obj.addEventListener( type, fn, false ) : obj.attachEvent("on"+type, fn); + }, + + toArray : function(iterable) { + var length = iterable.length, results = new Array(length); + while (length--) { results[length] = iterable[length] }; + return results; + }, + + noSelect : function(element) { + if(element.setAttribute && element.nodeName.toLowerCase() != 'input' && element.nodeName.toLowerCase() != 'textarea') { + element.setAttribute('unselectable','on'); + } + for(var i=0;i'); + } + this.instanceDoc = document.defaultView; + this.elm.addEvent('mousedown',this.selected.closureListener(this)).addEvent('keypress',this.keyDown.closureListener(this)).addEvent('focus',this.selected.closure(this)).addEvent('blur',this.blur.closure(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + remove : function() { + this.saveContent(); + if(this.copyElm || this.options.hasPanel) { + this.editorContain.remove(); + this.e.setStyle({'display' : 'block'}); + this.ne.removePanel(); + } + this.disable(); + this.ne.fireEvent('remove',this); + }, + + disable : function() { + this.elm.setAttribute('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'+((css) ? '' : '')+''+this.initialContent+''); + fd.close(); + this.frameDoc = fd; + + this.frameWin = $BK(this.elmFrame.contentWindow); + this.frameContent = $BK(this.frameWin.document.body).setStyle(this.savedStyles); + this.instanceDoc = this.frameWin.document.defaultView; + + this.heightUpdate(); + this.frameDoc.addEvent('mousedown', this.selected.closureListener(this)).addEvent('keyup',this.heightUpdate.closureListener(this)).addEvent('keydown',this.keyDown.closureListener(this)).addEvent('keyup',this.selected.closure(this)); + this.ne.fireEvent('add',this); + }, + + getElm : function() { + return this.frameContent; + }, + + setContent : function(c) { + this.content = c; + this.ne.fireEvent('set',this); + this.frameContent.innerHTML = this.content; + this.heightUpdate(); + }, + + getSel : function() { + return (this.frameWin) ? this.frameWin.getSelection() : this.frameDoc.selection; + }, + + heightUpdate : function() { + this.elmFrame.style.height = Math.max(this.frameContent.offsetHeight,this.initialHeight)+'px'; + }, + + nicCommand : function(cmd,args) { + this.frameDoc.execCommand(cmd,false,args); + setTimeout(this.heightUpdate.closure(this),100); + } + + + }); + var nicEditorPanel = bkClass.extend({ + construct : function(e,options,nicEditor) { + this.elm = e; + this.options = options; + this.ne = nicEditor; + this.panelButtons = new Array(); + this.buttonList = bkExtend([],this.ne.options.buttonList); + + this.panelContain = new bkElement('DIV').setStyle({overflow : 'hidden', width : '100%', border : '1px solid #cccccc', backgroundColor : '#efefef'}).addClass('panelContain'); + this.panelElm = new bkElement('DIV').setStyle({margin : '2px', marginTop : '0px', zoom : 1, overflow : 'hidden'}).addClass('panel').appendTo(this.panelContain); + this.panelContain.appendTo(e); + + var opt = this.ne.options; + var buttons = opt.buttons; + for(button in buttons) { + this.addButton(button,opt,true); + } + this.reorder(); + e.noSelect(); + }, + + addButton : function(buttonName,options,noOrder) { + var button = options.buttons[buttonName]; + var type = (button['type']) ? eval('(typeof('+button['type']+') == "undefined") ? null : '+button['type']+';') : nicEditorButton; + var hasButton = bkLib.inArray(this.buttonList,buttonName); + if(type && (hasButton || this.ne.options.fullPanel)) { + this.panelButtons.push(new type(this.panelElm,buttonName,options,this.ne)); + if(!hasButton) { + this.buttonList.push(buttonName); + } + } + }, + + findButton : function(itm) { + for(var i=0;i'+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFamilySelect = nicEditorSelect.extend({ + sel : {'arial' : 'Arial','comic sans ms' : 'Comic Sans','courier new' : 'Courier New','georgia' : 'Georgia', 'helvetica' : 'Helvetica', 'impact' : 'Impact', 'times new roman' : 'Times', 'trebuchet ms' : 'Trebuchet', 'verdana' : 'Verdana'}, + + init : function() { + this.setDisplay('Font Family...'); + for(itm in this.sel) { + this.add(itm,''+this.sel[itm]+''); + } + } + }); + + var nicEditorFontFormatSelect = nicEditorSelect.extend({ + sel : {'p' : 'Paragraph', 'pre' : 'Pre', 'h6' : 'Heading 6', 'h5' : 'Heading 5', 'h4' : 'Heading 4', 'h3' : 'Heading 3', 'h2' : 'Heading 2', 'h1' : 'Heading 1'}, + + init : function() { + this.setDisplay('Font Format...'); + for(itm in this.sel) { + var tag = itm.toUpperCase(); + this.add('<'+tag+'>','<'+itm+' style="padding: 0px; margin: 0px;">'+this.sel[itm]+''); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSelectOptions); + + + + /* START CONFIG */ + var nicLinkOptions = { + buttons : { + 'link' : {name : 'Add Link', type : 'nicLinkButton', tags : ['A']}, + 'unlink' : {name : 'Remove Link', command : 'unlink', noActive : true} + } + }; + /* END CONFIG */ + + var nicLinkButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.ln = this.ne.selectedInstance.selElm().parentTag('A'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Link'}, + 'href' : {type : 'text', txt : 'URL', value : 'http://', style : {width: '150px'}}, + 'title' : {type : 'text', txt : 'Title'}, + 'target' : {type : 'select', txt : 'Open In', options : {'' : 'Current Window', '_blank' : 'New Window'},style : {width : '100px'}} + },this.ln); + }, + + submit : function(e) { + var url = this.inputs['href'].value; + if(url == "http://" || url == "") { + alert("You must enter a URL to Create a Link"); + return false; + } + this.removePane(); + + if(!this.ln) { + var tmp = 'javascript:nicTemp();'; + this.ne.nicCommand("createlink",tmp); + this.ln = this.findElm('A','href',tmp); + } + if(this.ln) { + this.ln.setAttributes({ + href : this.inputs['href'].value, + title : this.inputs['title'].value, + target : this.inputs['target'].options[this.inputs['target'].selectedIndex].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicLinkOptions); + + + + /* START CONFIG */ + var nicColorOptions = { + buttons : { + 'forecolor' : {name : __('Change Text Color'), type : 'nicEditorColorButton', noClose : true}, + 'bgcolor' : {name : __('Change Background Color'), type : 'nicEditorBgColorButton', noClose : true} + } + }; + /* END CONFIG */ + + var nicEditorColorButton = nicEditorAdvancedButton.extend({ + addPane : function() { + var colorList = {0 : '00',1 : '33',2 : '66',3 :'99',4 : 'CC',5 : 'FF'}; + var colorItems = new bkElement('DIV').setStyle({width: '270px'}); + + for(var r in colorList) { + for(var b in colorList) { + for(var g in colorList) { + var colorCode = '#'+colorList[r]+colorList[g]+colorList[b]; + + var colorSquare = new bkElement('DIV').setStyle({'cursor' : 'pointer', 'height' : '15px', 'float' : 'left'}).appendTo(colorItems); + var colorBorder = new bkElement('DIV').setStyle({border: '2px solid '+colorCode}).appendTo(colorSquare); + var colorInner = new bkElement('DIV').setStyle({backgroundColor : colorCode, overflow : 'hidden', width : '11px', height : '11px'}).addEvent('click',this.colorSelect.closure(this,colorCode)).addEvent('mouseover',this.on.closure(this,colorBorder)).addEvent('mouseout',this.off.closure(this,colorBorder,colorCode)).appendTo(colorBorder); + + if(!window.opera) { + colorSquare.onmousedown = colorInner.onmousedown = bkLib.cancelEvent; + } + + } + } + } + this.pane.append(colorItems.noSelect()); + }, + + colorSelect : function(c) { + this.ne.nicCommand('foreColor',c); + this.removePane(); + }, + + on : function(colorBorder) { + colorBorder.setStyle({border : '2px solid #000'}); + }, + + off : function(colorBorder,colorCode) { + colorBorder.setStyle({border : '2px solid '+colorCode}); + } + }); + + var nicEditorBgColorButton = nicEditorColorButton.extend({ + colorSelect : function(c) { + this.ne.nicCommand('hiliteColor',c); + this.removePane(); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicColorOptions); + + + + /* START CONFIG */ + var nicImageOptions = { + buttons : { + 'image' : {name : 'Add Image', type : 'nicImageButton', tags : ['IMG']} + } + + }; + /* END CONFIG */ + + var nicImageButton = nicEditorAdvancedButton.extend({ + addPane : function() { + this.im = this.ne.selectedInstance.selElm().parentTag('IMG'); + this.addForm({ + '' : {type : 'title', txt : 'Add/Edit Image'}, + 'src' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}}, + 'alt' : {type : 'text', txt : 'Alt Text', style : {width: '100px'}}, + 'align' : {type : 'select', txt : 'Align', options : {none : 'Default','left' : 'Left', 'right' : 'Right'}} + },this.im); + }, + + submit : function(e) { + var src = this.inputs['src'].value; + if(src == "" || src == "http://") { + alert("You must enter a Image URL to insert"); + return false; + } + this.removePane(); + + if(!this.im) { + var tmp = 'javascript:nicImTemp();'; + this.ne.nicCommand("insertImage",tmp); + this.im = this.findElm('IMG','src',tmp); + } + if(this.im) { + this.im.setAttributes({ + src : this.inputs['src'].value, + alt : this.inputs['alt'].value, + align : this.inputs['align'].value + }); + } + } + }); + + nicEditors.registerPlugin(nicPlugin,nicImageOptions); + + + + + /* START CONFIG */ + var nicSaveOptions = { + buttons : { + 'save' : {name : __('Save this content'), type : 'nicEditorSaveButton'} + } + }; + /* END CONFIG */ + + var nicEditorSaveButton = nicEditorButton.extend({ + init : function() { + if(!this.ne.options.onSave) { + this.margin.setStyle({'display' : 'none'}); + } + }, + mouseClick : function() { + var onSave = this.ne.options.onSave; + var selectedInstance = this.ne.selectedInstance; + onSave(selectedInstance.getContent(), selectedInstance.elm.id, selectedInstance); + } + }); + + nicEditors.registerPlugin(nicPlugin,nicSaveOptions); + +}()); + diff --git a/src/base/richeditor/richeditor.js b/src/base/richeditor/richeditor.js new file mode 100644 index 000000000..34543f786 --- /dev/null +++ b/src/base/richeditor/richeditor.js @@ -0,0 +1,42 @@ +/** + * 富文本编辑器 + * + * 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" + }); + }, + _init: function () { + BI.RichEditor.superclass._init.apply(this, arguments); + var o = this.options; + this.editor = BI.createWidget({ + type: "bi.layout", + tagName: "textarea", + width: o.width || "100%", + height: o.height || "100%" + }); + BI.createWidget({ + type: "bi.default", + element: this, + items: [this.editor] + }) + }, + + mounted: function () { + this.ne = new BI.nicEditor({ + maxHeight: this.options.height + }).panelInstance(this.editor.element[0]); + }, + + setValue: function (v) { + }, + + getValue: function () { + } +}); +BI.shortcut('bi.rich_editor', BI.RichEditor); \ No newline at end of file diff --git a/src/css/core/normalize2.css b/src/css/core/normalize2.css index f0f651d4e..d562d0450 100644 --- a/src/css/core/normalize2.css +++ b/src/css/core/normalize2.css @@ -37,7 +37,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; diff --git a/src/less/core/normalize2.less b/src/less/core/normalize2.less index 1d72caaf2..2b23a74ea 100644 --- a/src/less/core/normalize2.less +++ b/src/less/core/normalize2.less @@ -38,7 +38,7 @@ li { } i { - font-style: normal; + //font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;