X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=docs%2Fsrc%2FRoo_form_HtmlEditor_ToolbarContext.js.html;h=f12c515eb92ea95496981202dd89bc5777303b8f;hp=5a474b513110a989b12cdb21436a7cefd15afc08;hb=18480d449e889bafc18e683dca94b2ff4729dbd4;hpb=df2e2de75c4a885e8935bbf1d745c498c9055beb
diff --git a/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html b/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html
index 5a474b5131..f12c515eb9 100644
--- a/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html
+++ b/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html
@@ -41,189 +41,138 @@
Roo.form.HtmlEditor.ToolbarContext.types = {
- 'IMG' : {
- width : {
+ 'IMG' : [
+ {
+ name : 'width',
title: "Width",
width: 40
},
- height: {
+ {
+ name : 'height',
title: "Height",
width: 40
},
- align: {
+ {
+ name : 'align',
title: "Align",
opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
width : 80
},
- border: {
+ {
+ name : 'border',
title: "Border",
width: 40
},
- alt: {
+ {
+ name : 'alt',
title: "Alt",
width: 120
},
- src : {
+ {
+ name : 'src',
title: "Src",
width: 220
}
- },
- 'A' : {
- name : {
+ ],
+
+ 'FIGURE' : [
+ {
+ name : 'align',
+ title: "Align",
+ opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+ width : 80
+ }
+ ],
+ 'A' : [
+ {
+ name : 'name',
title: "Name",
width: 50
},
- target: {
+ {
+ name : 'target',
title: "Target",
width: 120
},
- href: {
+ {
+ name : 'href',
title: "Href",
width: 220
} },
- 'TABLE' : {
- rows : {
- title: "Rows",
- width: 20
- },
- cols : {
- title: "Cols",
- width: 20
- },
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- border : {
- title: "Border",
- width: 20
- }
- },
- 'TD' : {
- width : {
- title: "Width",
- width: 40
- },
- height : {
- title: "Height",
- width: 40
- },
- align: {
- title: "Align",
- opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
- width: 80
- },
- valign: {
- title: "Valign",
- opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
- width: 80
- },
- colspan: {
- title: "Colspan",
- width: 20
+ ],
- },
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'INPUT' : {
- name : {
+ 'INPUT' : [
+ {
+ name : 'name',
title: "name",
width: 120
},
- value : {
+ {
+ name : 'value',
title: "Value",
width: 120
},
- width : {
+ {
+ name : 'width',
title: "Width",
width: 40
}
- },
- 'LABEL' : {
- 'for' : {
+ ],
+ 'LABEL' : [
+ {
+ name : 'for',
title: "For",
width: 120
}
- },
- 'TEXTAREA' : {
- name : {
+ ],
+ 'TEXTAREA' : [
+ {
+ name : 'name',
title: "name",
width: 120
},
- rows : {
+ {
+ name : 'rows',
title: "Rows",
width: 20
},
- cols : {
+ {
+ name : 'cols',
title: "Cols",
width: 20
}
- },
- 'SELECT' : {
- name : {
+ ],
+ 'SELECT' : [
+ {
+ name : 'name',
title: "name",
width: 120
},
- selectoptions : {
+ {
+ name : 'selectoptions',
title: "Options",
width: 200
}
- },
+ ],
'BODY' : {
- title : {
+ 'BODY' : [
+
+ {
+ name : 'title',
title: "Title",
width: 200,
disabled : true
}
- },
- 'SPAN' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'DIV' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
- 'P' : {
- 'font-family' : {
- title : "Font",
- style : 'fontFamily',
- displayField: 'display',
- optname : 'font-family',
- width: 140
- }
- },
+ ],
- '*' : {
- }
+ '*' : [
+ ]
};
@@ -309,7 +258,7 @@
// disable everything...
var ty= Roo.form.HtmlEditor.ToolbarContext.types;
this.toolbars = {};
-
+ for (var i in ty) {
this.toolbars[i] = this.buildToolbar(ty[i],i);
@@ -338,7 +287,12 @@
*
* Note you can force an update by calling on('editorevent', scope, false)
*/
- updateToolbar: function(editor,ev,sel){
+ updateToolbar: function(editor ,ev, sel)
+ {
+
+ if (ev) {
+ ev.stopEvent(); }
this.editor.onFirstFocus();
return;
}
+ if (ev &&
(ev.type == 'mouseup' || ev.type == 'click' ) &&
- ev.target && ev.target.tagName == 'IMG') {
- ev.target && ev.target.tagName != 'BODY' ) { sel = ev.target;
- var nodeRange = sel.ownerDocument.createRange();
- try {
- nodeRange.selectNode(sel);
- } catch (e) {
- nodeRange.selectNodeContents(sel);
- }
- var s = this.editorcore.win.getSelection();
- s.removeAllRanges();
- s.addRange(nodeRange);
- }
+ }
+
+ Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+ e.classList.remove('roo-ed-selection');
+ });
+ var updateFooter = sel ? false : true;
+ //var updateFooter = sel ? false : true;
var ans = this.editorcore.getAllAncestors();
var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+ var ty = Roo.form.HtmlEditor.ToolbarContext.types;
if (!sel) {
sel = ans.length ? (ans[0] ? ans[0] : ans[1]) : this.editorcore.doc.body;
@@ -386,86 +342,145 @@
sel = sel.tagName.length ? sel : this.editorcore.doc.body;
}
- var tn = sel.tagName.toUpperCase();
- var lastSel = this.tb.selectedNode;
+ this.tb.selectedNode = sel;
+ var left_label = tn;
- tn = sel.tagName.toUpperCase();
+ var lastSel = this.tb.selectedNode;
+ var db = false;
+ if (sel && sel.hasAttribute('data-block')) {
+ db = sel;
+ } else if (sel && sel.closest('[data-block]')) {
- this.tb.selectedNode = sel;
+ db = sel.closest('[data-block]');
+ }
- if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
+ var block = false;
+ if (db && this.editorcore.enableBlocks) {
+ block = Roo.htmleditor.Block.factory(db);
- this.tb.el.hide();
- this.tb = typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
- this.tb.el.show();
- this.tb.items.first().el.innerHTML = tn + ': ';
+ if (block) {
+ db.className = (
+ db.classList.length > 0 ? db.className + ' ' : ''
+ ) + 'roo-ed-selection';
- if (this.tb.fields) {
- this.tb.fields.each(function(e) {
- if (e.stylename) {
- e.setValue(sel.style[e.stylename]);
- return;
- }
- e.setValue(sel.getAttribute(e.attrname));
- });
- }
+ tn = 'BLOCK.' + db.getAttribute('data-block');
- var hasStyles = false;
- for(var i in this.styles) {
- hasStyles = true;
- break;
+ if (typeof(this.toolbars[tn]) == 'undefined') {
+ this.toolbars[tn] = this.buildToolbar( false ,tn ,block.friendly_name, block);
+ }
+ this.toolbars[tn].selectedNode = db;
+ left_label = block.friendly_name;
+ ans = this.editorcore.getAllAncestors();
}
- if (hasStyles) {
- var st = this.tb.fields.item(0);
- st.store.removeAll();
+
+ }
- var cn = sel.className.split(/\s+/);
+ if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
+ return; }
- var avs = [];
- if (this.styles['*']) {
- Roo.each(this.styles['*'], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
- if (this.styles[tn]) {
- Roo.each(this.styles[tn], function(v) {
- avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
- });
- }
- st.store.loadData(avs);
- st.collapse();
- st.setValue(cn);
- }
- this.tb.selectedNode = sel;
+ this.tb.el.hide();
+ this.tb = typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
+ this.tb.el.show();
+ this.tb.items.first().el.innerHTML = left_label + ': ';
- Roo.menu.MenuMgr.hideAll();
- }
+ if (block && this.tb.fields) {
- if (!updateFooter) {
- return;
+ this.tb.fields.each(function(e) {
+ e.setValue(block[e.name]);
+ });
+
+
+ } else if (this.tb.fields && this.tb.selectedNode) {
+ this.tb.fields.each( function(e) {
+ if (e.stylename) {
+ e.setValue(this.tb.selectedNode.style[e.stylename]);
+ return;
+ }
+ e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
+ }, this);
+ this.updateToolbarStyles(this.tb.selectedNode);
}
+
+
+
+ Roo.menu.MenuMgr.hideAll();
+
+
+
+
this.updateFooter(ans);
+
+ },
+
+ updateToolbarStyles : function(sel)
+ {
+ var hasStyles = false;
+ for(var i in this.styles) {
+ hasStyles = true;
+ break;
+ }
+
+ if (hasStyles && this.tb.hasStyles) {
+ var st = this.tb.fields.item(0);
+
+ st.store.removeAll();
+ var cn = sel.className.split(/\s+/);
+
+ var avs = [];
+ if (this.styles['*']) {
+
+ Roo.each(this.styles['*'], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
+ }
+ if (this.styles[tn]) {
+ Roo.each(this.styles[tn], function(v) {
+ avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );
+ });
+ }
+
+ st.store.loadData(avs);
+ st.collapse();
+ st.setValue(cn);
+ }
+ },
+
+
+ updateFooter : function(ans)
+ {
var html = '';
+ if (ans === false) {
+ this.footDisp.dom.innerHTML = '';
+ return;
+ }
this.footerEls = ans.reverse();
Roo.each(this.footerEls, function(a,i) {
@@ -485,10 +500,8 @@
this.footDisp.dom.innerHTML = html;
- },
-
+ },
item.enable();
});
},
- buildToolbar: function(tlist, nm)
+ buildToolbar: function(tlist, nm, friendly_name, block)
{
var editor = this.editor;
var editorcore = this.editorcore;
@@ -524,18 +537,22 @@
var tb = new Roo.Toolbar(wdiv);
- if (tlist === false && block) {
+ tlist = block.contextMenu(this);
+ }
- tb.add(nm+ ": ");
+ tb.hasStyles = false;
+ tb.name = nm;
+
+ tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ": ");
+
+ var styles = Array.from(this.styles);
- var styles = [];
- for(var i in this.styles) {
- styles.push(i);
- }
if (styles && styles.length) {
-
+ tb.hasStyles = true;
tb.addField( new Roo.form.ComboBox({
store: new Roo.data.SimpleStore({
@@ -565,9 +582,18 @@
}
var tbc = Roo.form.HtmlEditor.ToolbarContext;
- var tbops = tbc.options;
- for (var i in tlist) {
+
+ for (var i = 0; i < tlist.length; i++) {
+
+ if (typeof(tlist[i].xtype) != 'undefined') {
+
+ tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
+
+
+ continue;
+ }
var item = tlist[i];
tb.add(item.title + ": ");
@@ -575,8 +601,8 @@
var opts = item.opts ? item.opts : false;
- if (item.optname) {
- opts = tbops[item.optname];
+ if (item.optname) { opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
}
@@ -588,13 +614,15 @@
fields: ['val', 'display'],
data : opts
}),
- name : '-roo-edit-' + i,
- attrname : i,
+ name : '-roo-edit-' + tlist[i].name,
+
+ attrname : tlist[i].name,
stylename : item.style ? item.style : false,
+
displayField: item.displayField ? item.displayField : 'val',
valueField : 'val',
typeAhead: false,
- mode: typeof(tbc.stores[i]) != 'undefined' ? 'remote' : 'local',
+ mode: typeof(tbc.stores[tlist[i].name]) != 'undefined' ? 'remote' : 'local',
editable : false,
triggerAction: 'all',
emptyText:'Select',
@@ -602,11 +630,20 @@
width: item.width ? item.width : 130,
listeners : {
'select': function(c, r, i) {
+
+
if (c.stylename) {
tb.selectedNode.style[c.stylename] = r.get('val');
+ editorcore.syncValue();
+ return;
+ }
+ if (r === false) {
+ tb.selectedNode.removeAttribute(c.attrname);
+ editorcore.syncValue();
return;
}
tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+ editorcore.syncValue();
}
}
@@ -614,24 +651,27 @@
continue;
-
- tb.addField( new Roo.form.TextField({
- name: i,
- width: 100,
- value: ''
- }));
- continue;
- }
+ }
tb.addField( new Roo.form.TextField({
- name: '-roo-edit-' + i,
- attrname : i,
+ name: '-roo-edit-' + tlist[i].name,
+ attrname : tlist[i].name,
width: item.width,
value: '',
listeners: {
'change' : function(f, nv, ov) {
+
+
tb.selectedNode.setAttribute(f.attrname, nv);
editorcore.syncValue();
}
@@ -641,8 +681,9 @@
}
var _this = this;
-
+ var show_delete = !block || block.deleteTitle !== false;
if(nm == 'BODY'){
+ show_delete = false;
tb.addSeparator();
tb.addButton( {
@@ -658,60 +699,61 @@
}
tb.addFill();
- tb.addButton( {
- text: 'Remove Tag',
-
- listeners : {
- click : function ()
- {
- var sn = tb.selectedNode;
+ if (show_delete) {
+ tb.addButton({
+ text: block && block.deleteTitle ? block.deleteTitle : 'Remove Block or Formating', var pn = sn.parentNode;
-
- var stn = sn.childNodes[0];
- var en = sn.childNodes[sn.childNodes.length - 1 ];
- while (sn.childNodes.length) {
- var node = sn.childNodes[0];
- sn.removeChild(node);
- pn.insertBefore(node, sn);
+ listeners : {
+ click : function ()
+ {
+ var sn = tb.selectedNode;
+ if (block) {
+ sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
- }
- pn.removeChild(sn);
- var range = editorcore.createRange();
+ }
+ if (!sn) {
+ return;
+ }
+ var stn = sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+ if (sn.hasAttribute('data-block')) {
+ stn = sn.nextSibling || sn.previousSibling || sn.parentNode;
+ sn.parentNode.removeChild(sn);
+
+ } else if (sn && sn.tagName != 'BODY') {
+ a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+ a.replaceTag(sn);
+ }
- range.setStart(stn,0);
- range.setEnd(en,0); var range = editorcore.createRange();
- var selection = editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
+ range.setStart(stn,0);
+ range.setEnd(stn,0);
+ var selection = editorcore.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+ _this.updateToolbar(null, null, null);
+ _this.updateFooter(false);
- _this.updateToolbar(null, null, null);
- _this.footDisp.dom.innerHTML = '';
+ }
}
- }
- });
-
+ });
+ }
tb.el.on('click', function(e){
e.preventDefault(); });
tb.el.setVisibilityMode( Roo.Element.DISPLAY);
tb.el.hide();
- tb.name = nm;
+
return tb;
@@ -755,6 +797,7 @@
},
+ onContextClick : function (ev,dom)
{
ev.preventDefault();
@@ -767,17 +810,7 @@
var ans = this.footerEls;
var sel = ans[n];
- var range = this.editorcore.createRange();
-
- range.selectNodeContents(sel);
- var selection = this.editorcore.getSelection();
- selection.removeAllRanges();
- selection.addRange(range);
-
+ this.editorcore.selectNode(sel);
this.updateToolbar(null, null, sel);