X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=87455f01732325aeed95ba567d3cca66eb2386ac;hb=refs%2Fheads%2Fwip_leon_T7605_revamp_image_managment_code;hp=a4afb8e9e5606c6e4ac37e039ea3db106b2e5a27;hpb=48377717df34ac2a2f30dece0223c040854418dd;p=roojs1
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index a4afb8e9e5..87455f0173 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -17,7 +17,10 @@ Roo.bootstrap.version = ( function() {
})(); Roo.bootstrap.menu = Roo.bootstrap.menu || {};
Roo.bootstrap.nav = {};
-Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};/*
+Roo.bootstrap.form = {};Roo.bootstrap.panel = {};Roo.bootstrap.layout = {};
+Roo.htmleditor = {};
+Roo.namespace('Roo.bootstrap.form.HtmlEditorToolbar');
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
@@ -577,7 +580,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, {
if (!skip_children) {
for(var i =0;i < items.length;i++) {
// Roo.log(['add child', items[i]]);
- nitems.push(cn.addxtype(Roo.apply({}, items[i])));
+ nitems.push(cn.addxtype(items[i].xns == false ? items[i] : Roo.apply({}, items[i])));
}
}
@@ -10335,7 +10338,7 @@ Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component, {
var id = false;
if(typeof(renderer) !== 'undefined'){
- value = renderer(d.data[cm.getDataIndex(i)], false, d);
+ value = renderer.call(config, d.data[cm.getDataIndex(i)], false, d);
}
// if object are returned, then they are expected to be Roo.bootstrap.Component instances
// and are rendered into the cells after the row is rendered - using the id for the element.
@@ -13085,9 +13088,7 @@ Roo.extend(Roo.bootstrap.form.Input, Roo.bootstrap.Component, {
* @return {Mixed} value The field value
*/
getValue : function(){
-
var v = this.inputEl().getValue();
-
return v;
},
/**
@@ -13654,7 +13655,7 @@ Roo.extend(Roo.bootstrap.form.TextArea, Roo.bootstrap.form.Input, {
this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
}
- if(this.disabled || this.allowBlank){
+ if(this.disabled){
return;
}
@@ -15173,8 +15174,8 @@ Roo.data.Store = function(config){
* If you return Json { data: [] , success: false, .... } then this will be thrown with the following args
*
* @param {Proxy}
- * @param {Object} return from JsonData.reader() - success, totalRecords, records
- * @param {Object} load options
+ * @param {Object} ret return data from JsonData.reader() - success, totalRecords, records
+ * @param {Object} opts - load Options
* @param {Object} jsonData from your request (normally this contains the Exception)
*/
loadexception : true
@@ -16180,24 +16181,24 @@ Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
// thse are take from connection...
/**
- * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
+ * @cfg {String} url The default URL to be used for requests to the server. (defaults to undefined)
*/
/**
- * @cfg {Object} extraParams (Optional) An object containing properties which are used as
+ * @cfg {Object} extraParams An object containing properties which are used as
* extra parameters to each request made by this object. (defaults to undefined)
*/
/**
- * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
+ * @cfg {Object} defaultHeaders An object containing request headers which are added
* to each request made by this object. (defaults to undefined)
*/
/**
- * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
+ * @cfg {String} method (GET|POST) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
*/
/**
- * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
+ * @cfg {Number} timeout The timeout in milliseconds to be used for requests. (defaults to 30000)
*/
/**
- * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
+ * @cfg {Boolean} autoAbort Whether this request should abort any pending requests. (defaults to false)
* @type Boolean
*/
@@ -24207,7 +24208,11 @@ Roo.extend(Roo.bootstrap.form.TimeField, Roo.bootstrap.form.Input, {
update: function()
{
-
+ // default minute is a multiple of minuteStep
+ if(typeof(this.time) === 'undefined') {
+ this.time = new Date();
+ this.time = this.time.add(Date.MINUTE, Math.round(parseInt(this.time.format('i')) / this.minuteStep) * this.minuteStep - parseInt(this.time.format('i')));
+ }
this.time = (typeof(this.time) === 'undefined') ? new Date() : this.time;
this.fill();
@@ -26491,9 +26496,7 @@ Roo.rtf.Parser.prototype = {
});
}
-} ;
-Roo.htmleditor = {};
-
+} ;
/**
* @class Roo.htmleditor.Filter
* Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
@@ -26996,7 +26999,7 @@ Roo.htmleditor.FilterWord = function(cfg)
this.replaceAname(cfg.node);
// this is disabled as the removal is done by other filters;
// this.walk(cfg.node);
-
+ this.replaceImageTable(cfg.node);
}
@@ -27225,14 +27228,19 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
if (!spans.length) {
continue;
}
- var ff = spans[0].style.fontFamily;
- if (!spans[0].hasAttribute('style') && spans.length > 1 && spans[1].hasAttribute('style')) {
-
- ff = spans[1].style.fontFamily;
+ var ff = '';
+ var se = spans[0];
+ for (var i = 0; i < spans.length;i++) {
+ se = spans[i];
+ if (se.hasAttribute('style') && se.hasAttribute('style') && se.style.fontFamily != '') {
+ ff = se.style.fontFamily;
+ break;
+ }
}
- //var style = this.styleToObject(spans[0]);
+
+
//Roo.log("got font family: " + ff);
- if (typeof(ff) != 'undefined' && !ff.match(/Symbol/)) {
+ if (typeof(ff) != 'undefined' && !ff.match(/(Symbol|Wingdings)/) && "·o".indexOf(se.innerText.trim()) < 0) {
listtype = 'ol';
}
@@ -27350,9 +27358,63 @@ Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
- }
-
+ },
+ replaceImageTable : function(doc)
+ {
+ /*
+
+
+ |
+
+
+ |
+  |
+
+
+ */
+ var imgs = Array.from(doc.getElementsByTagName('img'));
+ Roo.each(imgs, function(img) {
+ var td = img.parentNode;
+ if (td.nodeName != 'TD') {
+ return;
+ }
+ var tr = td.parentNode;
+ if (tr.nodeName != 'TR') {
+ return;
+ }
+ var tbody = tr.parentNode;
+ if (tbody.nodeName != 'TBODY') {
+ return;
+ }
+ var table = tbody.parentNode;
+ if (table.nodeName != 'TABLE') {
+ return;
+ }
+ // first row..
+
+ if (table.getElementsByTagName('tr').length != 2) {
+ return;
+ }
+ if (table.getElementsByTagName('td').length != 3) {
+ return;
+ }
+ if (table.innerText.trim() != '') {
+ return;
+ }
+ var p = table.parentNode;
+ img.parentNode.removeChild(img);
+ p.insertBefore(img, table);
+ p.removeChild(table);
+
+
+
+ });
+
+
+ }
});
/**
@@ -29270,7 +29332,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
}
},
-
+
{
xtype : 'Button',
text: 'Hide Caption',
@@ -29365,7 +29427,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
var ret = {
tag: 'figure',
'data-block' : 'Figure',
- 'data-width' : this.width,
+ 'data-width' : this.width,
+ 'data-caption' : this.caption,
contenteditable : 'false',
style : {
@@ -29438,6 +29501,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
this.image_src = this.getVal(node, 'img', 'src');
this.align = this.getVal(node, 'figure', 'align');
+
+ /// not really used - as hidden captions do not store the content here..
var figcaption = this.getVal(node, 'figcaption', false);
if (figcaption !== '') {
this.caption = this.getVal(figcaption, 'i', 'html');
@@ -29445,6 +29510,10 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
this.caption_display = this.getVal(node, 'figcaption', 'data-display');
+ var dc = this.getVal(node, true, 'data-caption');
+ if (dc && dc.length) {
+ this.caption = dc;
+ }
//this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
this.width = this.getVal(node, true, 'data-width');
//this.margin = this.getVal(node, 'figure', 'style', 'margin');
@@ -30785,7 +30854,7 @@ Roo.HtmlEditorCore = function(config){
* @param {Roo.HtmlEditorCore} this
*/
editorevent: true
-
+
});
@@ -31108,6 +31177,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
'rowspan',
'data-display',
'data-width',
+ 'data-caption',
'start' ,
'style',
// youtube embed.
@@ -31314,14 +31384,39 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
var cd = (e.browserEvent.clipboardData || window.clipboardData);
// check what type of paste - if it's an image, then handle it differently.
- if (cd.files && cd.files.length > 0) {
- // pasting images?
+ if (cd.files && cd.files.length > 0 && cd.types.indexOf('text/html') < 0) {
+ // pasting images?
var urlAPI = (window.createObjectURL && window) ||
(window.URL && URL.revokeObjectURL && URL) ||
(window.webkitURL && webkitURL);
-
- var url = urlAPI.createObjectURL( cd.files[0]);
- this.insertAtCursor('
');
+
+ var r = new FileReader();
+ var t = this;
+ r.addEventListener('load',function()
+ {
+
+ var d = (new DOMParser().parseFromString('
', 'text/html')).body;
+ // is insert asycn?
+ if (t.enableBlocks) {
+
+ Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+ if (img.closest('figure')) { // assume!! that it's aready
+ return;
+ }
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : img.src
+ });
+ fig.updateElement(img); // replace it..
+
+ });
+ }
+ t.insertAtCursor(d.innerHTML.replace(/ /g,' '));
+ t.owner.fireEvent('paste', this);
+ });
+ r.readAsDataURL(cd.files[0]);
+
+ e.preventDefault();
+
return false;
}
if (cd.types.indexOf('text/html') < 0 ) {
@@ -31491,6 +31586,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
return; // we do not handle this.. (undo manager does..)
}
+ // clicking a 'block'?
+
// in theory this detects if the last element is not a br, then we try and do that.
// its so clicking in space at bottom triggers adding a br and moving the cursor.
if (e &&
@@ -31593,6 +31690,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component, {
break;
case 'bold':
case 'italic':
+ case 'underline':
// if there is no selection, then we insert, and set the curson inside it..
this.execCmd('styleWithCSS', false);
break;
@@ -32377,31 +32475,26 @@ Roo.HtmlEditorCore.cblack= [
*/
Roo.bootstrap.form.HtmlEditor = function(config){
- Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
- if (!this.toolbars) {
- this.toolbars = [];
- }
-
- this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+
this.addEvents({
/**
* @event initialize
* Fires when the editor is fully initialized (including the iframe)
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
initialize: true,
/**
* @event activate
* Fires when the editor is first receives the focus. Any insertion must wait
* until after this event.
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
activate: true,
/**
* @event beforesync
* Fires before the textarea is updated with content from the editor iframe. Return false
* to cancel the sync.
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
* @param {String} html
*/
beforesync: true,
@@ -32409,56 +32502,96 @@ Roo.bootstrap.form.HtmlEditor = function(config){
* @event beforepush
* Fires before the iframe editor is updated with content from the textarea. Return false
* to cancel the push.
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
* @param {String} html
*/
beforepush: true,
/**
* @event sync
* Fires when the textarea is updated with content from the editor iframe.
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
* @param {String} html
*/
sync: true,
/**
* @event push
* Fires when the iframe editor is updated with content from the textarea.
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
* @param {String} html
*/
push: true,
/**
* @event editmodechange
* Fires when the editor switches edit modes
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
* @param {Boolean} sourceEdit True if source edit, false if standard editing.
*/
editmodechange: true,
/**
* @event editorevent
* Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
editorevent: true,
/**
* @event firstfocus
* Fires when on first focus - needed by toolbars..
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
firstfocus: true,
/**
* @event autosave
* Auto save the htmlEditor value as a file into Events
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
autosave: true,
/**
* @event savedpreview
* preview the saved version of htmlEditor
- * @param {HtmlEditor} this
+ * @param {Roo.bootstrap.form.HtmlEditor} this
*/
- savedpreview: true
- });
+ savedpreview: true,
+ /**
+ * @event stylesheetsclick
+ * Fires when press the Sytlesheets button
+ * @param {Roo.HtmlEditorCore} this
+ */
+ stylesheetsclick: true,
+ /**
+ * @event paste
+ * Fires when press user pastes into the editor
+ * @param {Roo.HtmlEditorCore} this
+ */
+ paste: true,
+ /**
+ * @event imageadd
+ * Fires when on any editor when an image is added (excluding paste)
+ * @param {Roo.bootstrap.form.HtmlEditor} this
+ */
+ imageadd: true ,
+ /**
+ * @event imageupdated
+ * Fires when on any editor when an image is changed (excluding paste)
+ * @param {Roo.bootstrap.form.HtmlEditor} this
+ * @param {HTMLElement} img could also be a figure if blocks are enabled
+ */
+ imageupdate: true ,
+ /**
+ * @event imagedelete
+ * Fires when on any editor when an image is deleted
+ * @param {Roo.bootstrap.form.HtmlEditor} this
+ * @param {HTMLElement} img could also be a figure if blocks are enabled
+ * @param {HTMLElement} oldSrc source of image being replaced
+ */
+ imagedelete: true
+ });
+ Roo.bootstrap.form.HtmlEditor.superclass.constructor.call(this, config);
+ if (!this.toolbars) {
+ this.toolbars = [];
+ }
+
+ this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+
};
@@ -32466,9 +32599,9 @@ Roo.extend(Roo.bootstrap.form.HtmlEditor, Roo.bootstrap.form.TextArea, {
/**
- * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
+ * @cfg {Array|boolean} toolbars Array of toolbars, or names of toolbars. - true for standard, and false for none.
*/
- toolbars : false,
+ toolbars : true,
/**
* @cfg {Array} buttons Array of toolbar's buttons. - defaults to empty
@@ -32521,26 +32654,35 @@ Roo.extend(Roo.bootstrap.form.HtmlEditor, Roo.bootstrap.form.TextArea, {
* add custom toolbar buttons.
* @param {HtmlEditor} editor
*/
- createToolbar : function(){
- Roo.log('renewing');
- Roo.log("create toolbars");
+ createToolbar : function()
+ {
+ //Roo.log('renewing');
+ //Roo.log("create toolbars");
+ if (this.toolbars === false) {
+ return;
+ }
+ if (this.toolbars === true) {
+ this.toolbars = [ 'Standard' ];
+ }
- this.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard({editor: this} ) ];
- this.toolbars[0].render(this.toolbarContainer());
+ var ar = Array.from(this.toolbars);
+ this.toolbars = [];
+ ar.forEach(function(t,i) {
+ if (typeof(t) == 'string') {
+ t = {
+ xtype : t
+ };
+ }
+ if (typeof(t) == 'object' && typeof(t.xtype) == 'string') {
+ t.editor = this;
+ t.xns = t.xns || Roo.bootstrap.form.HtmlEditorToolbar;
+ t = Roo.factory(t);
+ }
+ this.toolbars[i] = t;
+ this.toolbars[i].render(this.toolbarContainer());
+ }, this);
- return;
-// if (!editor.toolbars || !editor.toolbars.length) {
-// editor.toolbars = [ new Roo.bootstrap.form.HtmlEditorToolbarStandard() ]; // can be empty?
-// }
-//
-// for (var i =0 ; i < editor.toolbars.length;i++) {
-// editor.toolbars[i] = Roo.factory(
-// typeof(editor.toolbars[i]) == 'string' ?
-// { xtype: editor.toolbars[i]} : editor.toolbars[i],
-// Roo.bootstrap.form.HtmlEditor);
-// editor.toolbars[i].init(editor);
-// }
},
@@ -32771,9 +32913,8 @@ Roo.extend(Roo.bootstrap.form.HtmlEditor, Roo.bootstrap.form.TextArea, {
-Roo.namespace('Roo.bootstrap.form.HtmlEditor');
/**
- * @class Roo.bootstrap.form.HtmlEditorToolbarStandard
+ * @class Roo.bootstrap.form.HtmlEditorToolbar.Standard
* @parent Roo.bootstrap.form.HtmlEditor
* @extends Roo.bootstrap.nav.Simplebar
* Basic Toolbar
@@ -32784,7 +32925,7 @@ Roo.namespace('Roo.bootstrap.form.HtmlEditor');
new Roo.bootstrap.form.HtmlEditor({
....
toolbars : [
- new Roo.bootstrap.form.HtmlEditorToolbarStandard({
+ new Roo.bootstrap.form.HtmlEditorToolbar.Standard({
disable : { fonts: 1 , format: 1, ..., ... , ...],
btns : [ .... ]
})
@@ -32799,7 +32940,7 @@ Roo.namespace('Roo.bootstrap.form.HtmlEditor');
* .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
*/
-Roo.bootstrap.form.HtmlEditorToolbarStandard = function(config)
+Roo.bootstrap.form.HtmlEditorToolbar.Standard = function(config)
{
Roo.apply(this, config);
@@ -32811,17 +32952,17 @@ Roo.bootstrap.form.HtmlEditorToolbarStandard = function(config)
colors : true,
specialElements : true
});
- Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.constructor.call(this, config);
+ Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.constructor.call(this, config);
this.editor = config.editor;
this.editorcore = config.editor.editorcore;
- this.buttons = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
+ this.buttons = new Roo.util.MixedCollection(false, function(o) { return o.btnid; });
//Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
// dont call parent... till later.
}
-Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simplebar, {
+Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simplebar, {
bar : true,
@@ -32837,11 +32978,14 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
'div','span'
],
+
+ deleteBtn: false,
+
onRender : function(ct, position)
{
// Roo.log("Call onRender: " + this.xtype);
- Roo.bootstrap.form.HtmlEditorToolbarStandard.superclass.onRender.call(this, ct, position);
+ Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.onRender.call(this, ct, position);
Roo.log(this.el);
this.el.dom.style.marginBottom = '0';
var _this = this;
@@ -32849,7 +32993,7 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
var editor= this.editor;
var children = [];
- var btn = function(id,cmd , toggle, handler, html){
+ var btn = function(id, cmd , toggle, handler, html){
var event = toggle ? 'toggle' : 'click';
@@ -32858,9 +33002,11 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
xtype: 'Button',
xns: Roo.bootstrap,
//glyphicon : id,
+ btnid : id,
fa: id,
- cmd : id || cmd,
- enableToggle:toggle !== false,
+ cls : 'roo-html-editor-btn-' + id,
+ cmd : cmd, // why id || cmd
+ enableToggle: toggle !== false,
html : html || '',
pressed : toggle ? false : null,
listeners : {}
@@ -32879,6 +33025,7 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
size : 'sm',
xns: Roo.bootstrap,
fa : 'font',
+ cls : 'roo-html-editor-font-chooser',
//html : 'submit'
menu : {
xtype: 'Menu',
@@ -32904,18 +33051,16 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
});
children.push(style);
- btn('bold',false,true);
- btn('italic',false,true);
- btn('align-left', 'justifyleft',true);
+ btn('bold', 'bold',true);
+ btn('italic', 'italic',true);
+ btn('underline', 'underline',true);
+ btn('align-left', 'justifyleft',true);
btn('align-center', 'justifycenter',true);
btn('align-right' , 'justifyright',true);
- btn('link', false, false, function(btn) {
- //Roo.log("create link?");
- var url = prompt(this.createLinkText, this.defaultLinkValue);
- if(url && url != 'http:/'+'/'){
- this.editorcore.relayCmd('createlink', url);
- }
- }),
+ btn('link', false, true, this.onLinkClick);
+
+
+ btn('image', false, true, this.onImageClick);
btn('list','insertunorderedlist',true);
btn('list-ol','insertorderedlist',true);
@@ -32930,58 +33075,178 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
}
}
- /*
- var cog = {
- xtype: 'Button',
- size : 'sm',
- xns: Roo.bootstrap,
- glyphicon : 'cog',
- //html : 'submit'
- menu : {
- xtype: 'Menu',
- xns: Roo.bootstrap,
- items: []
- }
- };
-
- cog.menu.items.push({
- xtype :'MenuItem',
- xns: Roo.bootstrap,
- html : Clean styles,
- tagname : f,
- listeners : {
- click : function()
- {
- editorcore.insertTag(this.tagname);
- editor.focus();
- }
- }
-
- });
- */
- this.xtype = 'NavSimplebar';
+ this.xtype = 'NavSimplebar'; // why?
for(var i=0;i< children.length;i++) {
this.buttons.add(this.addxtypeChild(children[i]));
}
-
+ this.buildToolbarDelete();
+
editor.on('editorevent', this.updateToolbar, this);
},
+
+ buildToolbarDelete : function()
+ {
+
+ /* this.addxtypeChild({
+ xtype : 'Element',
+ xns : Roo.bootstrap,
+ cls : 'roo-htmleditor-fill'
+ });
+ */
+ this.deleteBtn = this.addxtypeChild({
+ size : 'sm',
+ xtype: 'Button',
+ xns: Roo.bootstrap,
+ fa: 'trash',
+ listeners : {
+ click : this.onDelete.createDelegate(this)
+ }
+ });
+ this.deleteBtn.hide();
+
+ },
+
+ onImageClick : function()
+ {
+ if (this.input) {
+ this.input.un('change', this.onFileSelected, this);
+ }
+ this.input = Roo.get(document.body).createChild({
+ tag: 'input',
+ type : 'file',
+ style : 'display:none',
+ multiple: 'multiple'
+ });
+ this.input.on('change', this.onFileSelected, this);
+ this.input.dom.click();
+ },
+
+ onFileSelected : function(e)
+ {
+ e.preventDefault();
+
+ if(typeof(this.input.dom.files) == 'undefined' || !this.input.dom.files.length){
+ return;
+ }
+
+
+ this.addFiles(Array.prototype.slice.call(this.input.dom.files), false);
+ },
+
+ addFiles : function(far, fire_add) {
+
+
+ var editor = this.editorcore;
+
+ if (!far.length) {
+ if (fire_add) {
+ this.editor.syncValue();
+ editor.owner.fireEvent('editorevent', editor.owner, false);
+ editor.owner.fireEvent('imageadd', editor.owner, false);
+ }
+ return;
+ }
+
+ var f = far.pop();
+
+ if (!f.type.match(/^image/)) {
+ this.addFiles(far, fire_add);
+ return;
+ }
+
+ var sn = this.selectedNode;
+
+ var bl = sn && this.editorcore.enableBlocks ? Roo.htmleditor.Block.factory(sn) : false;
+
+
+ var reader = new FileReader();
+ reader.addEventListener('load', (function() {
+ if (bl) {
+ var oldSrc = bl.image_src;
+ bl.image_src = reader.result;
+ //bl.caption = f.name;
+ bl.updateElement(sn);
+ this.editor.syncValue();
+ editor.owner.fireEvent('editorevent', editor.owner, false);
+ editor.owner.fireEvent('imageupdate', editor.owner, sn, oldSrc);
+ // we only do the first file!! and replace.
+ return;
+ }
+ if (this.editorcore.enableBlocks) {
+ var fig = new Roo.htmleditor.BlockFigure({
+ image_src : reader.result,
+ caption : '',
+ caption_display : 'none' //default to hide captions..
+ });
+ editor.insertAtCursor(fig.toHTML());
+ this.addFiles(far, true);
+ return;
+ }
+ // just a standard img..
+ if (sn && sn.tagName.toUpperCase() == 'IMG') {
+ var oldSrc = sn.src;
+ sn.src = reader.result;
+ this.editor.syncValue();
+ editor.owner.fireEvent('editorevent', editor.owner, false);
+ editor.owner.fireEvent('imageupdate', editor.owner, sn, oldSrc);
+ return;
+ }
+ editor.insertAtCursor('
');
+ this.addFiles(far, true);
+
+ }).createDelegate(this));
+ reader.readAsDataURL(f);
+
+
+ },
+
+
onBtnClick : function(id)
{
this.editorcore.relayCmd(id);
this.editorcore.focus();
},
+ onLinkClick : function(btn) {
+ var url = this.selectedNode && this.selectedNode.tagName.toUpperCase() == 'A' ?
+ this.selectedNode.getAttribute('href') : '';
+
+ Roo.bootstrap.MessageBox.show({
+ title : "Add / Edit Link URL",
+ msg : "Enter the URL for the link",
+ buttons: Roo.bootstrap.MessageBox.OKCANCEL,
+ minWidth: 250,
+ scope : this,
+ prompt:true,
+ multiline: false,
+ modal : true,
+ value : url,
+ fn: function(pressed, newurl) {
+ if (pressed != 'ok') {
+ this.editorcore.focus();
+ return;
+ }
+ if (url != '') {
+ this.selectedNode.setAttribute('href', newurl);
+ return;
+ }
+ if(newurl && newurl .match(/http(s):\/\/.+/)) {
+ this.editorcore.relayCmd('createlink', newurl);
+ }
+ this.editorcore.focus();
+ }
+ });
+ },
/**
* Protected method that will not generally be called directly. It triggers
* a toolbar update by reading the markup state of the current selection in the editor.
*/
- updateToolbar: function(){
+ updateToolbar: function(editor ,ev, sel){
if(!this.editorcore.activated){
this.editor.onFirstFocus(); // is this neeed?
@@ -32990,39 +33255,89 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
var btns = this.buttons;
var doc = this.editorcore.doc;
- btns.get('bold').setActive(doc.queryCommandState('bold'));
- btns.get('italic').setActive(doc.queryCommandState('italic'));
- //btns.get('underline').setActive(doc.queryCommandState('underline'));
+ var hasToggle = false;
+ btns.each(function(e) {
+ if (e.enableToggle && e.cmd) {
+ hasToggle = hasToggle || (['align-left', 'align-right', 'align-center', 'image' , 'link', 'underline'].indexOf(e.btnid) < 0 && doc.queryCommandState(e.cmd));
+ e.setActive(doc.queryCommandState(e.cmd));
+ }
+ }, this);
- btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
- btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
- btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
- //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
- btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
- /*
+ if (ev &&
+ (ev.type == 'mouseup' || ev.type == 'click' ) &&
+ ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
+ // they have click on an image...
+ // let's see if we can change the selection...
+ sel = ev.target;
+
+ }
var ans = this.editorcore.getAllAncestors();
- if (this.formatCombo) {
+ if (!sel) {
+ sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
+ sel = sel ? sel : this.editorcore.doc.body;
+ sel = sel.tagName.length ? sel : this.editorcore.doc.body;
+ }
+
+ var lastSel = this.selectedNode;
+ this.selectedNode = sel;
+
+ // ok see if we are editing a block?
+
+ var db = false;
+ // you are not actually selecting the block.
+ if (sel && sel.hasAttribute('data-block')) {
+ db = sel;
+ } else if (sel && sel.closest('[data-block]')) {
+ db = sel.closest('[data-block]');
+ }
+
+ Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+ e.classList.remove('roo-ed-selection');
+ });
+
+ var block = false;
+ if (db && this.editorcore.enableBlocks) {
+ block = Roo.htmleditor.Block.factory(db);
- var store = this.formatCombo.store;
- this.formatCombo.setValue("");
- for (var i =0; i < ans.length;i++) {
- if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
- // select it..
- this.formatCombo.setValue(ans[i].tagName.toLowerCase());
- break;
- }
+ if (block) {
+ db.className = (db.classList.length > 0 ? db.className + ' ' : '') +
+ ' roo-ed-selection';
+ sel = this.selectedNode = db;
}
}
+ // highlight the 'a'..
+ var tn = sel && sel.tagName.toUpperCase() || '';
+ if (!block && sel && tn != 'A') {
+ var asel = sel.closest('A');
+ if (asel) {
+ sel = asel;
+ }
+ }
+
+ btns.get('link').setActive(tn == 'A' && this.selectedNode.hasAttribute('href'));
+ btns.get('image').setActive(tn == 'IMG' || this.editorcore.enableBlocks && tn == 'FIGURE');
+ btns.get('underline').setActive(tn == 'U' || sel.closest('u') ? true : false);
-
- // hides menus... - so this cant be on a menu...
- Roo.bootstrap.MenuMgr.hideAll();
- */
Roo.bootstrap.menu.Manager.hideAll();
+
+
+
+
+
+ // handle delete button..
+ if (hasToggle || (tn.length && tn == 'BODY')) {
+ this.deleteBtn.hide();
+ return;
+
+ }
+ this.deleteBtn.show();
+
+
+
//this.editorsyncValue();
},
onFirstFocus: function() {
@@ -33030,6 +33345,61 @@ Roo.extend(Roo.bootstrap.form.HtmlEditorToolbarStandard, Roo.bootstrap.nav.Simpl
item.enable();
});
},
+
+ onDelete : function()
+ {
+ var range = this.editorcore.createRange();
+ var selection = this.editorcore.getSelection();
+ var sn = this.selectedNode;
+ range.setStart(sn,0);
+ range.setEnd(sn,0);
+
+
+ if (sn.hasAttribute('data-block')) {
+ var block = Roo.htmleditor.Block.factory(this.selectedNode);
+ if (block) {
+ sn = block.removeNode();
+ sn.parentNode.removeChild(sn);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ this.updateToolbar(null, null, null);
+ if (sn.tagName.toUpperCase() == 'FIGURE') {
+ this.editor.syncValue();
+ this.editor.fireEvent('imagedelete', this.editor, sn);
+ }
+
+ this.selectedNode = false;
+ this.editorcore.fireEditorEvent(false);
+ return;
+ }
+
+ }
+ if (!sn) {
+ return; // should not really happen..
+ }
+ if (sn && sn.tagName == 'BODY') {
+ return;
+ }
+ var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+
+ // remove and keep parents.
+ a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+ a.replaceTag(sn);
+
+ selection.removeAllRanges();
+ selection.addRange(range);
+ if (sn.tagName.toUpperCase() == 'IMG"') {
+ this.editor.syncValue();
+ this.editor.fireEvent('imagedelete', this.editor, sn);
+ }
+
+ this.selectedNode = false;
+ this.editorcore.fireEditorEvent(false);
+
+
+ },
+
+
toggleSourceEdit : function(sourceEditMode){