docs/default.css
[roojs1] / docs / symbols / src / Roo_form_HtmlEditor_ToolbarContext.js.html
index fe4cfbe..f2bdc95 100644 (file)
@@ -37,6 +37,9 @@
     // dont call parent... till later.
     </span><span class="jsdoc-var">this.styles </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.styles </span><span class="jsdoc-syntax">|| {};
 }
+
+
 </span><span class="jsdoc-var">Roo.form.HtmlEditor.ToolbarContext.types </span><span class="jsdoc-syntax">= {
     </span><span class="jsdoc-string">'IMG' </span><span class="jsdoc-syntax">: {
         </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: {
             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Name&quot;</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 50
         },
+        </span><span class="jsdoc-var">target</span><span class="jsdoc-syntax">:  {
+            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Target&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 120
+        },
         </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">:  {
             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Href&quot;</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 220
             </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Colspan&quot;</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 20
             
+        },
+         </span><span class="jsdoc-string">'font-family'  </span><span class="jsdoc-syntax">: {
+            </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Font&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fontFamily'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">optname </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'font-family'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 140
         }
     },
     </span><span class="jsdoc-string">'INPUT' </span><span class="jsdoc-syntax">: {
     // should this just be 
     </span><span class="jsdoc-string">'BODY' </span><span class="jsdoc-syntax">: {
         </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;title&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Title&quot;</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 200,
             </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
         </span><span class="jsdoc-syntax">}
     },
+    </span><span class="jsdoc-string">'SPAN' </span><span class="jsdoc-syntax">: {
+        </span><span class="jsdoc-string">'font-family'  </span><span class="jsdoc-syntax">: {
+            </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Font&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fontFamily'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">optname </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'font-family'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 140
+        }
+    },
+    </span><span class="jsdoc-string">'DIV' </span><span class="jsdoc-syntax">: {
+        </span><span class="jsdoc-string">'font-family'  </span><span class="jsdoc-syntax">: {
+            </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Font&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fontFamily'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">optname </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'font-family'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 140
+        }
+    },
+     </span><span class="jsdoc-string">'P' </span><span class="jsdoc-syntax">: {
+        </span><span class="jsdoc-string">'font-family'  </span><span class="jsdoc-syntax">: {
+            </span><span class="jsdoc-var">title </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Font&quot;</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'fontFamily'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">optname </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'font-family'</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 140
+        }
+    },
+    
     </span><span class="jsdoc-string">'*' </span><span class="jsdoc-syntax">: {
         </span><span class="jsdoc-comment">// empty..
     </span><span class="jsdoc-syntax">}
+
+};
+
+</span><span class="jsdoc-comment">// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
+</span><span class="jsdoc-var">Roo.form.HtmlEditor.ToolbarContext.stores </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-var">Roo.form.HtmlEditor.ToolbarContext.options </span><span class="jsdoc-syntax">= {
+        </span><span class="jsdoc-string">'font-family'  </span><span class="jsdoc-syntax">: [ 
+                [ </span><span class="jsdoc-string">'Helvetica,Arial,sans-serif'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'Helvetica'</span><span class="jsdoc-syntax">],
+                [ </span><span class="jsdoc-string">'Courier New'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'Courier New'</span><span class="jsdoc-syntax">],
+                [ </span><span class="jsdoc-string">'Tahoma'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'Tahoma'</span><span class="jsdoc-syntax">],
+                [ </span><span class="jsdoc-string">'Times New Roman,serif'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'Times'</span><span class="jsdoc-syntax">],
+                [ </span><span class="jsdoc-string">'Verdana'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'Verdana' </span><span class="jsdoc-syntax">]
+        ]
 };
 
+</span><span class="jsdoc-comment">// fixme - these need to be configurable..
+
+//Roo.form.HtmlEditor.ToolbarContext.types
 
 
 </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.HtmlEditor.ToolbarContext.prototype</span><span class="jsdoc-syntax">,  {
     </span><span class="jsdoc-var">rendered</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
     
     </span><span class="jsdoc-var">editor </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">editorcore </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-comment">/**
      * @cfg {Object} disable  List of toolbar elements to disable
          
      */
     </span><span class="jsdoc-var">styles </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
     
-    
+    </span><span class="jsdoc-var">options</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
     
     </span><span class="jsdoc-var">toolbars </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
     
     </span><span class="jsdoc-var">init </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-var">this.editor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.editorcore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editor.editorcore </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">editor.editorcore </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">editorcore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore</span><span class="jsdoc-syntax">;
         
-        
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editor.frameId</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editorcore.frameId</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">etb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">toggle</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">){
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fid </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">;
                 </span><span class="jsdoc-var">cmd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-btn-icon x-edit-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">enableToggle</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
-                </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// was editor...
-                </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">editor.relayBtnCmd</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">editorcore</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// was editor...
+                </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">editorcore.relayBtnCmd</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">etb.buttonTips</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] || </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">///tips ???
                 </span><span class="jsdoc-var">tabIndex</span><span class="jsdoc-syntax">:-1
     </span><span class="jsdoc-comment">/**
      * 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.
+     *
+     * Note you can force an update by calling on('editorevent', scope, false)
      */
     </span><span class="jsdoc-var">updateToolbar</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">ev</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">){
 
         </span><span class="jsdoc-comment">//Roo.log(ev);
         // capture mouse up - this is handy for selecting images..
         // perhaps should go somewhere else...
-        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.editor.activated</span><span class="jsdoc-syntax">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.editorcore.activated</span><span class="jsdoc-syntax">){
              </span><span class="jsdoc-var">this.editor.onFirstFocus</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }
         
+        
+        
         </span><span class="jsdoc-comment">// http://developer.yahoo.com/yui/docs/simple-editor.js.html
         // selectNode - might want to handle IE?
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ev </span><span class="jsdoc-syntax">&amp;&amp;
                 </span><span class="jsdoc-var">nodeRange.selectNodeContents</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">);
             }
             </span><span class="jsdoc-comment">//nodeRange.collapse(true);
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editor.win.getSelection</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore.win.getSelection</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-var">s.removeAllRanges</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-var">s.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nodeRange</span><span class="jsdoc-syntax">);
         }  
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">updateFooter </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
         
         
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ans </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editor.getAllAncestors</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ans </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore.getAllAncestors</span><span class="jsdoc-syntax">();
         
         </span><span class="jsdoc-comment">// pick
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.form.HtmlEditor.ToolbarContext.types</span><span class="jsdoc-syntax">;
         
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">) { 
-            </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ans.length </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[0] ?  </span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[0]  : </span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[1]) : </span><span class="jsdoc-var">this.editor.doc.body</span><span class="jsdoc-syntax">;
-            </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.editor.doc.body</span><span class="jsdoc-syntax">;
-            </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.tagName.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.editor.doc.body</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ans.length </span><span class="jsdoc-syntax">? (</span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[0] ?  </span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[0]  : </span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[1]) : </span><span class="jsdoc-var">this.editorcore.doc.body</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.editorcore.doc.body</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.tagName.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.editorcore.doc.body</span><span class="jsdoc-syntax">;
             
         }
         </span><span class="jsdoc-comment">// pick a menu that exists..
         
         </span><span class="jsdoc-var">tn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.tagName.toUpperCase</span><span class="jsdoc-syntax">();
         
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastSel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tb.selectedNode
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lastSel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tb.selectedNode</span><span class="jsdoc-syntax">;
         
-        this.tb.selectedNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-var">this.tb.selectedNode </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">;
         
         </span><span class="jsdoc-comment">// if current menu does not match..
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.tb.name </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">lastSel </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.tb.selectedNode</span><span class="jsdoc-syntax">)) {
+        
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">this.tb.name </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">tn</span><span class="jsdoc-syntax">) || (</span><span class="jsdoc-var">lastSel </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.tb.selectedNode</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">ev </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
                 
             </span><span class="jsdoc-var">this.tb.el.hide</span><span class="jsdoc-syntax">();
             </span><span class="jsdoc-comment">///console.log(&quot;show: &quot; + tn);
             </span><span class="jsdoc-comment">// update attributes
             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.tb.fields</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-var">this.tb.fields.each</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.stylename</span><span class="jsdoc-syntax">) {
+                        </span><span class="jsdoc-var">e.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">e.stylename</span><span class="jsdoc-syntax">]);
+                        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                    } 
                    </span><span class="jsdoc-var">e.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.attrname</span><span class="jsdoc-syntax">));
                 });
             }
     </span><span class="jsdoc-var">buildToolbar</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tlist</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nm</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">editor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editor</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">editorcore </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore</span><span class="jsdoc-syntax">;
          </span><span class="jsdoc-comment">// create a new element.
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wdiv </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editor.wrap.createChild</span><span class="jsdoc-syntax">({
                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'
                 }),
                 </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'-roo-edit-className'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">attrname </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'className'</span><span class="jsdoc-syntax">,
-                </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">typeAhead</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'local'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">editable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-string">'select'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
                         </span><span class="jsdoc-comment">// initial support only for on class per el..
                         </span><span class="jsdoc-var">tb.selectedNode.className </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
-                        </span><span class="jsdoc-var">editor.syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">editorcore.syncValue</span><span class="jsdoc-syntax">();
                     }
                 }
     
             }));
         }
-            
         
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tbc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.form.HtmlEditor.ToolbarContext</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tbops </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tbc.options</span><span class="jsdoc-syntax">;
         
         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-keyword">in </span><span class="jsdoc-var">tlist</span><span class="jsdoc-syntax">) {
             
             </span><span class="jsdoc-var">tb.add</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.title </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">&quot;:&amp;nbsp;&quot;</span><span class="jsdoc-syntax">);
             
             
+            </span><span class="jsdoc-comment">//optname == used so you can configure the options available..
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">item.opts </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">item.opts </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.optname</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tbops</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">item.optname</span><span class="jsdoc-syntax">];
+           
+            }
             
-            
-            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">item.opts</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">opts</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-comment">// opts == pulldown..
                 </span><span class="jsdoc-var">tb.addField</span><span class="jsdoc-syntax">( </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.form.ComboBox</span><span class="jsdoc-syntax">({
-                    </span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.SimpleStore</span><span class="jsdoc-syntax">({
+                    </span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">:   </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tbc.stores</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">?  </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tbc.stores</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">],</span><span class="jsdoc-var">Roo.data</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.data.SimpleStore</span><span class="jsdoc-syntax">({
                         </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
-                        </span><span class="jsdoc-var">fields</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">],
-                        </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.opts  
+                        </span><span class="jsdoc-var">fields</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'display'</span><span class="jsdoc-syntax">],
+                        </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">opts  
                     </span><span class="jsdoc-syntax">}),
                     </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'-roo-edit-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">attrname </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">,
-                    </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">stylename </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.style </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">item.style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">displayField</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.displayField </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">item.displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">valueField </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">typeAhead</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
-                    </span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'local'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">mode</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tbc.stores</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined'  </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'remote' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'local'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">editable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">triggerAction</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'all'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">emptyText</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'Select'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.width </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">item.width  </span><span class="jsdoc-syntax">: 130,
                     </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                         </span><span class="jsdoc-string">'select'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
+                            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.stylename</span><span class="jsdoc-syntax">) {
+                                </span><span class="jsdoc-var">tb.selectedNode.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c.stylename</span><span class="jsdoc-syntax">] =  </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
+                                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                            }
                             </span><span class="jsdoc-var">tb.selectedNode.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.attrname</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">));
                         }
                     }
                 </span><span class="jsdoc-var">listeners</span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-string">'change' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nv</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ov</span><span class="jsdoc-syntax">) {
                         </span><span class="jsdoc-var">tb.selectedNode.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f.attrname</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nv</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">editorcore.syncValue</span><span class="jsdoc-syntax">();
                     }
                 }
             }));
              
         }
-        </span><span class="jsdoc-var">tb.addFill</span><span class="jsdoc-syntax">();
+        
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+        
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nm </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'BODY'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">tb.addSeparator</span><span class="jsdoc-syntax">();
+        
+            </span><span class="jsdoc-var">tb.addButton</span><span class="jsdoc-syntax">( {
+                </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Stylesheets'</span><span class="jsdoc-syntax">,
+
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
+                    {
+                        </span><span class="jsdoc-var">_this.editor.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'stylesheetsclick'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">_this.editor</span><span class="jsdoc-syntax">);
+                    }
+                }
+            });
+        }
+        
+        </span><span class="jsdoc-var">tb.addFill</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">tb.addButton</span><span class="jsdoc-syntax">( {
             </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Remove Tag'</span><span class="jsdoc-syntax">,
     
                     // undo does not work.
                      
                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">;
-                    </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
+                    
                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sn.parentNode</span><span class="jsdoc-syntax">;
                     
                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">stn </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">sn.childNodes</span><span class="jsdoc-syntax">[0];
                     </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn.childNodes.length</span><span class="jsdoc-syntax">) {
                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sn.childNodes</span><span class="jsdoc-syntax">[0];
                         </span><span class="jsdoc-var">sn.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">);
-                        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-comment">//Roo.log(node);
                         </span><span class="jsdoc-var">pn.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
                         
                     }
                     </span><span class="jsdoc-var">pn.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
-                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editor.createRange</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editorcore.createRange</span><span class="jsdoc-syntax">();
         
                     </span><span class="jsdoc-var">range.setStart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stn</span><span class="jsdoc-syntax">,0);
                     </span><span class="jsdoc-var">range.setEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">en</span><span class="jsdoc-syntax">,0); </span><span class="jsdoc-comment">//????
                     //range.selectNode(sel);
                     
                     
-                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editor.getSelection</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editorcore.getSelection</span><span class="jsdoc-syntax">();
                     </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
                     </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
                     
                     
                     </span><span class="jsdoc-comment">//_this.updateToolbar(null, null, pn);
                     </span><span class="jsdoc-var">_this.updateToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
-                    </span><span class="jsdoc-var">this.footDisp.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">; 
+                    </span><span class="jsdoc-var">_this.footDisp.dom.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">; 
                 }
             }
             
     {
         </span><span class="jsdoc-var">ev.preventDefault</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-keyword">var  </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dom.className</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//Roo.log(cn);
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cn.match</span><span class="jsdoc-syntax">(/x-ed-loc-/)) {
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ans</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">];
         
          </span><span class="jsdoc-comment">// pick
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editor.createRange</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore.createRange</span><span class="jsdoc-syntax">();
         
         </span><span class="jsdoc-var">range.selectNodeContents</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-comment">//range.selectNode(sel);
         
         
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editor.getSelection</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.editorcore.getSelection</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);