Hello, we are using your plugin and we have noticed that when there are more than a couple of footnotes the windows become too tall and the notes and buttons in the end are no longer available.
Ckeditor 4.6.2
Regards
Lila

footnote is splitting while copy paste content (HTML, text or any) and pasted content becomes non-editable. and also loosing portion of the footnote content after save/submit.

expecting: copy paste should work and persisting source format as is.

https://demo.gridlight-design.co.uk/ckeditor-footnotes.html

Hi Andy and thank you for this great module !

I just have one major problem using it. I often use multiple instances of Ckeditor in one page (multiple text fields with Ckeditor attached to them) and I want to use footnotes with all of them.
Because the links created are always formed like #footnote-1 and without ID on the link I have multiple footnotes with the same ID one my page.
I attached an image to be clearer !

I don't know if you can imagine a solution and if it's not to complicated in particular for automatic reordering...

I'm a Drupal user and there's a module having almost the same fonctionnalities https://www.drupal.org/project/footnotes
I think there is no use of such a module if your plugin can play with multiple Ckeditor instances directly and it can interest a lot of people !

Thank you very very much !

If a table exists inside of an ins adding a footnote inside of a cell causes sibling tds and trs to be removed.

before footnote is added
<ins class="ice-ins ice-cts-1" data-cid="15" data-userid="" data-username="" data-changedata="" data-time="1544727161352" data-last-change-time="1544727439116"><table border="1" cellspacing="0" cellpadding="1" style="width:500px;" class="cke-table"><tbody><tr><td>test<br></td><td><br></td></tr><tr><td><br></td><td><br></td></tr><tr><td><br></td><td><br></td></tr></tbody></table></ins>

after footnote is added
<ins class="ice-ins ice-cts-1" data-cid="15" data-userid="mkolczynski" data-username="Michael Kolczynski" data-changedata="" data-time="1544727161352" data-last-change-time="1544727439116"><table border="1" cellspacing="0" cellpadding="1" style="width:500px;" class="cke-table"><tbody><tr><td>test</td></tr></tbody></table></ins>

a table is then added after with the footnote superscript
<table border="1" cellspacing="0" cellpadding="1" style="width:500px" class="cke-table"><tbody><tr><td><ins data-cid="15" data-userid="" data-username="" data-changedata="" data-time="1544727161352" data-last-change-time="1544727439116" class="ice-cts-1 ice-ins"><span tabindex="-1" contenteditable="false" data-cke-widget-wrapper="1" data-cke-filter="off" class="cke_widget_wrapper cke_widget_inline" data-cke-display-name="sup" data-cke-widget-id="20"><sup data-footnote-id="9lx4u" data-cke-widget-data="%7B%22classes%22%3Anull%7D" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="footnotemarker" class="cke_widget_element"><a href="#footnote-1" id="footnote-marker-1-1" rel="footnote">[1]</a></sup></span></ins></td></tr></tbody></table>

This does not occur when tables are not inside of an ins.

This makes the lite plugin and footnote plugin not play well together.

This

I'm trying to install this plugin on a Invision Community instance and I am getting 'invalid plugin' errors.

SHould not be to hard

Hi Andy.We are using your footnote plugin. Thank you for your efforts. We have the problem that we are using up to 10 instances of ckeditor on one page. When we are inserting a footnote, it will be inserted in the last instance and not in the one we triggered the plugin.
Any ideas?
Thanks Urs

This should be a good solution, but I haven't got it to work.

I notice also on your demo that there is no "a" in the link IDs?

Via comment left on CKEditor plugin page:

Great plugin! There are few issues when removing or copy/pasting the footnotes, but it's an awesome addition to the repo with a lot of promise! Good work. :)

Investigate this and fix.

It looks like there is no compatibility with footnotes pasted from Word. They are not recognized as footnotes by the plugin.

Thank you for writing this plugin. It is truly amazing. I am adapting it slightly to be a commenting system for draft documents. I'm planning to add author attribution and timestamps and eliminate the cool radio button panel. If my javascript skills were better (I'm just learning), I'd volunteer to co-maintain the project.

After installing footnotes on cmsimple xH 1.69 (->sourceforge - portable without mysql) the popup opens with "No existing footnotes"
The text-window is editable, but if i click on OK then nothing happens , and if i want to break off then the window hangs with a (german) dialog : Some options were changed - still want to close ?

Is it because of 4.61 or may there be a conflict with other modules

Via comment left on CKEditor plugin page:

Looks great. Certainly has the potential to neatly solve a long-standing issue in my project - except for one problem.

We often have multiple 'documents' created in CKE displayed on a single web page. If more than one of them has footnotes (each numbered 1 to xxx) then their will be a clash of ID numbers.

So rather than "footnote-1", "footnote-2" etc, can you make them random IDs? I see you already have a random data-footnote-id so is there a reason that can't also be used as the id and link ref?

My reply:

Thanks for the feedback.

I hadn't factored in someone having multiple articles on page.

I don't want to use a random string for URL fragment identifiers because I still want there to be meaning in the URL:

footnote_1, #footnote_2 has meaning, #footnote_r@nd0m, #footnote_$tr1ng doesn't.

The footnotes block would still visually list the footnotes with numbers, so I want the URL to relate to that in some way.

I'll probably go for a prefixed approach to scope the id's with a specific article tjhat will be set in the config of the editor. So you'd have something like:

// Editor 1:
var prefix = 'a'
// E.g. #footnote_a1, #footnote_a2

// Editor 2:
var prefix = 'b
// E.g. #footnote_b1, #footnote_b2

Would that solve your problem?"

Investigate and fix.

I am using footnote plugin with ckeditor4 in angular8 and getting below issue. Also We are planning to upgrade project from angular 8 to angular 16. Is there footnote support added in ckeditor5?

Steps to reproduce:
typed something then clicked on 'Insert footnote' > added one footnote end clicked OK > footnote will get added > without clicking anywhere in the editor again click on 'Insert Footnote' > getting below JS error.
because of this error whole angular application crashing.

polyfills-es2015.7201ea1ccee9f145e5bb.js:1 Uncaught TypeError: Cannot read properties of null (reading 'getHtml')
at Object.reorderMarkers (plugin.js?t=K87C:306:109)
at Object.build (plugin.js?t=K87C:159:18)
at CKEDITOR.dialog.onOk (footnotes.js?t=K87C:192:50)
at CKEDITOR.dialog. (ckeditor.js:618:97)
at CKEDITOR.dialog.l (ckeditor.js:10:224)
at CKEDITOR.dialog.fire (ckeditor.js:12:47)
at button.onClick (ckeditor.js:642:227)
at button. (ckeditor.js:578:264)
at button.l (ckeditor.js:10:224)
at button.fire (ckeditor.js:12:47)

When using with a Drupal theme with a fixed-position header at the top, the target footnote is covered by the header when clicking the footnote marker link on the body text, and vice versa.

I'm able to use the trick at https://css-tricks.com/hash-tag-links-padding/ on the footnote marker on the body text, but I can't make it with the target footnote.

Does anyone have similar problems? How do you solve it?

If you have "too much" and "too long" footnotes and working a on a smaller screen the "Manage footnotes" dialog screen can be too high which meas that the bottom of the dialog cant be seen, cant be accessed so one can't close the dialog, can't add new footnote, can't resize the window: can't use the tool at all. :(

Hello everyone. Thanks for the issues and pull requests.

I'm finding it very difficult to find any time for this project and give it the attention it deserves.
If anyone would like to volunteer to take this over or be added as a collaborator please get in touch.

Andy

First, thanks for this plugin !

There is a bug when calling this (see below without footnotesHeaderEls option) :

CKEDITOR.replace( 'editor1', {
    footnotesTitle: 'References' // Defaults to 'Footnotes'
} );

Normally, a user can be able to see teh cursor blinking wherever we clicked inside teh editor

CK Editor is pushing teh cursor to teh end of teh editor or making invisible, once the iuser hover on cke_widget_drag_handler_container and the drag handler image(handle.png) is made visible via the "display: block" property"

This disolay block property pushing the cursor to the end of teh editor.

Steps to reproduce.
Enter some random text e.g Test1 , Test2, Test3, Test4
Create a footnotes at end of some bulleted items.
create some bullet points at end of any paragraphs.
Save the content.

Mouse overon Footnotes Marker now.
when the drag hander icon is visible above, it starts pushing the blinking cursor to teh end of teh line
Expected result:
The cursor should stay at the same position just next to teh foot note marker
Actual Results:
But teh cursor is pushed towards the end of edtor or teh next line.

Browser: …Chrome 79 and 78
OS: …Windows 10
CKEditor version: …7.1
Installed CKEditor plugins: …addiitonal footnotes plugins downloadedalong with package.

If plugin installed I have error in console on try edit source:
plugin.js?t=I639:44 Uncaught TypeError: Cannot read property 'getStartElement' of null at a.<anonymous> (plugin.js?t=I639:44) at a.h (ckeditor.js:10) at a.<anonymous> (ckeditor.js:11) at a.window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13) at plugin.js?t=I639:942 at codemirror.min.js:1 at dp (codemirror.min.js:1) at ck (codemirror.min.js:1) at aw (codemirror.min.js:1) at dh (codemirror.min.js:1)

PS used CodeMirror as source editor

Hi Andy,

I hope you can enlighten me with a problem I have now with my multiple instances of ckeditor in my page.

If I have two instances (I can have more) of ckeditor attached to textearea fields (in my edit page) I can work without problems on my first instance and create x footnotes. I can save my page, edit it again, work with my second instance, save again, no worries.
But if I want to work directly on both instances (not saving first then coming back) I can write my footnotes in instance 1, write one footnote in instance 2 but then if I want to create another footnote (in instance 1 or 2) I have this errors :

TypeError: f.getSelection(...) is null
...&g.attachListener(g,"focus",function(a){a.removeListener();if(p!==0)if((a=f.getS...

uncaught exception: The editor instance "cke_171_textarea" is already attached to the provided element.

I attached a screenshot.

Can you help me or point me in a good direction please ?
Thanks a lot !

Example: CTRL+A

Actually, what I have here is a question.

I'm sorry, maybe this is not even the right place.

I've seen all the code in this plugin. My question is about update a marker.

When the user clicks the footnote href number and opens the dialog, the text that the user places there will change exactly a specific endnote.
I have seen that a new ID is generated and the addFootnote function adds a new html li.

My initial scenario:
I added 3 footnote.

<section class="footnotes">
 ...
    <ol>
        <li data-footnote-id="yo7kq" id="footnote-1"><sup><a href="#footnote-marker-1-1">^</a> </sup><cite>1</cite></li>
        <li data-footnote-id="7p8e2" id="footnote-2"><sup><a href="#footnote-marker-2-1">^</a> </sup><cite>2</cite></li>
        <li data-footnote-id="tjbp6" id="footnote-3"><sup><a href="#footnote-marker-3-1">^</a> </sup><cite>3</cite></li>
    </ol>
</section>

Then I clicked on the second marker, opened the dialog and changed the text.

In the reorderMarkers function a new ID is added this.footnote_ids =
["yo7kq", "7p8e2", "tjbp6", "sqs80"]
what I understand is that the li tag is updated, it overwritten. Is that correct?

<section class="footnotes">
...
<ol>
    <li data-footnote-id="yo7kq" id="footnote-1"><sup><a href="#footnote-marker-1-1">^</a> </sup><cite>1</cite></li>
    <li data-footnote-id="sqs80" id="footnote-2"><sup><a href="#footnote-marker-2-1">^</a> </sup><cite>NEW_2</cite></li>
    <li data-footnote-id="tjbp6" id="footnote-3"><sup><a href="#footnote-marker-3-1">^</a> </sup><cite>3</cite></li>
</ol>
</section>

My doubts:

1. When changing the footnote-2 information how is this replacement made in html? Does the append of a new li exclude the former?

2. Is there any way I can get the text for a footnote, when the user clicks the button on the toolbar the text has already been appeared on textearea of dialog

Hi Andy!
Do you plan to work on the CKE5 version of this plugin?

Hi Andy,

I already write some issues here some time ago and you were great with your answers and your work. Thank you for that.

We use your plugin for a small public institute and it help us a lot !
Today we run into a new issue because we change our publishing form and we will be glad to know if there's a solution...

As my issue title let it presume we have multiple Ckeditor instances but we need to stack some footnotes together... So in my first instance I can have one footnote and in a second the next footnote will be numbered "2".

Is there a way to achieve that ?

Many thanks for your reading,
Cheers

CKEditor4 will be losing security coverage next year. Is there any plan to refactor things to work with CKEditor5 in the coming year?

The changes between 4 and 5 are pretty dramatic. It'd likely mean completely rewriting this project. If the plan is that CKEditor5 will not be supported, that's fine, but let's document it :).

Let's discuss, thanks!

In our ckeditor instance we use the track changes plugin (http://ckeditor.com/addon/lite) and are testing out the footnotes plugin.

It works fine if the track changes plugin is disabled. However when it is enabled, the following error is thrown inside the footnotes plugin:

Uncaught TypeError: Cannot read property 'initEditable' of undefined
CKEDITOR.plugins.add.reorderMarkers @ plugin.js?t=F0RD:292
CKEDITOR.plugins.add.build @ plugin.js?t=F0RD:147
onOk @ footnotes.js?t=F0RD:149
(anonymous function) @ ckeditor.js:526
j @ ckeditor.js:10
CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:12
CKEDITOR.tools.extend.okButton.CKEDITOR.tools.extend.onClick @ ckeditor.js:548
(anonymous function) @ ckeditor.js:491
j @ ckeditor.js:10
CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:12
CKEDITOR.ui.dialog.button.CKEDITOR.tools.extend.click @ ckeditor.js:490
(anonymous function) @ ckeditor.js:482
j @ ckeditor.js:10CKEDITOR.event.CKEDITOR.event.fire @ ckeditor.js:12
CKEDITOR.dom.domObject.a @ ckeditor.js:45

Is that a known problem? Should I investigate on the footnote or track changes side of things?

Any pointers for a possible fix would be greatly appreciated.

We use the following versions:

ckeditor: 4.4.7
track changes plugin: 1.2.13
footnotes plugin: 1.0.8

Thanks,
Torsten.

It works well when I set these plugins, lineutils, widgetselection, widget and footnotes in config.js.

Hi! Well, the bug is quite simple to reproduce. Just create a new footnote and hit enter -> new paragraph. I haven't inspected your code so I have no clue what is causing it, probably new paragraph element.

Thanks anyway for awesome plugin. Great work! :)

Problem: When adding the first footnote inside a <blockquote><p>bla bla</p></blockquote>, the <section class="footnotes"> element is placed inside the <blockquote> element instead of placing it at the end of the HTML.
Fix: Just change in plugin.js the function addFootnote:

Change
range.moveToElementEditEnd(range.root);
for:
range.moveToPosition( range.root, CKEDITOR.POSITION_BEFORE_END );

Normally, a user can align the bullet lists/numbered lists and it should align left right or center properly along with the bulleted points or the numbers..

CK Editor is not supporting the align the bullet lists/numbered lists properly to left/right / center or justify. We have tried with CK editor version 4 and 5.

Steps to reproduce.

Enter some random text e.g Test1 , Test2, Test3, Test4
Create a footnotes
Save tghe content.
Refresh the page.
Click on Footnotes Marker now.
The navigation between Marker to cite and vice versa is not happening
Expected result:
The on click of End notes or Cite needs to naviagte back and forth
Actual Results:
But No action is happening. No console errors as well.
But this issue is not happening with Firefox or IE Edge

Browser: …Chrome 78 and 79
OS: …Windows 10
CKEditor version: …7.1
Installed CKEditor plugins: …additionalplugins downloaded apart from the package.

while fullpage option is true ...unable to add footer ..it showing some errors in console..

Uncaught TypeError: Cannot read property 'attributes' of null

in widget/plugin.js
// If widget did not have data-cke-widget attribute before upcasting remove it.
if ( widgetElement.attributes[ 'data-cke-widget-keep-attr' ] != '1' )

After deleting the last footnote, CKEditor stops working properly on different features,
especially features which read the whole content like saving or source edit

Normally, a user can delete the bullet lists/numbered lists by using the backspace and delete keys.

CK Editor is not identifying the bullet point, when there is a footnote present above the in previous bulleted / Numbered item.

Steps to reproduce.

Enter some random text e.g Test1 , Test2, Test3, Test4, Test5
Select the bullet list / Numbered list.
Now create footnotes at the end of 2nd bulleted item and the 4th bulleted item
Now keep teh cursor at the end of the 5th bulleted item and start deleting by using backspace keys.
While deleting we can see, the ck editor missing to identify the bullet point in the bulleted item below the ones in the footnotes.

Observe only text getting deleted and escaping the bullet / numbered item.
Expected result:
The bullet list / Numbered list should also be deleted, when teh suer deleting it.
Actual Results:
But only the text is deleting and the bullet points are getting retained.

Browser: …Chrome 78 / 79
OS: …Windows 10
CKEditor version: …7.1
Installed CKEditor plugins: …addiitonal footnotes plugins downloadedalong with package.

Hi, i'm using your plugin and few days ago i realized that undo functionality for the newly added and modified footnote not working.
Steps to reproduce:

1. Open demo of CKEditor with footnote plugin using link in your readme.
2. Add new footnote to the text
3. Modify footnote content
4. Press undo and exception appear.

Uncaught TypeError: Cannot read property 'filter' of undefined at n (ckeditor.js:800) at a.<anonymous> (ckeditor.js:808) at a.m (ckeditor.js:10) at a.<anonymous> (ckeditor.js:12) at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13) at a (ckeditor.js:368) at a.CKEDITOR.editor.selectionChange (ckeditor.js:385) at $.<anonymous> (ckeditor.js:382) at $.m (ckeditor.js:10) at $.fire (ckeditor.js:12)