Skip to content

Issue #22: Add support for CKEditor 5. #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: 1.x-1.x
Choose a base branch
from
Open

Issue #22: Add support for CKEditor 5. #24

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
97cb760
Issue #22: Add support for CKEditor 5.
quicksketch Dec 6, 2024
0295b57
Issue #22: Use core API for tracking active instance.
quicksketch Apr 8, 2025
4a9fdca
Issue #22: Preventing duplicate paragraph tags when inserting 'file w…
quicksketch Apr 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 16 additions & 36 deletions insert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,44 +129,24 @@ Backdrop.insert = {
Backdrop.insert.activateTabPane(editorElement);
tinyMCE.activeEditor.execCommand('mceInsertContent', false, content);
}
// WYSIWYG support, should work in all editors if available.
else if (Backdrop.wysiwyg && Backdrop.wysiwyg.activeId) {
editorElement = document.getElementById(Backdrop.wysiwyg.activeId);
Backdrop.insert.activateTabPane(editorElement);
Backdrop.wysiwyg.instances[Backdrop.wysiwyg.activeId].insert(content)
}
// FCKeditor module support.
else if (typeof(FCKeditorAPI) != 'undefined' && typeof(fckActiveId) != 'undefined') {
editorElement = document.getElementById(fckActiveId);
Backdrop.insert.activateTabPane(editorElement);
FCKeditorAPI.Instances[fckActiveId].InsertHtml(content);
}
// Direct FCKeditor support (only body field supported).
else if (typeof(FCKeditorAPI) != 'undefined') {
// Try inserting into the body.
if (FCKeditorAPI.Instances[insertTextarea.id]) {
editorElement = insertTextarea;
Backdrop.insert.activateTabPane(editorElement);
FCKeditorAPI.Instances[insertTextarea.id].InsertHtml(content);
// CKEditor 5 module support.
// See https://ckeditor.com/docs/ckeditor5/latest/framework/how-tos.html#how-to-insert-some-content-into-the-editor
else if (Backdrop.ckeditor5 && Backdrop.ckeditor5.activeEditor) {
var ckeditorInstance = Backdrop.ckeditor5.activeEditor;
Backdrop.insert.activateTabPane(ckeditorInstance.sourceElement);
var ckeditorSelection = ckeditorInstance.model.document.selection;
// CKEditor will wrap every inserted child element in a paragraph if it is
// inserted into the editor root. Wrap the inserted content in a paragraph
// when this happens. CKEditor prevents nested paragraph tags if needed.
var selectedElement = ckeditorSelection.getFirstPosition().parent;
if (selectedElement.is('element', 'paragraph')) {
content = '<p>' + content + '</p>';
}
// Try inserting into the first instance we find (may occur with very
// old versions of FCKeditor).
else {
for (var n in FCKeditorAPI.Instances) {
editorElement = document.getElementById(n);
Backdrop.insert.activateTabPane(editorElement);
FCKeditorAPI.Instances[n].InsertHtml(content);
break;
}
}
}
// CKeditor module support.
else if (typeof(CKEDITOR) != 'undefined' && typeof(Backdrop.ckeditorActiveId) != 'undefined') {
editorElement = document.getElementById(Backdrop.ckeditorActiveId);
Backdrop.insert.activateTabPane(editorElement);
CKEDITOR.instances[Backdrop.ckeditorActiveId].insertHtml(content);
var viewFragment = ckeditorInstance.data.processor.toView(content);
var modelFragment = ckeditorInstance.data.toModel(viewFragment);
ckeditorInstance.model.insertContent(modelFragment, ckeditorSelection);
}
// Direct CKeditor support (only body field supported).
// Direct CKEditor 4 support (only body field supported).
else if (typeof(CKEDITOR) != 'undefined' && CKEDITOR.instances[insertTextarea.id]) {
editorElement = insertTextarea;
Backdrop.insert.activateTabPane(editorElement);
Expand Down