Skip to content

Commit

Permalink
some fixes for locale strings, along with a new heading plugin and ex…
Browse files Browse the repository at this point in the history
…perimental font selection
  • Loading branch information
VinylFox committed Aug 13, 2010
1 parent 28cdbae commit 6986ec4
Show file tree
Hide file tree
Showing 15 changed files with 158 additions and 59 deletions.
44 changes: 0 additions & 44 deletions README

This file was deleted.

11 changes: 9 additions & 2 deletions examples/form/form-htmleditor-basic.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HtmlEditor Plugins Window Example</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/htmleditorplugins.css" />
<link rel="stylesheet" type="text/css" href="../htmleditorplugins.css" />

<!-- GC -->
<!-- LIBS -->
Expand All @@ -26,9 +26,16 @@
<script src="../../src/Ext.ux.form.HtmlEditor.Link.js"></script>
<script src="../../src/Ext.ux.form.HtmlEditor.SpecialCharacters.js"></script>
<script src="../../src/Ext.ux.form.HtmlEditor.UndoRedo.js"></script>
<script src="../../src/Ext.ux.form.HtmlEditor.Heading.js"></script>
<script src="../../src/Ext.ux.form.HtmlEditor.Plugins.js"></script>
<!--<script src="http://ext-test/htmleditorplugins/Ext.ux.HtmlEditor.Plugins-all-debug.js"></script>-->
<script>
// this is how to override language strings in Midas Buttons
if(Ext.ux.form.HtmlEditor.UndoRedo){
Ext.ux.form.HtmlEditor.UndoRedo.prototype.midasBtns[1].tooltip.title = "Oh crap - go back to the way it was!";
}
</script>
<script src="form-htmleditor-basic.js"></script>

</head>
<body>

Expand Down
1 change: 1 addition & 0 deletions examples/form/form-htmleditor-basic.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Ext.onReady(function(){
value : 'The quick brown fox jumps over the fence<br/><img src="training.jpg" width="300" height="200"/>',
anchor : '100% 100%',
xtype : "htmleditor",
//enableFont : false,
plugins : Ext.ux.form.HtmlEditor.plugins()
}],
buttons : [{
Expand Down
3 changes: 3 additions & 0 deletions htmleditorplugins.jsb2
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@
},{
text: 'Ext.ux.form.HtmlEditor.SpecialCharacters.js',
path: 'src/'
},{
text: 'Ext.ux.form.HtmlEditor.Heading.js',
path: 'src/'
},{
text: 'Ext.ux.form.HtmlEditor.Table.js',
path: 'src/'
Expand Down
4 changes: 4 additions & 0 deletions resources/css/htmleditorplugins.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
See the notice.txt file in the images folder for possible licence conflicts with these images.
Some icons may be licenced under the Creative Commons licence - http://creativecommons.org/licenses/by/2.5/
Some icons have been modified slightly from their source files, in which case the original authors license still applies.
*/
.x-edit-wordpaste {background: url(../images/default/editor/edit-word-text.png) 0 0 no-repeat !important;}
.x-edit-table {background: url(../images/default/editor/edit-table.png) 0 0 no-repeat !important;}
Expand All @@ -23,6 +25,8 @@
.x-edit-findandreplace {background: url(../images/default/editor/edit-findandreplace.png) 0 0 no-repeat !important;}
.x-edit-undo {background: url(../images/default/editor/edit-undo.png) 0 0 no-repeat !important;}
.x-edit-redo {background: url(../images/default/editor/edit-redo.png) 0 0 no-repeat !important;}
.x-edit-formatblock-h1 {background: url(../images/default/editor/edit-heading-h1.png) 0 0 no-repeat !important;}
.x-edit-formatblock-h2 {background: url(../images/default/editor/edit-heading-h2.png) 0 0 no-repeat !important;}

/*
When using the famfamfam set of icons, the following styles can be used, assuming the famfamfam
Expand Down
Binary file added resources/images/default/editor/edit-heading-h1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/images/default/editor/edit-heading-h2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions src/Ext.ux.form.HtmlEditor.FindAndReplace.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ Ext.ux.form.HtmlEditor.FindAndReplace = Ext.extend(Ext.util.Observable, {
this.farWindow = new Ext.Window({
title: this.langTitle,
closeAction: 'hide',
width: 270,
items: [{
itemId: 'findandreplace',
xtype: 'form',
Expand All @@ -54,13 +55,13 @@ Ext.ux.form.HtmlEditor.FindAndReplace = Ext.extend(Ext.util.Observable, {
allowBlank: false,
fieldLabel: this.langFind,
name: 'find',
width: 150
width: 145
}, {
xtype: 'textfield',
allowBlank: true,
fieldLabel: this.langReplaceWith,
name: 'replace',
width: 150
width: 145
}]
}],
buttons: [{
Expand Down
49 changes: 49 additions & 0 deletions src/Ext.ux.form.HtmlEditor.Font.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* @author Shea Frederick - http://www.vinylfox.com
* @class Ext.ux.form.HtmlEditor.Font
* @extends Ext.util.Observable
* <p>A plugin that creates a menu on the HtmlEditor for selecting a font. Uses the HtmlEditors default font settings which can be overriden on that component to change the list of fonts or default font.</p>
*/
Ext.ux.form.HtmlEditor.Font = Ext.extend(Ext.util.Observable, {
init: function(cmp){
this.cmp = cmp;
this.cmp.on('render', this.onRender, this);
},
// private
onRender: function(){
var cmp = this.cmp;
var fonts = function(){
var fnts = [];
Ext.each(cmp.fontFamilies, function(itm){
fnts.push([itm.toLowerCase(),itm]);
});
return fnts;
}();
var btn = this.cmp.getToolbar().addItem({
xtype: 'combo',
displayField: 'display',
valueField: 'value',
name: 'fontfamily',
forceSelection: true,
mode: 'local',
triggerAction: 'all',
width: 80,
emptyText: 'Font',
tpl: '<tpl for="."><div class="x-combo-list-item" style="font-family:{value};">{display}</div></tpl>',
store: {
xtype: 'arraystore',
autoDestroy: true,
fields: ['value','display'],
data: fonts
},
listeners: {
'select': function(combo,rec){
this.relayCmd('fontname', rec.get('value'));
this.deferFocus();
combo.reset();
},
scope: cmp
}
});
}
});
70 changes: 70 additions & 0 deletions src/Ext.ux.form.HtmlEditor.Heading.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* @author Shea Frederick - http://www.vinylfox.com
* @contributor Somani - http://www.sencha.com/forum/member.php?51567-Somani
* @class Ext.ux.form.HtmlEditor.HeadingButtons
* @extends Ext.ux.form.HtmlEditor.MidasCommand
* <p>A plugin that creates a button on the HtmlEditor that will have H1 and H2 options. This is used when you want to restrict users to just a few heading types.</p>
* NOTE: while 'heading' should be the command used, it is not supported in IE, so 'formatblock' is used instead. Thank you IE.
*/

Ext.ux.form.HtmlEditor.HeadingButtons = Ext.extend(Ext.ux.form.HtmlEditor.MidasCommand, {
// private
midasBtns: ['|', {
enableOnSelection: true,
cmd: 'formatblock',
value: '<h1>',
tooltip: {
title: '1st Heading'
},
overflowText: '1st Heading'
}, {
enableOnSelection: true,
cmd: 'formatblock',
value: '<h2>',
tooltip: {
title: '2nd Heading'
},
overflowText: '2nd Heading'
}]
});

/**
* @author Shea Frederick - http://www.vinylfox.com
* @class Ext.ux.form.HtmlEditor.HeadingMenu
* @extends Ext.util.Observable
* <p>A plugin that creates a menu on the HtmlEditor for selecting a heading size. Takes up less room than the heading buttons if your going to have all six heading sizes available.</p>
*/
Ext.ux.form.HtmlEditor.HeadingMenu = Ext.extend(Ext.util.Observable, {
init: function(cmp){
this.cmp = cmp;
this.cmp.on('render', this.onRender, this);
},
// private
onRender: function(){
var cmp = this.cmp;
var btn = this.cmp.getToolbar().addItem({
xtype: 'combo',
displayField: 'display',
valueField: 'value',
name: 'headingsize',
forceSelection: true,
mode: 'local',
triggerAction: 'all',
width: 65,
emptyText: 'Heading',
store: {
xtype: 'arraystore',
autoDestroy: true,
fields: ['value','display'],
data: [['H1','1st Heading'],['H2','2nd Heading'],['H3','3rd Heading'],['H4','4th Heading'],['H5','5th Heading'],['H6','6th Heading']]
},
listeners: {
'select': function(combo,rec){
this.relayCmd('formatblock', '<'+rec.get('value')+'>');
combo.reset();
},
scope: cmp
}
});
}
});
13 changes: 7 additions & 6 deletions src/Ext.ux.form.HtmlEditor.Link.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,7 @@ Ext.ux.form.HtmlEditor.Link = Ext.extend(Ext.util.Observable, {
fieldLabel: this.langText,
name: 'text',
anchor: '100%',
value: sel.textContent,
disabled: sel.hasHTML
value: ''
}, {
xtype: 'textfield',
fieldLabel: this.langURL,
Expand Down Expand Up @@ -86,7 +85,7 @@ Ext.ux.form.HtmlEditor.Link = Ext.extend(Ext.util.Observable, {
}
var html = '<a href="' + url + '" target="' + target + '">' + text + '</a>' + afterSpace;
this.cmp.insertAtCursor(html);
this.linkWindow.close();
this.linkWindow.hide();
} else {
if (!frm.findField('url').isValid()) {
frm.findField('url').getEl().frame();
Expand All @@ -108,17 +107,19 @@ Ext.ux.form.HtmlEditor.Link = Ext.extend(Ext.util.Observable, {
show: {
fn: function(){
var frm = this.linkWindow.getComponent('insert-link').getForm();
frm.findField('url').focus(true, 50);
frm.findField('text').setValue(sel.textContent).setDisabled(sel.hasHTML);
frm.findField('url').reset().focus(true, 50);
},
scope: this,
defer: 200
defer: 350
}
}
});
this.linkWindow.show();
} else {
this.linkWindow.show();
this.linkWindow.getEl().frame();
}
this.linkWindow.show();
},
scope: this,
tooltip: this.langTitle
Expand Down
10 changes: 7 additions & 3 deletions src/Ext.ux.form.HtmlEditor.MidasCommand.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
* @class Ext.ux.form.HtmlEditor.MidasCommand
* @extends Ext.util.Observable
* <p>A base plugin for extending to create standard Midas command buttons.</p>
* http://msdn.microsoft.com/en-us/library/ms533049%28v=VS.85%29.aspx
* http://www.mozilla.org/editor/midas-spec.html
*/
Ext.ns('Ext.ux.form.HtmlEditor');

Expand Down Expand Up @@ -91,13 +93,15 @@ Ext.ux.form.HtmlEditor.MidasCommand = Ext.extend(Ext.util.Observable, {
},
// private
onRender: function(){
var midasCmdButton, tb = this.cmp.getToolbar(), btn;
var midasCmdButton, tb = this.cmp.getToolbar(), btn, iconCls;
Ext.each(this.midasBtns, function(b){
if (Ext.isObject(b)) {
iconCls = (b.iconCls) ? b.iconCls : 'x-edit-' + b.cmd;
if (b.value) { iconCls = iconCls+'-'+b.value.replace(/[<>\/]/g,''); }
midasCmdButton = {
iconCls: 'x-edit-' + b.cmd,
iconCls: iconCls,
handler: function(){
this.cmp.relayCmd(b.cmd);
this.cmp.relayCmd(b.cmd, b.value);
},
scope: this,
tooltip: b.tooltip ||
Expand Down
1 change: 1 addition & 0 deletions src/Ext.ux.form.HtmlEditor.Plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ Ext.ux.form.HtmlEditor.plugins = function(){
new Ext.ux.form.HtmlEditor.Table(),
new Ext.ux.form.HtmlEditor.HR(),
new Ext.ux.form.HtmlEditor.SpecialCharacters(),
new Ext.ux.form.HtmlEditor.HeadingMenu(),
new Ext.ux.form.HtmlEditor.IndentOutdent(),
new Ext.ux.form.HtmlEditor.SubSuperScript(),
new Ext.ux.form.HtmlEditor.RemoveFormat()
Expand Down
3 changes: 2 additions & 1 deletion src/Ext.ux.form.HtmlEditor.UndoRedo.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* @extends Ext.ux.form.HtmlEditor.MidasCommand
* <p>A plugin that creates undo and redo buttons on the HtmlEditor. Incomplete.</p>
*/

Ext.ux.form.HtmlEditor.UndoRedo = Ext.extend(Ext.ux.form.HtmlEditor.MidasCommand, {
// private
midasBtns: ['|', {
Expand All @@ -20,4 +21,4 @@ Ext.ux.form.HtmlEditor.UndoRedo = Ext.extend(Ext.ux.form.HtmlEditor.MidasCommand
},
overflowText: 'Redo'
}]
});
});
3 changes: 2 additions & 1 deletion src/Ext.ux.form.HtmlEditor.Word.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
Ext.ux.form.HtmlEditor.Word = Ext.extend(Ext.util.Observable, {
// Word language text
langTitle: 'Word Paste',
langToolTip: 'Cleanse text pasted from Word or other Rich Text applications',
wordPasteEnabled: true,
// private
curLength: 0,
Expand Down Expand Up @@ -107,7 +108,7 @@ Ext.ux.form.HtmlEditor.Word = Ext.extend(Ext.util.Observable, {
},
scope: this,
tooltip: {
text: 'Cleanse text pasted from Word or other Rich Text applications'
text: this.langToolTip
},
overflowText: this.langTitle
});
Expand Down

0 comments on commit 6986ec4

Please sign in to comment.