@richscripts/richtexteditor 2.4.0

package/richtexteditor/plugins/ghostcomplete.js

@@ -0,0 +1,297 @@
+if (!window.RTE_DefaultConfig) window.RTE_DefaultConfig = {};
+
+// 2026-06-06 AI ghost-text autocomplete. GitHub-Copilot / Notion-AI-style inline
+// completion: after you pause typing, a greyed suggestion appears after the caret
+// continuing your sentence; press Tab to accept it, Esc (or just keep typing) to
+// dismiss. Distinct from the command-driven AI Toolkit — this is ambient,
+// inline, and hands-free.
+//
+// Bring-your-own-key: supply config.ghostTextResolver(context) returning a string
+// (or a Promise of one). `context` = { before, after, full } around the caret.
+// Nothing ships a model or makes network calls on its own.
+//
+//   config.ghostText = true | { delayMs, minChars, maxContext }
+//   config.ghostTextResolver = async ({ before }) => " the rest of the sentence"
+//
+// Serialization-safe: the suggestion lives in a contenteditable=false
+// `<span class="rte-ghost">` decoration that is never part of the saved content —
+// getHTMLCode / getJSON are wrapped to strip any ghost span, and the caret is
+// always kept BEFORE the ghost so typing and saving behave normally.
+RTE_DefaultConfig.plugin_ghostcomplete = RTE_Plugin_GhostComplete;
+if (typeof RTE_DefaultConfig.ghostText === "undefined") RTE_DefaultConfig.ghostText = false;
+if (typeof RTE_DefaultConfig.ghostTextResolver === "undefined") RTE_DefaultConfig.ghostTextResolver = null;
+
+function RTE_Plugin_GhostComplete() {
+    var obj = this;
+    var config, editor;
+    var opts = null, boundDoc = null, wrapped = false;
+    var timer = null, reqToken = 0, busy = false;
+    var ghostEl = null, ghostText = "";
+
+    obj.PluginName = "GhostComplete";
+
+    obj.InitConfig = function (argconfig) { config = argconfig; };
+
+    obj.InitEditor = function (argeditor) {
+        editor = argeditor;
+        opts = (typeof config.ghostText === "object" && config.ghostText) ? config.ghostText : {};
+
+        setup();
+        try { editor.attachEvent("ready", setup); } catch (e) {}
+        try { editor.attachEvent("aftersethtml", setup); } catch (e) {}
+        setTimeout(setup, 0); setTimeout(setup, 200);
+
+        // Public API.
+        editor.setGhostTextResolver = function (fn) { config.ghostTextResolver = (typeof fn === "function") ? fn : null; };
+        editor.requestGhostText = function () {
+            // Manual invocation (slash menu / API) with no resolver configured
+            // used to be a silent no-op — surface a transient setup hint so
+            // the user learns WHY nothing happened and how to enable it.
+            if (typeof config.ghostTextResolver !== "function") { showSetupHint(); return; }
+            scheduleRequest(0);
+        };
+        editor.acceptGhostText = function () { return accept(); };
+        editor.dismissGhostText = function () { clearGhost(); };
+        editor.hasGhostText = function () { return !!ghostEl; };
+    };
+
+    function enabled() { return !!config.ghostText && typeof config.ghostTextResolver === "function"; }
+
+    function setup() {
+        var doc = editor.getDocument(); if (!doc) return;
+        injectStyles(doc);
+        if (doc !== boundDoc) {
+            doc.addEventListener("keydown", onKeyDown, true);
+            doc.addEventListener("input", onInput, true);
+            doc.addEventListener("mousedown", onPointerDown, true);
+            // Touch devices have no Tab key — tapping the suggestion accepts it.
+            doc.addEventListener("touchstart", onPointerDown, true);
+            boundDoc = doc;
+        }
+        wrapSerializers();
+    }
+
+    function delayMs() { var n = opts && +opts.delayMs; return (n && n >= 0) ? n : 600; }
+    function minChars() { var n = opts && +opts.minChars; return (n && n > 0) ? n : 3; }
+    function maxContext() { var n = opts && +opts.maxContext; return (n && n > 0) ? n : 2000; }
+
+    function onInput() {
+        if (busy) return;
+        clearGhost();           // any edit invalidates a showing suggestion
+        if (!enabled()) return;
+        scheduleRequest(delayMs());
+    }
+
+    function onKeyDown(e) {
+        if (!ghostEl) {
+            // Allow manual trigger: nothing here; ghost only shows after a pause.
+            return;
+        }
+        if (e.key === "Tab") { e.preventDefault(); e.stopPropagation(); accept(); return; }
+        if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); clearGhost(); return; }
+        // Arrow / navigation keys dismiss; character keys are handled by onInput.
+        if (/^Arrow|^Home$|^End$|^PageUp$|^PageDown$/.test(e.key)) { clearGhost(); }
+    }
+
+    // Pointer/touch on the suggestion accepts it (the only way on mobile, and a
+    // handy shortcut on desktop); a pointer anywhere else dismisses it.
+    function onPointerDown(e) {
+        if (!ghostEl) return;
+        var t = e.target;
+        if (t === ghostEl || (ghostEl.contains && ghostEl.contains(t))) {
+            e.preventDefault(); e.stopPropagation();
+            accept();
+        } else {
+            clearGhost();
+        }
+    }
+
+    function scheduleRequest(ms) {
+        if (timer) { clearTimeout(timer); timer = null; }
+        if (!enabled()) return;
+        timer = setTimeout(runRequest, ms);
+    }
+
+    function runRequest() {
+        timer = null;
+        if (!enabled() || ghostEl) return;
+        var ctx = caretContext();
+        if (!ctx || ctx.before.replace(/\s/g, "").length < minChars()) return;
+
+        var token = ++reqToken;
+        var out;
+        try { out = config.ghostTextResolver({ before: ctx.before, after: ctx.after, full: ctx.full }); }
+        catch (e) { return; }
+
+        Promise.resolve(out).then(function (text) {
+            if (token !== reqToken) return;        // superseded by newer input
+            if (ghostEl) return;                   // already showing
+            if (typeof text !== "string") return;
+            text = text.replace(/\r/g, "");
+            if (!text) return;
+            // Only show if the caret is still collapsed where we measured.
+            showGhost(text);
+        }, function () { /* resolver failed — stay silent */ });
+    }
+
+    // The text immediately around the caret (within the current block), trimmed
+    // to maxContext characters of left-context.
+    function caretContext() {
+        try {
+            var sel = editor.getSelection();
+            if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
+            var editable = editor.getEditable(); if (!editable) return null;
+            var r = sel.getRangeAt(0);
+            // before = text from block start to caret; after = caret to block end.
+            var block = blockOf(r.startContainer, editable) || editable;
+            var beforeRange = r.cloneRange();
+            beforeRange.setStart(block, 0);
+            var afterRange = r.cloneRange();
+            afterRange.setEnd(block, block.childNodes.length);
+            var before = textOf(beforeRange);
+            var after = textOf(afterRange);
+            if (before.length > maxContext()) before = before.slice(before.length - maxContext());
+            return { before: before, after: after, full: textOf(rangeOfNode(editable)) };
+        } catch (e) { return null; }
+    }
+
+    function rangeOfNode(node) { var d = editor.getDocument(); var r = d.createRange(); r.selectNodeContents(node); return r; }
+    function textOf(range) {
+        try {
+            var frag = range.cloneContents();
+            // strip any ghost spans from the measured text
+            var ghosts = frag.querySelectorAll ? frag.querySelectorAll(".rte-ghost") : [];
+            for (var i = 0; i < ghosts.length; i++) ghosts[i].parentNode.removeChild(ghosts[i]);
+            var tmp = editor.getDocument().createElement("div");
+            tmp.appendChild(frag);
+            return tmp.textContent || "";
+        } catch (e) { return ""; }
+    }
+    function blockOf(node, editable) {
+        var n = (node && node.nodeType === 3) ? node.parentNode : node;
+        while (n && n !== editable) {
+            if (n.nodeType === 1 && /^(P|H[1-6]|LI|BLOCKQUOTE|PRE|TD|TH|DIV|FIGCAPTION)$/.test(n.nodeName)) return n;
+            n = n.parentNode;
+        }
+        return null;
+    }
+
+    function showGhost(text) {
+        var doc = editor.getDocument(), sel = editor.getSelection();
+        if (!doc || !sel || sel.rangeCount === 0 || !sel.isCollapsed) return;
+        busy = true;
+        try {
+            var r = sel.getRangeAt(0);
+            var span = doc.createElement("span");
+            span.className = "rte-ghost";
+            span.setAttribute("contenteditable", "false");
+            span.setAttribute("data-rte-ghost", "1");
+            // The suggestion is unconfirmed, predicted text — hide it from the
+            // accessibility tree so screen readers don't read it as real content.
+            span.setAttribute("aria-hidden", "true");
+            span.textContent = text;
+            r.insertNode(span);
+            ghostEl = span; ghostText = text;
+            // keep the caret BEFORE the ghost so typing/saving are unaffected
+            var cr = doc.createRange();
+            cr.setStartBefore(span); cr.collapse(true);
+            sel.removeAllRanges(); sel.addRange(cr);
+        } catch (e) { ghostEl = null; ghostText = ""; }
+        finally { busy = false; }
+    }
+
+    function clearGhost() {
+        if (!ghostEl) return;
+        busy = true;
+        try {
+            var sel = editor.getSelection();
+            var caret = null;
+            if (sel && sel.rangeCount) { var c = sel.getRangeAt(0); caret = { n: c.startContainer, o: c.startOffset }; }
+            if (ghostEl.parentNode) ghostEl.parentNode.removeChild(ghostEl);
+            // restore caret if it still resolves
+            try { if (caret && caret.n) { var d = editor.getDocument(), nr = d.createRange(); nr.setStart(caret.n, Math.min(caret.o, (caret.n.length != null ? caret.n.length : caret.o))); nr.collapse(true); sel.removeAllRanges(); sel.addRange(nr); } } catch (e2) {}
+        } catch (e) {}
+        finally { ghostEl = null; ghostText = ""; busy = false; }
+    }
+
+    function accept() {
+        if (!ghostEl) return false;
+        var text = ghostText;
+        var doc = editor.getDocument(), sel = editor.getSelection();
+        busy = true;
+        try {
+            // caret is before the ghost; remove ghost, then insert real text so it
+            // lands on the native undo stack.
+            if (ghostEl.parentNode) ghostEl.parentNode.removeChild(ghostEl);
+            ghostEl = null; ghostText = "";
+            var done = false;
+            try { done = doc.execCommand("insertText", false, text); } catch (e) { done = false; }
+            if (!done && sel && sel.rangeCount) {
+                var r = sel.getRangeAt(0);
+                var tn = doc.createTextNode(text);
+                r.insertNode(tn);
+                var cr = doc.createRange(); cr.setStartAfter(tn); cr.collapse(true);
+                sel.removeAllRanges(); sel.addRange(cr);
+            }
+        } catch (e) {} finally { busy = false; }
+        try { if (typeof editor.fireChange === "function") editor.fireChange(); } catch (e) {}
+        return true;
+    }
+
+    function showSetupHint() {
+        try {
+            var ifr = editor.iframe || (editor.getDocument && editor.getDocument().defaultView && editor.getDocument().defaultView.frameElement);
+            var host = ifr && ifr.parentNode ? ifr.parentNode : document.body;
+            if (host.querySelector && host.querySelector(".rte-ghost-hint")) return;
+            var tip = (host.ownerDocument || document).createElement("div");
+            tip.className = "rte-ghost-hint";
+            tip.setAttribute("role", "status");
+            tip.textContent = "AI completion isn't configured — supply config.ghostTextResolver (or editor.setGhostTextResolver) to enable inline suggestions.";
+            tip.style.cssText = "position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:20;" +
+                "max-width:90%;padding:7px 14px;border-radius:8px;background:#1f2937;color:#f9fafb;" +
+                "font:12px/1.5 -apple-system,Segoe UI,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.25);pointer-events:none";
+            try { if (host !== document.body && (host.ownerDocument.defaultView || window).getComputedStyle(host).position === "static") host.style.position = "relative"; } catch (e2) {}
+            host.appendChild(tip);
+            setTimeout(function () { try { if (tip.parentNode) tip.parentNode.removeChild(tip); } catch (e3) {} }, 4500);
+        } catch (e) {}
+    }
+
+    function injectStyles(doc) {
+        if (!doc || doc.getElementById("rte-ghost-styles")) return;
+        var css = ".rte-ghost{color:#9aa3b2;opacity:.85;font-style:normal;" +
+                  "user-select:none;-webkit-user-select:none;cursor:pointer;white-space:pre-wrap;}";
+        var st = doc.createElement("style");
+        st.id = "rte-ghost-styles";
+        st.appendChild(doc.createTextNode(css));
+        (doc.head || doc.getElementsByTagName("head")[0] || doc.documentElement).appendChild(st);
+    }
+
+    function stripFor() {
+        var ed = editor.getEditable(); if (!ed) return function () {};
+        var ghosts = ed.querySelectorAll(".rte-ghost");
+        var parents = [];
+        for (var i = 0; i < ghosts.length; i++) { parents.push([ghosts[i], ghosts[i].nextSibling, ghosts[i].parentNode]); ghosts[i].parentNode.removeChild(ghosts[i]); }
+        return function restore() {
+            for (var j = 0; j < parents.length; j++) {
+                var node = parents[j][0], ref = parents[j][1], par = parents[j][2];
+                if (par) { try { par.insertBefore(node, ref); } catch (e) {} }
+            }
+        };
+    }
+    function wrapSerializers() {
+        if (wrapped) return;
+        var names = ["getHTMLCode", "getJSON", "getHTMLContent"];
+        var did = false;
+        for (var i = 0; i < names.length; i++) {
+            (function (name) {
+                var orig = editor[name];
+                if (typeof orig !== "function" || orig.__rteGhostWrapped) return;
+                var w = function () { var restore = stripFor(); try { return orig.apply(editor, arguments); } finally { restore(); } };
+                w.__rteGhostWrapped = true;
+                editor[name] = w;
+                did = true;
+            })(names[i]);
+        }
+        if (did) wrapped = true;
+    }
+}

package/richtexteditor/plugins/html2pdf.js

@@ -0,0 +1,158 @@
+
+
+if (!RTE_DefaultConfig.svgCode_html2pdf) {
+	RTE_DefaultConfig.svgCode_html2pdf = '<svg viewBox="-2 -2 36 36" fill="#5F6368"><polygon points="30 11 30 9 22 9 22 23 24 23 24 17 29 17 29 15 24 15 24 11 30 11"></polygon><path d="M8,9H2V23H4V18H8a2,2,0,0,0,2-2V11A2,2,0,0,0,8,9Zm0,7H4V11H8Z"></path><path d="M16,23H12V9h4a4,4,0,0,1,4,4v6A4,4,0,0,1,16,23Zm-2-2h2a2,2,0,0,0,2-2V13a2,2,0,0,0-2-2H14Z"></path><title>PDF</title></svg>'
+}
+
+RTE_DefaultConfig.plugin_html2pdf = RTE_Plugin_Html2PDF;
+
+function RTE_Plugin_Html2PDF() {
+
+	var scripturl = "https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js";
+
+	var obj = this;
+
+	var config, editor;
+
+	obj.PluginName = "Html2PDF";
+
+	obj.InitConfig = function (argconfig) {
+		config = argconfig;
+	}
+	obj.InitEditor = function (argeditor) {
+		editor = argeditor;
+
+		editor.attachEvent("exec_command_html2pdf", function (state, cmd, value) {
+			obj.DoHtml2PDF();
+			state.returnValue = true;
+		});
+
+		editor.toolbarFactoryMap["html2pdf"] = function (cmd) {
+			//console.log(cmd);
+			var span = editor.createToolbarButton(cmd);
+			span.style.backgroundColor = ''
+			return span;
+		};
+
+	}
+
+	function __Append(parent, tagname, csstext, cssclass) {
+		var tag = parent.ownerDocument.createElement(tagname);
+		if (csstext) tag.style.cssText = csstext;
+		if (cssclass) tag.className = cssclass;
+		parent.appendChild(tag);
+		return tag;
+	}
+
+
+	function dataURLToBlob(dataurl) {
+		var arr = dataurl.split(',');
+		var mime = arr[0].match(/:(.*?);/)[1];
+		var bstr = atob(arr[1]);
+		var n = bstr.length;
+		var u8arr = new Uint8Array(n);
+		while (n--) {
+			u8arr[n] = bstr.charCodeAt(n);
+		}
+		return new Blob([u8arr], { type: mime });
+	}
+
+	obj.DoHtml2PDF = function () {
+
+		var dialoginner = editor.createDialog("Html2PDF", "rte-dialog-html2pdf");
+
+		var div2 = __Append(dialoginner, "div", "position:relative;text-align:center;");
+
+		div2.innerHTML = "Loading...";
+
+		var imgrect = __Append(dialoginner, "div", "position:relative;text-align:center;")
+
+		window.html2pdf_callback = function (win) {
+
+			if (!win.html2pdf) {
+				div2.innerHTML = "Failed to load script.";
+				return;
+			}
+
+			div2.innerHTML = "Exporting...";
+
+			var opt = {
+				margin: 0.5,
+				filename: 'myfile.pdf',
+				image: { type: 'jpeg', quality: 0.98 },
+				html2canvas: { scale: 2 },
+				jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+			};
+
+			var promimg = win.html2pdf().set(opt).from(win.document.body).outputImg();
+			promimg.then(function (img) {
+
+				var dataurl = img.getAttribute('src');
+				if (dataurl.indexOf("base64") == -1) {
+					div2.innerHTML = "Error, no data.";
+					return;
+				}
+
+				var imgblob = dataURLToBlob(dataurl);
+				var imgurl = URL.createObjectURL(imgblob);
+				img.setAttribute("src", imgurl);
+
+				var prom = win.html2pdf().set(opt).from(win.document.body).outputPdf();
+				prom.then(function (str) {
+					var bin = new Array(str.length);
+					for (var i = 0; i < str.length; i++)
+						bin[i] = str.charCodeAt(i);
+					var blob = new Blob([new Uint8Array(bin)], { type: "application/pdf" })
+					var url = URL.createObjectURL(blob);
+					div2.innerHTML = Math.ceil(str.length / 1024) + "KB Exported<br/><a href='" + url + "' target=_blank>Download PDF</a>";
+
+					var pdflink = div2.querySelector("a");
+
+					var date = new Date();
+					var ymd = String(date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate()).substring(2);
+					var hms = String(1000000 + date.getHours() * 10000 + date.getMinutes() * 100 + date.getSeconds()).substring(1);
+					pdflink.download = "Export-" + ymd + "-" + hms + ".pdf";
+
+					//a.rel = 'noopener'
+
+					pdflink.click();
+
+					img.style.cssText = "max-width:300px;max-height:200px;margin:5px;padding:10px;border:solid 1px #eee;box-shadow:2px 2px 6px #eee"
+					imgrect.appendChild(img)
+
+					__Append(imgrect, "br");
+					var imglink = __Append(imgrect, "a");
+					imglink.setAttribute("href", imgurl);
+					imglink.setAttribute("target", "_blank");
+					imglink.download = "Export-" + ymd + "-" + hms + ".jpg";
+					imglink.innerText = "Download Img";
+
+					//dialoginner.close();
+
+				}).catch(function (x) {
+					console.error(x);
+				})
+
+			}).catch(function (x) {
+				console.error(x);
+			})
+
+
+		}
+
+		var div1 = __Append(dialoginner, "div", "position:relative;text-align:center;");
+
+		iframe = __Append(div1, "iframe", "align-self:center;flex:99;width:100%;height:0px;border:0px;", "rte-editable");
+		iframe.contentDocument.open("text/html");
+		iframe.contentDocument.write("<html><head><link id='url-css-preview' rel='stylesheet' href='" + editor.htmlEncode(config.previewCssUrl) + "'/>"
+			+ "<script src='" + editor.htmlEncode(scripturl) + "'></script></head><body style='padding:10px;margin:0px'>"
+			+ editor.getHTMLCode() + "</body>"
+			+ "<script>window.onload=function(){setTimeout(function(){parent.html2pdf_callback(window)},100)}</script></html>")
+		iframe.contentDocument.close();
+
+	}
+}
+
+
+
+

package/richtexteditor/plugins/imageeditor.js

@@ -0,0 +1,159 @@
+
+
+if (!RTE_DefaultConfig.svgCode_imageeditor) {
+	RTE_DefaultConfig.svgCode_imageeditor = '<svg viewBox="-2 -2 20 20" fill="#5F6368"><style>.st0{fill:#f6f6f6}.st1{fill:#424242}.st2{fill:none}.st3{fill:#f0eff1}</style><path class="st0" d="M1 0v6H0v10h10v-1h6V0z" id="outline"/><g id="icon_x5F_bg"><path class="st1" d="M2 5h1v1H2zM2 3h1v1H2zM2 1h1v1H2zM4 1h1.001v1H4zM6 1h1v1H6zM8 1h1v1H8zM10 1h1v1h-1zM12 1h1v1h-1zM14 1h1v1h-1zM14 3h1v1h-1zM14 5h1v1h-1zM14 7h1v1h-1zM14 9h1v1h-1zM14 10.999h1V12h-1zM14 13h1v1h-1zM12 13h1v1h-1zM11 11V5H5v1H4V4h8v7z"/><circle class="st1" cx="6.192" cy="9.807" r=".807"/><path class="st1" d="M1 7v8h8V7H1zm1 7.001v-.28l2.537-1.463L7.554 14l.001.001H2zm6-.93l-3.463-1.982L2 12.491v-4.49h6v5.07zM10 13h1v1h-1z"/></g><g id="icon_x5F_fg"><path class="st2" d="M2 14h5.554v.001H2z"/><path class="st3" d="M11 5v6h-1V6H5V5z"/><path class="st3" d="M2 12.491l2.537-1.402L8 13.071v-5.07H2v4.49zM6.192 9a.807.807 0 1 1 .001 1.615A.807.807 0 0 1 6.192 9z"/><path class="st3" d="M2 13.721V14h5.554l-3.017-1.742z"/></g></svg>';
+}
+
+RTE_DefaultConfig.plugin_imageeditor = RTE_Plugin_ImageEditor;
+
+function RTE_Plugin_ImageEditor() {
+
+
+
+	var obj = this;
+
+	var config, editor;
+
+	obj.PluginName = "ImageEditor";
+
+	obj.InitConfig = function (argconfig) {
+		config = argconfig;
+	}
+	obj.InitEditor = function (argeditor) {
+		editor = argeditor;
+
+		editor.attachEvent("exec_command_imageeditor", function (state, cmd, value) {
+			obj.DoImageEditor();
+			state.returnValue = true;
+		});
+
+		editor.toolbarFactoryMap["imageeditor"] = function (cmd) {
+			var span = editor.createToolbarButton(cmd);
+			span.style.backgroundColor = ''
+			return span;
+		};
+
+	}
+
+	function __Append(parent, tagname, csstext, cssclass) {
+		var tag = parent.ownerDocument.createElement(tagname);
+		if (csstext) tag.style.cssText = csstext;
+		if (cssclass) tag.className = cssclass;
+		parent.appendChild(tag);
+		return tag;
+	}
+	
+	function dataURLToBlob(dataurl) {
+		var arr = dataurl.split(',');
+		var mime = arr[0].match(/:(.*?);/)[1];
+		var bstr = atob(arr[1]);
+		var n = bstr.length;
+		var u8arr = new Uint8Array(n);
+		while (n--) {
+			u8arr[n] = bstr.charCodeAt(n);
+		}
+		return new Blob([u8arr], { type: mime });
+	}
+
+	obj.DoImageEditor = function () {
+
+		var img = editor.getSelectedControl();
+		if (!img)
+			return;
+
+		var dialoginner = editor.createDialog("ImageEditor", "rte-dialog-imageeditor");
+
+		dialoginner.style.width = "90%";
+		dialoginner.style.height = "90%";
+
+
+		var scriptbase = config.url_base + "/plugins/tui.image-editor/";
+
+		window.rte_image_editor_callback = function (win) {
+			var options = {
+				includeUI: {
+					loadImage: {
+						path: img.src,
+						name: 'RteImage'
+					},
+					//locale: locale_ru_RU,
+					theme: {
+						// main icons
+						'menu.normalIcon.path': scriptbase + 'svg/icon-d.svg',
+						'menu.activeIcon.path': scriptbase + 'svg/icon-b.svg',
+						'menu.disabledIcon.path': scriptbase + 'svg/icon-a.svg',
+						'menu.hoverIcon.path': scriptbase + 'svg/icon-c.svg',
+						// submenu icons
+						'submenu.normalIcon.path': scriptbase + 'svg/icon-d.svg',
+						'submenu.normalIcon.name': 'icon-d',
+						'submenu.activeIcon.path': scriptbase + 'svg/icon-c.svg',
+						'submenu.activeIcon.name': 'icon-c'
+					},
+					//initMenu: 'filter',
+					menuBarPosition: 'bottom'
+				},
+
+				cssMaxWidth: 700,
+				cssMaxHeight: 500,
+				selectionStyle: {
+					cornerSize: 20,
+					rotatingPointOffset: 70
+				}
+			};
+			var imgeditor = new win.tui.ImageEditor(win.document.querySelector('#tui-image-editor'), options);
+
+			var btns = win.document.querySelector('.tui-image-editor-header-buttons');
+			btns.innerHTML = '';
+			var savebtn = __Append(btns, "button", "");
+			savebtn.innerText = "Save";
+			savebtn.onclick = function () {
+
+				var dataurl = imgeditor.toDataURL();
+				if (!config.file_upload_handler) {
+					img.src = dataurl;
+					editor.notifySelectionChange();
+					dialoginner.close();
+					return;
+				}
+
+				var file = dataURLToBlob(dataurl);
+
+				config.file_upload_handler(file, function (url, error) {
+					if (url) {
+						img.src = url;
+						editor.notifySelectionChange();
+						dialoginner.close();
+						return;
+					}
+					if (error) {
+						//TODO:retry dialog or cancel
+						alert("upload failed , TODO:show retry dialog or cancel");
+					}
+					else {
+						alert("Developer warning : ");
+					}
+				});
+
+
+			}
+
+		}
+
+		iframe = __Append(dialoginner, "iframe", "align-self:center;flex:99;width:100%;height:100%px;border:0px;", "rte-editable");
+		iframe.contentDocument.open("text/html");
+		iframe.contentDocument.write("<html><head><base href='" + editor.htmlEncode(location.href) + "'/>"
+			+ "<link id='url-css-preview' rel='stylesheet' href='" + editor.htmlEncode(scriptbase + "tui-color-picker.min.css") + "'/>"
+			+ "<link id='url-css-preview' rel='stylesheet' href='" + editor.htmlEncode(scriptbase + "tui-image-editor.min.css") + "'/>"
+			+ "<script src='" + editor.htmlEncode(scriptbase + "fabric.min.js") + "'></script>"
+			+ "<script src='" + editor.htmlEncode(scriptbase + "tui-color-picker.min.js") + "'></script>"
+			+ "<script src='" + editor.htmlEncode(scriptbase + "tui-code-snippet.min.js") + "'></script>"
+			+ "<script src='" + editor.htmlEncode(scriptbase + "tui-image-editor.min.js") + "'></script>"
+			+ "</head><body style='padding:10px;margin:0px'><div id='tui-image-editor'></div></body>"
+			+ "<script>window.onload=function(){setTimeout(function(){parent.rte_image_editor_callback(window)},100)}</script></html>")
+		iframe.contentDocument.close();
+	}
+}
+
+
+
+