Skip to content

Instantly share code, notes, and snippets.

@nka11
Forked from balupton/README.md
Created March 1, 2011 15:14
Show Gist options
  • Save nka11/849265 to your computer and use it in GitHub Desktop.
Save nka11/849265 to your computer and use it in GitHub Desktop.
// http://svn.ckeditor.com/CKEditor/trunk/_source/plugins/basicstyles/plugin.js
Aloha.ui.store = function(ID,properties){
Aloha.ui.objects[ID] = {
config: config,
element: $button
};
}
Aloha.ui.createButton = function( ID, config ){
var $button = $( "<button>"
+ Aloha.API.translate( config.text || ID )
+ "</button>" ).button();
Aloha.ui.store(ID, {
config: config,
element: $button
});
return $button;
};
// jQuery UI Implementation - included in jQuery UI Adapter
Aloha.ui.addWrapButton = function( ID, config ){
var $button = Aloha.ui.createButton(ID, config);
var $selection = Aloha.API.getSelection();
// Apply Style
if ( config.style ) {
$selection.css( options.style );
}
// Wrap
if ( config.element ) {
$selection.wrap( options.element );
}
});
Aloha.ui.addInsertButton = function ( id, config ) {
var $button = Aloha.ui.createButton ( ID, config );
var
onClick /*alias*/
= Aloha.ui.events[id].click // makes overrides possible
= function(){
var $selection = Aloha.getSelection();
$(config.element).after($selection);
}
;
$button.click(onClick);
};
Aloha.ui.addCustomButton( "Increase Image Size", {
context: "img",
click: function(event){
var $img = Aloha.API.getSelection().find( "img" );
$img = $img.height( $img.height() * 1.5 );
}
});
Aloha.ui.addInsertButton( "Image", {
element: "img"
});
Aloha.cron.addTask(function() {
// ...
});
Aloha.cron.addTransform( "b", "strong" );
Aloha.ui.addStyleButton( "Bold", {
element: "strong",
});
Aloha.ui.addStyleButton( "Red", {
// enabled when, and applies
element: "p",
style: {
color: "red",
fontSize: "30px"
}
});
$( element ).aloha({
toolbar: Aloha.toolbars.full
});
// Defined in Implementors Configuration
$( element ).aloha({
toolbar: {
Format: [
["Bold", "Italic", "Underline", "Formatting"],
"headers", // regard as widget
{
type: "multiSplitArea",
items: // ...
},
// Putting plugin code in configuration - not good
new Aloha.ui.multiSplitArea({
items: [
new Aloha.ui.imageButton( "h1", {
image: "h1.gif"
});
]
});
],
"Image Styles": [ "Bold", "Save" ]
},
headers: [ "h1", "h2", "h3", "normal", "blockquote" ]
});
// ^ triggers aloha.configured
Aloha.listen("aloha.configured", function(editor){
// ^ required for access to editor.config
/// Defined in Image Plugin
Aloha.ui.addImageButton( "h1", {
image: "h1.gif"
});
Aloha.ui.addMultiSplitArea( "headers", { // 52
items: editor.config.headers // [ "headers.h1" ] // 76
});
});
// Events
aloha.configured
aloha.toolbar.ready
$( element ).aloha({
toolbar: [
{
label: "Format",
controls: [ "Bold", "Italic", "Underline" ]
}
]
});
$( element ).aloha({
toolbar: {
Format: [
[ "Bold", "Italic", "Underline", "Formatting" ],
[ "H1", "H2", "H3" ]
]
}
});
Related to Wiki Article:
http://aloha-editor.org/wiki/Migration_to_jQuery_UI
And Aloha Editor DevCon Talk:
http://www.livestream.com/alohaeditor/video?clipId=pla_7219285e-1723-430b-84ae-5190e3d3004f&utm_source=lslibrary&utm_medium=ui-thumb
Copyright Aloha Editor Team.
Romain and Benjamin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment