|
| 1 | +// plugin.js |
| 2 | +CKEDITOR.plugins.add("popout", { |
| 3 | + icons: "popout", |
| 4 | + init: function (editor) { |
| 5 | + editor.addCommand("popout", { |
| 6 | + exec: function (editor) { |
| 7 | + var newWindow = window.open("", "_blank", "width=800,height=600"); |
| 8 | + // make sure new editor gets config |
| 9 | + var originalConfig = editor.config; |
| 10 | + var ckeditorBasePath = "/static/ckeditor/ckeditor/"; |
| 11 | + |
| 12 | + // styling and qol bits |
| 13 | + var btnStyle = |
| 14 | + "background-color: #23a1cc; border: none;border-radius: 4px; color: white; padding: 1rem 1.2rem; text-align: center; text-decoration: none; display: flex; font-size: 16px; margin: 0.8rem; cursor: pointer; justify-self: center"; |
| 15 | + |
| 16 | + var editorElement = editor.element.$; |
| 17 | + var editorContainer = editorElement.closest(".c-2"); |
| 18 | + var labelElement = |
| 19 | + editorContainer.previousElementSibling.querySelector("label"); // Find the label in the sibling 'c-1' |
| 20 | + var labelText = labelElement |
| 21 | + ? labelElement.innerText |
| 22 | + : editor.name.split("id_").pop(); |
| 23 | + |
| 24 | + var instanceTitle = document.getElementById("id_title").value; |
| 25 | + var path = window.location.pathname.split("mod_app/").pop(); |
| 26 | + |
| 27 | + // Remove the trailing "/change" |
| 28 | + if (path.endsWith("/change")) { |
| 29 | + path = path.slice(0, -7); |
| 30 | + } |
| 31 | + var windowTitle = instanceTitle || path; |
| 32 | + |
| 33 | + // html structure for new window |
| 34 | + newWindow.document.write( |
| 35 | + `<html><head> <title>MOD Editor || ${windowTitle} </title> |
| 36 | +</head><body> |
| 37 | +<h3 style="font-family:sans-serif">Editing ${labelText} for ${instanceTitle}</h3><textarea id="popout-editor"></textarea> |
| 38 | +<button id="save-button" style="${btnStyle}">Save</button><button id="save-close-button" style="${btnStyle}">Save & Close</button></body></html>` |
| 39 | + ); |
| 40 | + |
| 41 | + newWindow.document.close(); |
| 42 | + |
| 43 | + // Load CKEditor script in the new window |
| 44 | + var script = newWindow.document.createElement("script"); |
| 45 | + script.type = "application/javascript"; |
| 46 | + script.src = ckeditorBasePath + "ckeditor.js"; |
| 47 | + |
| 48 | + script.onload = function () { |
| 49 | + newWindow.CKEDITOR.replace("popout-editor", { |
| 50 | + ...originalConfig, |
| 51 | + // pass existing editor content to the new editor |
| 52 | + on: { |
| 53 | + instanceReady: function () { |
| 54 | + newWindow.CKEDITOR.instances["popout-editor"].setData( |
| 55 | + editor.getData() |
| 56 | + ); |
| 57 | + }, |
| 58 | + }, |
| 59 | + }); |
| 60 | + |
| 61 | + // add listener to save button |
| 62 | + newWindow.document |
| 63 | + .getElementById("save-close-button") |
| 64 | + .addEventListener("click", function () { |
| 65 | + // Transfer content from the new editor to the original editor |
| 66 | + editor.setData( |
| 67 | + newWindow.CKEDITOR.instances["popout-editor"].getData() |
| 68 | + ); |
| 69 | + |
| 70 | + // Close the new window |
| 71 | + newWindow.close(); |
| 72 | + }); |
| 73 | + |
| 74 | + newWindow.document |
| 75 | + .getElementById("save-button") |
| 76 | + .addEventListener("click", function () { |
| 77 | + // Transfer content from the new editor to the original editor |
| 78 | + editor.setData( |
| 79 | + newWindow.CKEDITOR.instances["popout-editor"].getData() |
| 80 | + ); |
| 81 | + }); |
| 82 | + }; |
| 83 | + newWindow.document.head.appendChild(script); |
| 84 | + }, |
| 85 | + }); |
| 86 | + |
| 87 | + editor.ui.addButton("Popout", { |
| 88 | + label: "Open in new window", |
| 89 | + command: "popout", |
| 90 | + toolbar: "Popout", |
| 91 | + icon: this.path + "open_in_new.svg", |
| 92 | + }); |
| 93 | + }, |
| 94 | +}); |
0 commit comments