Skip to content

Commit

Permalink
Fixed to allow multiple instances
Browse files Browse the repository at this point in the history
  • Loading branch information
@andykirk
andykirk committed Aug 5, 2014
1 parent 9b3a945 commit b0cd8c2
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 62 deletions.
37 changes: 19 additions & 18 deletions footnotes/dialogs/footnotes.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/**
/**
* The footnotes dialog definition.
*
* Created out of the CKEditor Plugin SDK:
Expand All @@ -7,6 +7,7 @@

// Dialog definition.
CKEDITOR.dialog.add( 'footnotesDialog', function( editor ) {

return {
editor_name: false,
// Basic properties of the dialog window: title, minimum size.
Expand Down Expand Up @@ -38,40 +39,40 @@ CKEDITOR.dialog.add( 'footnotesDialog', function( editor ) {
id: 'footnote_id',
name: 'footnote_id',
label: 'No existing footnotes',


// Called by the main setupContent call on dialog initialization.
setup: function( element ) {
var dialog = this.getDialog();
$el = jQuery('#' + this.domId);

dialog.footnotes_el = $el;

editor = dialog.getParentEditor();
// Dynamically add existing footnotes:
$footnotes = jQuery('#' + editor.id + '_contents iframe').contents().find('#footnotes ol');
$this = this;
$this = this;

if ($footnotes.length > 0) {
if ($el.find('p').length == 0) {
$el.append('<p style="margin-bottom: 10px;"><strong>OR:</strong> Choose footnote:</p><ol></ol>');
} else {
$el.find('ol').empty();
}

var radios = '';
$footnotes.find('li').each(function(){
$item = jQuery(this);
var footnote_id = $item.attr('data-footnote-id');
radios += '<li style="margin-left: 15px;"><input type="radio" name="footnote_id" value="' + footnote_id + '" id="fn_' + footnote_id + '" /> <label for="fn_' + footnote_id + '" style="white-space: normal; display: inline-block; padding: 0 25px 0 5px; vertical-align: top; margin-bottom: 10px;">' + $item.find('cite').text() + '</label></li>';
});

$el.children('label,div').css('display', 'none');
$el.find('ol').html(radios);
$el.find(':radio').change(function(){;
$el.find(':text').val(jQuery(this).val());
});

} else {
$el.children('div').css('display', 'none');
}
Expand All @@ -80,7 +81,7 @@ CKEDITOR.dialog.add( 'footnotesDialog', function( editor ) {
]
},
],

// Invoked when the dialog is loaded.
onShow: function() {
this.setupContent();
Expand All @@ -90,7 +91,7 @@ CKEDITOR.dialog.add( 'footnotesDialog', function( editor ) {
dialog.editor_name = evt.editor.name;
} );


CKEDITOR.replaceAll( function( textarea, config ) {
if (!textarea.className.match(/footnote_text/)) {
return false;
Expand All @@ -107,7 +108,7 @@ CKEDITOR.dialog.add( 'footnotesDialog', function( editor ) {
config.resize_enabled = false;
config.autoGrow_minHeight = 80;
config.removePlugins = 'footnotes';

config.on = {
focus: function( evt ){
var $editor_el = jQuery('#' + evt.editor.id + '_contents');
Expand All @@ -117,18 +118,18 @@ CKEDITOR.dialog.add( 'footnotesDialog', function( editor ) {
};
return true;
});

},

// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function() {
var dialog = this;

var footnote_editor = CKEDITOR.instances[dialog.editor_name];
var footnote_id = dialog.getValueOf('tab-basic', 'footnote_id');

editor.fire('saveSnapshot');

if (footnote_id == '') {
// No existing id selected, check for new footnote:
var new_footnote = footnote_editor.getData();
Expand All @@ -137,15 +138,15 @@ CKEDITOR.dialog.add( 'footnotesDialog', function( editor ) {
return;
} else {
// Insert new footnote:
editor.plugins.footnotes.build(new_footnote, true);
editor.plugins.footnotes.build(new_footnote, true, editor);
}
} else {
// Insert existing footnote:
editor.plugins.footnotes.build(footnote_id, false);
editor.plugins.footnotes.build(footnote_id, false, editor);
}
// Destroy the editor so it's rebuilt properly next time:
footnote_editor.destroy();
return;
}
};
});
});
90 changes: 46 additions & 44 deletions footnotes/plugin.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/**
/**
* Basic sample plugin inserting footnotes elements into CKEditor editing area.
*
* Created out of the CKEditor Plugin SDK:
Expand All @@ -7,24 +7,21 @@

// Register the plugin within the editor.
CKEDITOR.plugins.add( 'footnotes', {

editor: false,
footnote_ids: [],

footnote_ids: [],
requires: 'widget',
icons: 'footnotes',


// The plugin initialization logic goes inside this method.
init: function(editor) {
this.editor = editor;

// Allow `cite` to be editable:
CKEDITOR.dtd.$editable['cite'] = 1;

// Add some CSS tweaks:
var css = '.footnotes{background:#eee; padding:1px 15px;} .footnotes cite{font-style: normal;}';
CKEDITOR.addCss(css);

// Add the reorder change event:
var $this = this;
editor.on('change', function(evt) {
Expand All @@ -35,12 +32,12 @@ CKEDITOR.plugins.add( 'footnotes', {
}
// SetTimeout seems to be necessary (it's used in the core but can't be 100% sure why)
setTimeout(function(){
$this.reorderMarkers();
$this.reorderMarkers(editor);
},
0
);
});

// Build the initial footnotes widget editables definition:
var def = {
header: {
Expand All @@ -55,21 +52,21 @@ CKEDITOR.plugins.add( 'footnotes', {
for (i; i <= l; i++) {
def['footnote_' + i] = {selector: '#footnote-' + i +' cite', allowedContent: 'a[href]; cite[*](*); b i span'};
}

// Register the footnotes widget.
editor.widgets.add('footnotes', {

// Minimum HTML which is required by this widget to work.
requiredContent: 'section(footnotes)',

// Check the elements that need to be converted to widgets.
upcast: function(element) {
return element.name == 'section' && element.hasClass('footnotes');
},

editables: def
});

// Register the footnotemarker widget.
editor.widgets.add('footnotemarker', {

Expand Down Expand Up @@ -105,10 +102,10 @@ CKEDITOR.plugins.add( 'footnotes', {
// Register our dialog file. this.path is the plugin folder path.
CKEDITOR.dialog.add('footnotesDialog', this.path + 'dialogs/footnotes.js');
},


build: function(footnote, is_new) {
this.editor.fire('lockSnapshot');

build: function(footnote, is_new, editor) {
editor.fire('lockSnapshot');
if (is_new) {
// Generate new id:
footnote_id = this.generateFootnoteId();
Expand All @@ -120,16 +117,16 @@ CKEDITOR.plugins.add( 'footnotes', {
// Insert the marker:
var footnote_marker = '<sup data-footnote-id="' + footnote_id + '">X</sup>';

this.editor.fire('unlockSnapshot');
this.editor.insertHtml(footnote_marker);
editor.fire('unlockSnapshot');
editor.insertHtml(footnote_marker);

if (is_new) {
this.addFootnote(this.buildFootnote(footnote_id, footnote));
this.addFootnote(this.buildFootnote(footnote_id, footnote), editor);
}

this.reorderMarkers();
this.reorderMarkers(editor);
},

buildFootnote: function(footnote_id, footnote_text, data) {
data ? data : false;
var links = '';
Expand All @@ -154,25 +151,25 @@ CKEDITOR.plugins.add( 'footnotes', {
footnote = '<li id="footnote-' + order + '" data-footnote-id="' + footnote_id + '">' + links + '<cite>' + footnote_text + '</cite></li>';
return footnote;
},
addFootnote: function(footnote) {
$contents = jQuery('#' + this.editor.id + '_contents iframe').contents().find('body');

addFootnote: function(footnote, editor) {
$contents = jQuery('#' + editor.id + '_contents iframe').contents().find('body');
$footnotes = $contents.find('#footnotes');

if ($footnotes.length == 0) {
var container = '<section id="footnotes" class="footnotes"><header><h2>Footnotes</h2></header><ol>' + footnote + '</ol></section>';
// Move cursor to end of content:
var range = this.editor.createRange();
var range = editor.createRange();
range.moveToElementEditEnd(range.root);
this.editor.getSelection().selectRanges([range]);
editor.getSelection().selectRanges([range]);
// Insert the container:
this.editor.insertHtml(container);
editor.insertHtml(container);
} else {
$footnotes.find('ol').append(footnote);
}
return;
},

generateFootnoteId: function() {
var id = Math.random().toString(36).substr(2, 5);
while (jQuery.inArray(id, this.footnote_ids) != -1) {
Expand All @@ -181,30 +178,35 @@ CKEDITOR.plugins.add( 'footnotes', {
this.footnote_ids.push(id);
return id;
},

reorderMarkers: function() {
this.editor.fire('lockSnapshot');
editor = this.editor;

reorderMarkers: function(editor) {
editor.fire('lockSnapshot');
$contents = jQuery('#' + editor.id + '_contents iframe').contents().find('body');
var data = {
order: [],
occurrences: {}
};

// Check that there's a footnotes section. If it's been deleted the markers are useless:
if ($contents.find('#footnotes').length == 0) {
$contents.find('sup[data-footnote-id]').remove();
return;
}

// Find all the markers in the document:
var $markers = $contents.find('sup[data-footnote-id]');
// If there aren't any, remove the Footnotes container:
if ($markers.length == 0) {
$contents.find('#footnotes').remove();
return;
}

// Otherwise reorder the markers:
$markers.each(function(){
var footnote_id = jQuery(this).attr('data-footnote-id')
, marker_ref
, n = data.order.indexOf(footnote_id);

// If this is the markers first occurrence:
if (n == -1) {
// Store the id:
Expand All @@ -223,7 +225,7 @@ CKEDITOR.plugins.add( 'footnotes', {
var marker = '<a href="#footnote-' + n + '" id="footnote-marker-' + marker_ref + '" rel="footnote">[' + n + ']</a>';
jQuery(this).html(marker);
});

// Then rebuild the Footnotes content to match marker order:
var footnotes = '';
var footnote_text = '';
Expand All @@ -233,16 +235,16 @@ CKEDITOR.plugins.add( 'footnotes', {
footnotes += this.buildFootnote(footnote_id, footnote_text, data);
}
$contents.find('#footnotes ol').html(footnotes);

// Next we need to reinstate the 'editable' properties of the footnotes.
// (we have to do this individually due to Widgets 'fireOnce' for editable selectors)
var el = $contents.find('#footnotes')
, footnote_widget;
// So first we need to find the right Widget instance:
// (I hope there's a better way of doing this but I can't find one)
for (i in this.editor.widgets.instances) {
if (this.editor.widgets.instances[i].name == 'footnotes') {
footnote_widget = this.editor.widgets.instances[i];
for (i in editor.widgets.instances) {
if (editor.widgets.instances[i].name == 'footnotes') {
footnote_widget = editor.widgets.instances[i];
break;
}
}
Expand All @@ -252,7 +254,7 @@ CKEDITOR.plugins.add( 'footnotes', {
footnote_widget.initEditable('footnote_' + n, {selector: '#footnote-' + n +' cite', allowedContent: 'a[href]; cite[*](*); b i span'});
}

this.editor.fire('unlockSnapshot');
editor.fire('unlockSnapshot');
return;
}
});

0 comments on commit b0cd8c2

Please sign in to comment.