3 * @class Roo.bootstrap.form.HtmlEditorToolbar.Standard
4 * @parent Roo.bootstrap.form.HtmlEditor
5 * @extends Roo.bootstrap.nav.Simplebar
11 new Roo.bootstrap.form.HtmlEditor({
14 new Roo.bootstrap.form.HtmlEditorToolbar.Standard({
15 disable : { fonts: 1 , format: 1, ..., ... , ...],
21 * @cfg {Object} disable List of elements to disable..
22 * @cfg {Array} btns List of additional buttons.
26 * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
29 Roo.bootstrap.form.HtmlEditorToolbar.Standard = function(config)
32 Roo.apply(this, config);
34 // default disabled, based on 'good practice'..
35 this.disable = this.disable || {};
36 Roo.applyIf(this.disable, {
39 specialElements : true
41 Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.constructor.call(this, config);
43 this.editor = config.editor;
44 this.editorcore = config.editor.editorcore;
46 this.buttons = new Roo.util.MixedCollection(false, function(o) { return o.cmd; });
48 //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
49 // dont call parent... till later.
51 Roo.extend(Roo.bootstrap.form.HtmlEditorToolbar.Standard, Roo.bootstrap.nav.Simplebar, {
61 "h1","h2","h3","h4","h5","h6",
63 "abbr", "acronym", "address", "cite", "samp", "var",
70 onRender : function(ct, position)
72 // Roo.log("Call onRender: " + this.xtype);
74 Roo.bootstrap.form.HtmlEditorToolbar.Standard.superclass.onRender.call(this, ct, position);
76 this.el.dom.style.marginBottom = '0';
78 var editorcore = this.editorcore;
79 var editor= this.editor;
82 var btn = function(id,cmd , toggle, handler, html){
84 var event = toggle ? 'toggle' : 'click';
93 enableToggle:toggle !== false,
95 pressed : toggle ? false : null,
98 a.listeners[toggle ? 'toggle' : 'click'] = function() {
99 handler ? handler.call(_this,this) :_this.onBtnClick.call(_this, cmd || id);
105 // var cb_box = function...
119 Roo.each(this.formats, function(f) {
120 style.menu.items.push({
123 html : '<'+ f+' style="margin:2px">'+f +'</'+ f+'>',
128 editorcore.insertTag(this.tagname);
135 children.push(style);
137 btn('bold',false,true);
138 btn('italic',false,true);
139 btn('align-left', 'justifyleft',true);
140 btn('align-center', 'justifycenter',true);
141 btn('align-right' , 'justifyright',true);
142 btn('link', false, false, function(btn) {
143 //Roo.log("create link?");
144 var url = prompt(this.createLinkText, this.defaultLinkValue);
145 if(url && url != 'http:/'+'/'){
146 this.editorcore.relayCmd('createlink', url);
149 btn('list','insertunorderedlist',true);
150 btn('list-ol','insertorderedlist',true);
152 btn('pencil', false,true, function(btn){
154 this.toggleSourceEdit(btn.pressed);
157 if (this.editor.btns.length > 0) {
158 for (var i = 0; i<this.editor.btns.length; i++) {
159 children.push(this.editor.btns[i]);
165 this.xtype = 'NavSimplebar'; // why?
167 for(var i=0;i< children.length;i++) {
169 this.buttons.add(this.addxtypeChild(children[i]));
172 this.buildToolbarDelete();
174 editor.on('editorevent', this.updateToolbar, this);
177 buildToolbarDelete : function()
183 cls : 'roo-htmleditor-fill'
186 this.deleteBtn = this.addxtypeChild({
192 click : this.onDelete.createDelegate(this)
195 this.deleteBtn.hide();
200 onBtnClick : function(id)
202 this.editorcore.relayCmd(id);
203 this.editorcore.focus();
207 * Protected method that will not generally be called directly. It triggers
208 * a toolbar update by reading the markup state of the current selection in the editor.
210 updateToolbar: function(editor ,ev, sel){
212 if(!this.editorcore.activated){
213 this.editor.onFirstFocus(); // is this neeed?
217 var btns = this.buttons;
218 var doc = this.editorcore.doc;
219 btns.get('bold').setActive(doc.queryCommandState('bold'));
220 btns.get('italic').setActive(doc.queryCommandState('italic'));
221 //btns.get('underline').setActive(doc.queryCommandState('underline'));
223 btns.get('align-left').setActive(doc.queryCommandState('justifyleft'));
224 btns.get('align-center').setActive(doc.queryCommandState('justifycenter'));
225 btns.get('align-right').setActive(doc.queryCommandState('justifyright'));
227 //btns[frameId + '-insertorderedlist').setActive(doc.queryCommandState('insertorderedlist'));
228 btns.get('list').setActive(doc.queryCommandState('insertunorderedlist'));
231 (ev.type == 'mouseup' || ev.type == 'click' ) &&
232 ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
233 // they have click on an image...
234 // let's see if we can change the selection...
238 var tn = sel && sel.tagName.toUpperCase() || '';
239 if (sel && tn != 'A') {
240 var asel = sel.closest('A');
246 btns.get('link').setActive(tn == 'A');
251 Roo.bootstrap.menu.Manager.hideAll();
252 //this.editorsyncValue();
254 onFirstFocus: function() {
255 this.buttons.each(function(item){
259 toggleSourceEdit : function(sourceEditMode){
263 Roo.log("disabling buttons");
264 this.buttons.each( function(item){
265 if(item.cmd != 'pencil'){
271 Roo.log("enabling buttons");
272 if(this.editorcore.initialized){
273 this.buttons.each( function(item){
279 Roo.log("calling toggole on editor");
280 // tell the editor that it's been pressed..
281 this.editor.toggleSourceEdit(sourceEditMode);