@richscripts/richtexteditor 2.4.0

package/richtexteditor/plugins/insertgallery.js

@@ -0,0 +1,362 @@
+RTE_DefaultConfig.plugin_insertgallery = RTE_Plugin_InsertGallery;
+
+function RTE_Plugin_InsertGallery() {
+    var obj = this;
+    var config;
+    var editor;
+
+    obj.PluginName = "InsertGallery";
+
+    obj.InitConfig = function (argconfig) {
+        config = argconfig;
+        if (!config.galleryImages) {
+            config.galleryImages = [];
+        }
+    };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+
+        editor.attachEvent("exec_command_insertgallery", function (state) {
+            state.returnValue = true;
+            obj.DoInsertGallery();
+        });
+    };
+
+    function append(parent, tagName, cssText, className) {
+        var tag = parent.ownerDocument.createElement(tagName);
+        if (cssText) {
+            tag.style.cssText = cssText;
+        }
+        if (className) {
+            tag.className = className;
+        }
+        parent.appendChild(tag);
+        return tag;
+    }
+
+    function clear(node) {
+        while (node.firstChild) {
+            node.removeChild(node.firstChild);
+        }
+    }
+
+    function getFileName(url) {
+        var value = String(url || "").split("#")[0].split("?")[0];
+        var lastSlash = value.lastIndexOf("/");
+        var name = lastSlash >= 0 ? value.substring(lastSlash + 1) : value;
+        try {
+            name = decodeURIComponent(name);
+        } catch (ex) {
+        }
+        return name || "Image";
+    }
+
+    function getMetaText(item) {
+        if (item.meta) {
+            return item.meta;
+        }
+        if (item.alt) {
+            return item.alt;
+        }
+        return item.url;
+    }
+
+    function normalizeGalleryItem(item) {
+        var normalized = null;
+
+        if (typeof item === "string") {
+            normalized = {
+                url: item,
+                thumbnail: item,
+                name: getFileName(item)
+            };
+        } else if (item instanceof Array) {
+            normalized = {
+                url: item[0],
+                thumbnail: item[0],
+                name: item[1] || getFileName(item[0]),
+                meta: item[2] || ""
+            };
+        } else if (item && typeof item === "object") {
+            var url = item.url || item.src || item.href;
+            if (!url) {
+                return null;
+            }
+
+            normalized = {
+                url: url,
+                thumbnail: item.thumbnail || item.thumb || item.preview || url,
+                name: item.name || item.text || item.title || getFileName(url),
+                meta: item.meta || item.description || item.alt || ""
+            };
+        }
+
+        if (!normalized || !normalized.url) {
+            return null;
+        }
+
+        if (!normalized.thumbnail) {
+            normalized.thumbnail = normalized.url;
+        }
+
+        if (!normalized.name) {
+            normalized.name = getFileName(normalized.url);
+        }
+
+        return normalized;
+    }
+
+    function uploadFiles(fileList, onUploaded, onFinished, onFailed) {
+        var files = [];
+        var handler = window.rte_file_upload_handler;
+        var i;
+
+        for (i = 0; i < fileList.length; i++) {
+            files.push(fileList[i]);
+        }
+
+        if (!files.length) {
+            onFinished();
+            return;
+        }
+
+        if (typeof handler !== "function") {
+            if (onFailed) {
+                onFailed("Upload handler is not configured.");
+            }
+            onFinished();
+            return;
+        }
+
+        var index = 0;
+
+        function next() {
+            if (index >= files.length) {
+                onFinished();
+                return;
+            }
+
+            var file = files[index];
+            handler(file, function (url, error) {
+                if (url) {
+                    onUploaded(url, file, index, files);
+                } else if (onFailed) {
+                    onFailed(error || ("Upload failed for " + file.name), file);
+                }
+
+                index++;
+                next();
+            }, index, files);
+        }
+
+        next();
+    }
+
+    obj.DoInsertGallery = function () {
+        var dialoginner = editor.createDialog(editor.getLangText("insertgallerytitle") || "Image gallery", "rte-dialog-insertgallery");
+        var closeDialog = typeof dialoginner.close === "function" ? function () {
+            dialoginner.close();
+        } : function () {
+            editor.closeCurrentPopup();
+        };
+
+        var browser = append(dialoginner, "div", "", "rte-gallery-browser");
+        // The outer dialog frame already supplies a title bar + close button via
+        // __UI_CreateDialogFrame, so we only render a short subtitle here (no
+        // duplicate "Image gallery" heading underneath the frame title).
+        var header = append(browser, "div", "", "rte-dialog-browser-header");
+        var copy = append(header, "div", "", "rte-dialog-browser-copy");
+        copy.innerText = "Browse uploaded assets, filter by name, and insert the selected image into the editor.";
+
+        var toolbar = append(browser, "div", "", "rte-gallery-browser-toolbar");
+        var path = append(toolbar, "div", "", "rte-gallery-browser-path");
+        path.innerText = "/";
+        var type = append(toolbar, "div", "", "rte-gallery-browser-type");
+        type.innerText = "Image Files";
+
+        var uploadButton = append(toolbar, "button", "", "rte-gallery-browser-button");
+        uploadButton.type = "button";
+        uploadButton.innerText = "Upload";
+
+        var refreshButton = append(toolbar, "button", "", "rte-gallery-browser-button");
+        refreshButton.type = "button";
+        refreshButton.innerText = "Refresh";
+
+        var search = append(toolbar, "input", "", "rte-gallery-browser-search");
+        search.type = "search";
+        search.placeholder = "Search images";
+        search.setAttribute("aria-label", "Search images");
+
+        var fileInput = append(toolbar, "input", "display:none;");
+        fileInput.type = "file";
+        fileInput.accept = "image/*,.jpg,.jpeg,.png,.gif,.bmp,.webp,.svg";
+        fileInput.multiple = true;
+
+        var status = append(browser, "div", "", "rte-gallery-browser-status");
+        status.setAttribute("role", "status");
+        status.setAttribute("aria-live", "polite");
+        var surface = append(browser, "div", "", "rte-gallery-browser-surface");
+        var grid = append(surface, "div", "", "rte-gallery-browser-grid");
+        grid.setAttribute("role", "listbox");
+        grid.setAttribute("aria-label", "Available images");
+        var empty = append(surface, "div", "", "rte-gallery-browser-empty");
+        empty.innerText = "No images match this search. Upload a file or adjust the filter.";
+
+        var footer = append(browser, "div", "", "rte-gallery-browser-footer");
+        var footerText = append(footer, "div", "", "rte-gallery-browser-footer-text");
+        footerText.innerText = "Choose an image to enable insert.";
+
+        var cancelButton = append(footer, "button", "", "rte-gallery-browser-button");
+        cancelButton.type = "button";
+        cancelButton.innerText = "Cancel";
+
+        var insertButton = append(footer, "button", "", "rte-gallery-browser-button rte-gallery-browser-button-primary");
+        insertButton.type = "button";
+        insertButton.innerText = "Insert";
+        insertButton.disabled = true;
+
+        var selectedUrl = "";
+
+        function getNormalizedItems() {
+            var list = [];
+            var items = config.galleryImages || [];
+            var i;
+            for (i = 0; i < items.length; i++) {
+                var normalized = normalizeGalleryItem(items[i]);
+                if (normalized) {
+                    list.push(normalized);
+                }
+            }
+            return list;
+        }
+
+        function getFilteredItems() {
+            var keyword = search.value.replace(/^\s+|\s+$/g, "").toLowerCase();
+            var items = getNormalizedItems();
+            if (!keyword) {
+                return items;
+            }
+
+            return items.filter(function (item) {
+                return (item.name && item.name.toLowerCase().indexOf(keyword) >= 0)
+                    || (item.meta && item.meta.toLowerCase().indexOf(keyword) >= 0)
+                    || (item.url && item.url.toLowerCase().indexOf(keyword) >= 0);
+            });
+        }
+
+        function updateStatus(items) {
+            var selectedName = "";
+            var i;
+            for (i = 0; i < items.length; i++) {
+                if (items[i].url === selectedUrl) {
+                    selectedName = items[i].name;
+                    break;
+                }
+            }
+
+            status.innerText = items.length + " item" + (items.length === 1 ? "" : "s") + " available."
+                + (selectedName ? " " + selectedName + " selected." : " No image selected.");
+            footerText.innerText = selectedName ? ("Ready to insert " + selectedName + ".") : "Choose an image to enable insert.";
+            insertButton.disabled = !selectedName;
+        }
+
+        function insertSelected() {
+            if (!selectedUrl) {
+                return;
+            }
+            editor.insertImageByUrl(selectedUrl);
+            closeDialog();
+            editor.focus();
+        }
+
+        function render() {
+            clear(grid);
+            var items = getFilteredItems();
+            var i;
+
+            empty.style.display = items.length ? "none" : "block";
+
+            for (i = 0; i < items.length; i++) {
+                (function (item) {
+                    var card = append(grid, "button", "", "rte-gallery-browser-card");
+                    card.type = "button";
+                    card.setAttribute("role", "option");
+                    card.setAttribute("aria-selected", item.url === selectedUrl ? "true" : "false");
+                    if (item.url === selectedUrl) {
+                        card.classList.add("is-selected");
+                    }
+
+                    var selection = append(card, "div", "", "rte-gallery-browser-selection");
+                    selection.innerText = item.url === selectedUrl ? "Selected" : "";
+
+                    var thumb = append(card, "div", "", "rte-gallery-browser-thumbnail");
+                    var image = append(thumb, "img", "", "rte-gallery-browser-thumbnail-image");
+                    image.src = item.thumbnail;
+                    image.alt = item.name;
+
+                    var name = append(card, "div", "", "rte-gallery-browser-name");
+                    name.innerText = item.name;
+
+                    var meta = append(card, "div", "", "rte-gallery-browser-meta");
+                    meta.innerText = getMetaText(item);
+
+                    card.onclick = function () {
+                        selectedUrl = item.url;
+                        render();
+                    };
+
+                    card.ondblclick = function () {
+                        selectedUrl = item.url;
+                        insertSelected();
+                    };
+                })(items[i]);
+            }
+
+            if (selectedUrl) {
+                var stillVisible = false;
+                for (i = 0; i < items.length; i++) {
+                    if (items[i].url === selectedUrl) {
+                        stillVisible = true;
+                        break;
+                    }
+                }
+                if (!stillVisible) {
+                    selectedUrl = "";
+                }
+            }
+
+            updateStatus(items);
+        }
+
+        uploadButton.onclick = function () {
+            fileInput.click();
+        };
+
+        fileInput.onchange = function () {
+            var lastUploaded = "";
+            status.innerText = "Uploading images...";
+
+            uploadFiles(fileInput.files, function (url) {
+                lastUploaded = url;
+                config.galleryImages.unshift(url);
+            }, function () {
+                if (lastUploaded) {
+                    selectedUrl = lastUploaded;
+                }
+                fileInput.value = "";
+                render();
+            }, function (error) {
+                status.innerText = error || "Upload failed.";
+            });
+        };
+
+        refreshButton.onclick = render;
+        search.oninput = render;
+        cancelButton.onclick = closeDialog;
+        insertButton.onclick = insertSelected;
+
+        render();
+        search.focus();
+    };
+}

package/richtexteditor/plugins/inserttemplate.js

@@ -0,0 +1,261 @@
+RTE_DefaultConfig.plugin_inserttemplate = RTE_Plugin_InsertTemplate;
+
+function RTE_Plugin_InsertTemplate() {
+    var obj = this;
+    var config;
+    var editor;
+
+    obj.PluginName = "InsertTemplate";
+
+    obj.InitConfig = function (argconfig) {
+        config = argconfig;
+        if (!config.htmlTemplates) {
+            config.htmlTemplates = [];
+        }
+    };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+
+        editor.attachEvent("exec_command_inserttemplate", function (state) {
+            state.returnValue = true;
+            obj.DoInsertTemplate();
+        });
+    };
+
+    function append(parent, tagName, cssText, className) {
+        var tag = parent.ownerDocument.createElement(tagName);
+        if (cssText) {
+            tag.style.cssText = cssText;
+        }
+        if (className) {
+            tag.className = className;
+        }
+        parent.appendChild(tag);
+        return tag;
+    }
+
+    function clear(node) {
+        while (node.firstChild) {
+            node.removeChild(node.firstChild);
+        }
+    }
+
+    function stripHtml(html) {
+        var div = document.createElement("div");
+        div.innerHTML = html || "";
+        return div.innerText || div.textContent || "";
+    }
+
+    function normalizeTemplateItem(item, index) {
+        if (item instanceof Array) {
+            return {
+                id: "template-" + index,
+                title: item[0] || ("Template " + (index + 1)),
+                html: item[1] || "",
+                meta: item[2] || ""
+            };
+        }
+
+        if (item && typeof item === "object") {
+            return {
+                id: item.id || ("template-" + index),
+                title: item.title || item.name || item.text || ("Template " + (index + 1)),
+                html: item.html || item.content || "",
+                meta: item.meta || item.description || ""
+            };
+        }
+
+        if (typeof item === "string") {
+            return {
+                id: "template-" + index,
+                title: "Template " + (index + 1),
+                html: item,
+                meta: ""
+            };
+        }
+
+        return null;
+    }
+
+    function scalePreview(body, canvas) {
+        var maxWidth = 206;
+        var maxHeight = 166;
+        var width = Math.max(canvas.scrollWidth, 1);
+        var height = Math.max(canvas.scrollHeight, 1);
+        var scale = Math.min(1, maxWidth / width, maxHeight / height);
+
+        canvas.style.transformOrigin = "top left";
+        canvas.style.transform = "scale(" + scale + ")";
+        canvas.style.width = width + "px";
+        canvas.style.height = height + "px";
+    }
+
+    obj.DoInsertTemplate = function () {
+        var dialoginner = editor.createDialog(editor.getLangText("inserttemplatetitle") || "Insert template", "rte-dialog-inserttemplate");
+        var closeDialog = typeof dialoginner.close === "function" ? function () {
+            dialoginner.close();
+        } : function () {
+            editor.closeCurrentPopup();
+        };
+
+        var browser = append(dialoginner, "div", "", "rte-dialog-browser");
+        // The outer dialog frame supplies the title bar — only render a subtitle here.
+        var header = append(browser, "div", "", "rte-dialog-browser-header");
+        var copy = append(header, "div", "", "rte-dialog-browser-copy");
+        copy.innerText = "Preview reusable layouts, search by name, and replace the current editor content with a selected template.";
+
+        var toolbar = append(browser, "div", "", "rte-dialog-browser-toolbar");
+        var search = append(toolbar, "input", "", "rte-dialog-browser-search");
+        search.type = "search";
+        search.placeholder = "Search templates";
+        search.setAttribute("aria-label", "Search templates");
+        var count = append(toolbar, "div", "", "rte-dialog-browser-count");
+        count.setAttribute("role", "status");
+        count.setAttribute("aria-live", "polite");
+
+        var scrollpanel = append(browser, "div", "", "rte-dialog-browser-scrollpanel");
+        var grid = append(scrollpanel, "div", "", "rte-dialog-browser-grid rte-template-grid");
+        grid.setAttribute("role", "listbox");
+        grid.setAttribute("aria-label", "Available templates");
+        var empty = append(scrollpanel, "div", "", "rte-dialog-browser-empty");
+        empty.innerText = "No templates match the current filter.";
+
+        var footer = append(browser, "div", "", "rte-gallery-browser-footer");
+        var footerText = append(footer, "div", "", "rte-gallery-browser-footer-text");
+        footerText.innerText = "Select a template to replace the current content.";
+
+        var cancelButton = append(footer, "button", "", "rte-gallery-browser-button");
+        cancelButton.type = "button";
+        cancelButton.innerText = "Cancel";
+
+        var applyButton = append(footer, "button", "", "rte-gallery-browser-button rte-gallery-browser-button-primary");
+        applyButton.type = "button";
+        applyButton.innerText = "Replace Content";
+        applyButton.disabled = true;
+
+        var selectedId = "";
+
+        function getTemplates() {
+            var list = [];
+            var items = config.htmlTemplates || [];
+            var i;
+            for (i = 0; i < items.length; i++) {
+                var normalized = normalizeTemplateItem(items[i], i);
+                if (normalized && normalized.html) {
+                    list.push(normalized);
+                }
+            }
+            return list;
+        }
+
+        function getFilteredTemplates() {
+            var keyword = search.value.replace(/^\s+|\s+$/g, "").toLowerCase();
+            var items = getTemplates();
+            if (!keyword) {
+                return items;
+            }
+
+            return items.filter(function (item) {
+                var plainText = stripHtml(item.html).toLowerCase();
+                return item.title.toLowerCase().indexOf(keyword) >= 0
+                    || plainText.indexOf(keyword) >= 0
+                    || (item.meta && item.meta.toLowerCase().indexOf(keyword) >= 0);
+            });
+        }
+
+        function updateFooter(items) {
+            var selectedTemplate = null;
+            var i;
+            for (i = 0; i < items.length; i++) {
+                if (items[i].id === selectedId) {
+                    selectedTemplate = items[i];
+                    break;
+                }
+            }
+
+            count.innerText = items.length + " template" + (items.length === 1 ? "" : "s");
+            footerText.innerText = selectedTemplate
+                ? ("Ready to replace the editor content with " + selectedTemplate.title + ".")
+                : "Select a template to replace the current content.";
+            applyButton.disabled = !selectedTemplate;
+        }
+
+        function applySelected() {
+            var items = getTemplates();
+            var i;
+            for (i = 0; i < items.length; i++) {
+                if (items[i].id === selectedId) {
+                    editor.setHTMLCode(items[i].html);
+                    closeDialog();
+                    editor.focus();
+                    return;
+                }
+            }
+        }
+
+        function render() {
+            clear(grid);
+            var items = getFilteredTemplates();
+            var i;
+
+            empty.style.display = items.length ? "none" : "block";
+
+            for (i = 0; i < items.length; i++) {
+                (function (item) {
+                    var card = append(grid, "button", "", "rte-dialog-browser-card");
+                    card.type = "button";
+                    card.setAttribute("role", "option");
+                    card.setAttribute("aria-selected", item.id === selectedId ? "true" : "false");
+                    if (item.id === selectedId) {
+                        card.classList.add("is-selected");
+                    }
+
+                    var preview = append(card, "div", "", "rte-template-card-preview");
+                    var previewBody = append(preview, "div", "", "rte-template-card-preview-body");
+                    var canvas = append(previewBody, "div", "", "rte-template-card-preview-canvas");
+                    canvas.innerHTML = item.html;
+                    scalePreview(previewBody, canvas);
+
+                    var footer = append(card, "div", "", "rte-template-card-footer");
+                    var title = append(footer, "div", "", "rte-template-card-title");
+                    title.innerText = item.title;
+                    var meta = append(footer, "div", "", "rte-template-card-meta");
+                    meta.innerText = item.meta || stripHtml(item.html).substring(0, 80) || "Reusable template";
+
+                    card.onclick = function () {
+                        selectedId = item.id;
+                        render();
+                    };
+
+                    card.ondblclick = function () {
+                        selectedId = item.id;
+                        applySelected();
+                    };
+                })(items[i]);
+            }
+
+            if (selectedId) {
+                var visible = false;
+                for (i = 0; i < items.length; i++) {
+                    if (items[i].id === selectedId) {
+                        visible = true;
+                        break;
+                    }
+                }
+                if (!visible) {
+                    selectedId = "";
+                }
+            }
+
+            updateFooter(items);
+        }
+
+        search.oninput = render;
+        cancelButton.onclick = closeDialog;
+        applyButton.onclick = applySelected;
+
+        render();
+        search.focus();
+    };
+}