mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-07-01 23:04:18 +00:00
HTML composition, take 2
Monotone-Parent: dbd490c81ea6cac4c12b2e17661e2fef43219e68 Monotone-Revision: 0801dc9f1e4fdc49ea44fc0450fb025c2639ed26 Monotone-Author: crobert@inverse.ca Monotone-Date: 2009-06-25T19:18:02 Monotone-Branch: ca.inverse.sogo
This commit is contained in:
C Robert
@@ -0,0 +1,275 @@
|
||||
/*
|
||||
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or http://ckeditor.com/license
|
||||
*/
|
||||
|
||||
(function()
|
||||
{
|
||||
CKEDITOR.plugins.add( 'stylescombo',
|
||||
{
|
||||
requires : [ 'richcombo', 'styles' ],
|
||||
|
||||
init : function( editor )
|
||||
{
|
||||
var config = editor.config,
|
||||
lang = editor.lang.stylesCombo,
|
||||
pluginPath = this.path,
|
||||
styles;
|
||||
|
||||
editor.ui.addRichCombo( 'Styles',
|
||||
{
|
||||
label : lang.label,
|
||||
title : lang.panelTitle,
|
||||
voiceLabel : lang.voiceLabel,
|
||||
className : 'cke_styles',
|
||||
multiSelect : true,
|
||||
|
||||
panel :
|
||||
{
|
||||
css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],
|
||||
voiceLabel : lang.panelVoiceLabel
|
||||
},
|
||||
|
||||
init : function()
|
||||
{
|
||||
var combo = this,
|
||||
stylesSet = config.stylesCombo_stylesSet.split( ':', 2 ),
|
||||
stylesSetPath = stylesSet[ 1 ] || CKEDITOR.getUrl( pluginPath + 'styles/' + stylesSet[ 0 ] + '.js' ) ;
|
||||
|
||||
stylesSet = stylesSet[ 0 ];
|
||||
|
||||
CKEDITOR.loadStylesSet( stylesSet, stylesSetPath, function( stylesDefinitions )
|
||||
{
|
||||
var style,
|
||||
styleName,
|
||||
stylesList = [];
|
||||
|
||||
styles = {};
|
||||
|
||||
// Put all styles into an Array.
|
||||
for ( var i = 0 ; i < stylesDefinitions.length ; i++ )
|
||||
{
|
||||
var styleDefinition = stylesDefinitions[ i ];
|
||||
|
||||
styleName = styleDefinition.name;
|
||||
|
||||
style = styles[ styleName ] = new CKEDITOR.style( styleDefinition );
|
||||
style._name = styleName;
|
||||
|
||||
stylesList.push( style );
|
||||
}
|
||||
|
||||
// Sorts the Array, so the styles get grouped
|
||||
// by type.
|
||||
stylesList.sort( sortStyles );
|
||||
|
||||
// Loop over the Array, adding all items to the
|
||||
// combo.
|
||||
var lastType;
|
||||
for ( i = 0 ; i < stylesList.length ; i++ )
|
||||
{
|
||||
style = stylesList[ i ];
|
||||
styleName = style._name;
|
||||
|
||||
var type = style.type;
|
||||
|
||||
if ( type != lastType )
|
||||
{
|
||||
combo.startGroup( lang[ 'panelTitle' + String( type ) ] );
|
||||
lastType = type;
|
||||
}
|
||||
|
||||
combo.add(
|
||||
styleName,
|
||||
style.type == CKEDITOR.STYLE_OBJECT ? styleName : buildPreview( style._.definition ),
|
||||
styleName );
|
||||
}
|
||||
|
||||
combo.commit();
|
||||
|
||||
combo.onOpen();
|
||||
});
|
||||
},
|
||||
|
||||
onClick : function( value )
|
||||
{
|
||||
editor.focus();
|
||||
editor.fire( 'saveSnapshot' );
|
||||
|
||||
var style = styles[ value ],
|
||||
selection = editor.getSelection();
|
||||
|
||||
if ( style.type == CKEDITOR.STYLE_OBJECT )
|
||||
{
|
||||
var element = selection.getSelectedElement();
|
||||
if ( element )
|
||||
style.applyToObject( element );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var elementPath = new CKEDITOR.dom.elementPath( selection.getStartElement() );
|
||||
|
||||
if ( style.type == CKEDITOR.STYLE_INLINE && style.checkActive( elementPath ) )
|
||||
style.remove( editor.document );
|
||||
else
|
||||
style.apply( editor.document );
|
||||
|
||||
editor.fire( 'saveSnapshot' );
|
||||
},
|
||||
|
||||
onRender : function()
|
||||
{
|
||||
editor.on( 'selectionChange', function( ev )
|
||||
{
|
||||
var currentValue = this.getValue();
|
||||
|
||||
var elementPath = ev.data.path,
|
||||
elements = elementPath.elements;
|
||||
|
||||
// For each element into the elements path.
|
||||
for ( var i = 0, element ; i < elements.length ; i++ )
|
||||
{
|
||||
element = elements[i];
|
||||
|
||||
// Check if the element is removable by any of
|
||||
// the styles.
|
||||
for ( var value in styles )
|
||||
{
|
||||
if ( styles[ value ].checkElementRemovable( element, true ) )
|
||||
{
|
||||
if ( value != currentValue )
|
||||
this.setValue( value );
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If no styles match, just empty it.
|
||||
this.setValue( '' );
|
||||
},
|
||||
this);
|
||||
},
|
||||
|
||||
onOpen : function()
|
||||
{
|
||||
if ( CKEDITOR.env.ie )
|
||||
editor.focus();
|
||||
|
||||
var selection = editor.getSelection();
|
||||
|
||||
var element = selection.getSelectedElement(),
|
||||
elementName = element && element.getName(),
|
||||
elementPath = new CKEDITOR.dom.elementPath( element || selection.getStartElement() );
|
||||
|
||||
var counter = [ 0, 0, 0, 0 ];
|
||||
this.showAll();
|
||||
this.unmarkAll();
|
||||
for ( var name in styles )
|
||||
{
|
||||
var style = styles[ name ],
|
||||
type = style.type;
|
||||
|
||||
if ( type == CKEDITOR.STYLE_OBJECT )
|
||||
{
|
||||
if ( element && style.element == elementName )
|
||||
{
|
||||
if ( style.checkElementRemovable( element, true ) )
|
||||
this.mark( name );
|
||||
|
||||
counter[ type ]++;
|
||||
}
|
||||
else
|
||||
this.hideItem( name );
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( style.checkActive( elementPath ) )
|
||||
this.mark( name );
|
||||
|
||||
counter[ type ]++;
|
||||
}
|
||||
}
|
||||
|
||||
if ( !counter[ CKEDITOR.STYLE_BLOCK ] )
|
||||
this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_BLOCK ) ] );
|
||||
|
||||
if ( !counter[ CKEDITOR.STYLE_INLINE ] )
|
||||
this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_INLINE ) ] );
|
||||
|
||||
if ( !counter[ CKEDITOR.STYLE_OBJECT ] )
|
||||
this.hideGroup( lang[ 'panelTitle' + String( CKEDITOR.STYLE_OBJECT ) ] );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var stylesSets = {};
|
||||
|
||||
CKEDITOR.addStylesSet = function( name, styles )
|
||||
{
|
||||
stylesSets[ name ] = styles;
|
||||
};
|
||||
|
||||
CKEDITOR.loadStylesSet = function( name, url, callback )
|
||||
{
|
||||
var stylesSet = stylesSets[ name ];
|
||||
|
||||
if ( stylesSet )
|
||||
{
|
||||
callback( stylesSet );
|
||||
return ;
|
||||
}
|
||||
|
||||
CKEDITOR.scriptLoader.load( url, function()
|
||||
{
|
||||
callback( stylesSets[ name ] );
|
||||
});
|
||||
};
|
||||
|
||||
function buildPreview( styleDefinition )
|
||||
{
|
||||
var html = [];
|
||||
|
||||
var elementName = styleDefinition.element;
|
||||
|
||||
// Avoid <bdo> in the preview.
|
||||
if ( elementName == 'bdo' )
|
||||
elementName = 'span';
|
||||
|
||||
html = [ '<', elementName ];
|
||||
|
||||
// Assign all defined attributes.
|
||||
var attribs = styleDefinition.attributes;
|
||||
if ( attribs )
|
||||
{
|
||||
for ( var att in attribs )
|
||||
{
|
||||
html.push( ' ', att, '="', attribs[ att ], '"' );
|
||||
}
|
||||
}
|
||||
|
||||
// Assign the style attribute.
|
||||
var cssStyle = CKEDITOR.style.getStyleText( styleDefinition );
|
||||
if ( cssStyle )
|
||||
html.push( ' style="', cssStyle, '"' );
|
||||
|
||||
html.push( '>', styleDefinition.name, '</', elementName, '>' );
|
||||
|
||||
return html.join( '' );
|
||||
}
|
||||
|
||||
function sortStyles( styleA, styleB )
|
||||
{
|
||||
var typeA = styleA.type,
|
||||
typeB = styleB.type;
|
||||
|
||||
return typeA == typeB ? 0 :
|
||||
typeA == CKEDITOR.STYLE_OBJECT ? -1 :
|
||||
typeB == CKEDITOR.STYLE_OBJECT ? 1 :
|
||||
typeB == CKEDITOR.STYLE_BLOCK ? 1 :
|
||||
-1;
|
||||
}
|
||||
})();
|
||||
|
||||
CKEDITOR.config.stylesCombo_stylesSet = 'default';
|
||||
@@ -0,0 +1,85 @@
|
||||
/*
|
||||
Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
|
||||
For licensing, see LICENSE.html or http://ckeditor.com/license
|
||||
*/
|
||||
|
||||
CKEDITOR.addStylesSet( 'default',
|
||||
[
|
||||
/* Block Styles */
|
||||
|
||||
// These styles are already available in the "Format" combo, so they are
|
||||
// not needed here by default. You may enable them to avoid placing the
|
||||
// "Format" combo in the toolbar, maintaining the same features.
|
||||
/*
|
||||
{ name : 'Paragraph' , element : 'p' },
|
||||
{ name : 'Heading 1' , element : 'h1' },
|
||||
{ name : 'Heading 2' , element : 'h2' },
|
||||
{ name : 'Heading 3' , element : 'h3' },
|
||||
{ name : 'Heading 4' , element : 'h4' },
|
||||
{ name : 'Heading 5' , element : 'h5' },
|
||||
{ name : 'Heading 6' , element : 'h6' },
|
||||
{ name : 'Preformatted Text', element : 'pre' },
|
||||
{ name : 'Address' , element : 'address' },
|
||||
*/
|
||||
|
||||
{ name : 'Blue Title' , element : 'h3', styles : { 'color' : 'Blue' } },
|
||||
{ name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
|
||||
|
||||
/* Inline Styles */
|
||||
|
||||
// These are core styles available as toolbar buttons. You may opt enabling
|
||||
// some of them in the Styles combo, removing them from the toolbar.
|
||||
/*
|
||||
{ name : 'Strong' , element : 'strong', overrides : 'b' },
|
||||
{ name : 'Emphasis' , element : 'em' , overrides : 'i' },
|
||||
{ name : 'Underline' , element : 'u' },
|
||||
{ name : 'Strikethrough' , element : 'strike' },
|
||||
{ name : 'Subscript' , element : 'sub' },
|
||||
{ name : 'Superscript' , element : 'sup' },
|
||||
*/
|
||||
|
||||
{ name : 'Marker: Yellow' , element : 'span', styles : { 'background-color' : 'Yellow' } },
|
||||
{ name : 'Marker: Green' , element : 'span', styles : { 'background-color' : 'Lime' } },
|
||||
|
||||
{ name : 'Big' , element : 'big' },
|
||||
{ name : 'Small' , element : 'small' },
|
||||
{ name : 'Typewriter' , element : 'tt' },
|
||||
|
||||
{ name : 'Computer Code' , element : 'code' },
|
||||
{ name : 'Keyboard Phrase' , element : 'kbd' },
|
||||
{ name : 'Sample Text' , element : 'samp' },
|
||||
{ name : 'Variable' , element : 'var' },
|
||||
|
||||
{ name : 'Deleted Text' , element : 'del' },
|
||||
{ name : 'Inserted Text' , element : 'ins' },
|
||||
|
||||
{ name : 'Cited Work' , element : 'cite' },
|
||||
{ name : 'Inline Quotation' , element : 'q' },
|
||||
|
||||
{ name : 'Language: RTL' , element : 'span', attributes : { 'dir' : 'rtl' } },
|
||||
{ name : 'Language: LTR' , element : 'span', attributes : { 'dir' : 'ltr' } },
|
||||
|
||||
/* Object Styles */
|
||||
|
||||
{
|
||||
name : 'Image on Left',
|
||||
element : 'img',
|
||||
attributes :
|
||||
{
|
||||
'style' : 'padding: 5px; margin-right: 5px',
|
||||
'border' : '2',
|
||||
'align' : 'left'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name : 'Image on Right',
|
||||
element : 'img',
|
||||
attributes :
|
||||
{
|
||||
'style' : 'padding: 5px; margin-left: 5px',
|
||||
'border' : '2',
|
||||
'align' : 'right'
|
||||
}
|
||||
}
|
||||
]);
|
||||
Reference in New Issue
Block a user