"; dialog.innerHTML += view; document.body.appendChild(dialog); Event.AddById("btnCloseDialog", "click", function () { TextRichEditor.removeDialog(); }); document.addEventListener("click", TextRichEditor.removeDialog); if (initHandler) { initHandler(); } } } static removeDialog(e) { let instance = this; if (e == undefined || (e.srcElement.tagName != "IMG" && e.srcElement.parentNode.parentNode.parentNode.id != "TextRidhEditorDialog")) { document.removeEventListener("click", TextRichEditor.removeDialog); let TextRidhEditorDialog = document.getElementById("TextRidhEditorDialog"); TextRidhEditorDialog.parentNode.removeChild(TextRidhEditorDialog); } } inputAreaChanged() { if (this.sourceControlType == "DIV") { this.sourceControl.innerHTML = this.inputArea.innerHTML; } else { this.sourceControl.value = this.inputArea.innerHTML; } } createEditor() { this.editor = document.createElement("div"); this.editor.className = "txtEditor"; this.createToolBar(); this.createInputArea(); this.sourceControl.parentNode.prepend(this.editor); } createToolBar() { this.toolBar = document.createElement("div"); this.toolBar.className = 'toolBar'; this.appendTools(); this.editor.append(this.toolBar); } createInputArea() { this.inputArea = document.createElement("div"); this.inputArea.className = "inputArea"; this.inputArea.setAttribute("contenteditable", "true"); this.editor.append(this.inputArea); } appendTools() { this.toolsObject = Array(); for (let tool in this.tools) { let Tool = eval('new ' + this.tools[tool] + '(this)'); for (let event in this.events) { if (this.events[event]["tool"] == this.tools[tool]) { Tool.setEvent(this.events[event]["events"]) } } this.toolBar.append(Tool.getIconeContainer()); this.toolsObject.push(Tool); } } getContent() { this.clearBeforeSave(); return this.inputArea.innerHTML; } setSelectedNode(node) { this.node = node; } appendImage(imgSrc, width) { let selection = window.getSelection(); let image = document.createElement("img") image.src = imgSrc; image.style.width = width + "px"; this.node.append(image); } clearBeforeSave() { for (let tools in this.toolsObject) { if (this.toolsObject[tools].name == "ShowBlock") { if (this.toolsObject[tools].activated) { this.toolsObject[tools].execute(); } } } } quit() { this.inputAreaChanged(); this.editor.parentNode.removeChild(this.editor); this.sourceControl.style.display = ""; } }; class BaseTool { constructor(editor) { this.container = document.createElement("div"); this.container.innerHTML = this.getIcone(); this.container.title = this.getName(); this.editor = editor; this.name = ""; let instance = this; this.container.addEventListener("mousedown", (e) => { instance.execute(e); }); } getIconeContainer() { return this.container; } findParentWithTag(node, tagName) { while (node && node !== document) { if (node.nodeName === tagName.toUpperCase()) { return node; } node = node.parentNode; } return null; } applyStyle(balise) { const selection = window.getSelection(); if (!selection.rangeCount) return; const range = selection.getRangeAt(0); const selectedText = range.extractContents(); //const balise = 'strong'; // Exemple: 'strong' const parentWithTag = this.findParentWithTag(selection.anchorNode, balise); let newNode; if (parentWithTag) { // Si un parent avec la balise spécifiée est trouvé, retirer cette balise en replaçant son contenu newNode = document.createDocumentFragment(); // Créer un fragment pour contenir le texte newNode.appendChild(selectedText); // Ajouter le texte sélectionné au fragment parentWithTag.parentNode.replaceChild(newNode, parentWithTag); // Remplacer la balise par le fragment } else { // Si la balise n'est pas trouvée, appliquer la balise au texte sélectionné newNode = document.createElement(balise); newNode.appendChild(selectedText); range.insertNode(newNode); } // Nettoyer et réinitialiser la sélection pour englober le nouveau noeud selection.removeAllRanges(); const newRange = document.createRange(); newRange.selectNodeContents(newNode); selection.addRange(newRange); return newNode; } addStyle(style, value) { const selection = window.getSelection(); if (!selection.rangeCount) return; if (selection.anchorNode.parentNode.tagName == "DIV") { let newNode = this.applyStyle("span"); newNode.style[style] = value; return newNode; } else { selection.anchorNode.parentNode.style[style] = value; return selection.anchorNode.parentNode; } } setEvent(events) { this.events = events; } execute(){ this.editor.inputAreaChanged(); } } class Bold extends BaseTool { getIcone() { return "B"; } getName() { return Language.GetCode("Base.TextRichEditorBold"); } execute(e) { e.preventDefault(); this.applyStyle("B"); super.execute(); } } class Italic extends BaseTool { getIcone() { return "I"; } getName() { return Language.GetCode("Base.TextRichEditorBoldItalic"); } execute(e) { e.preventDefault(); this.applyStyle("i"); super.execute(); } } class H1 extends BaseTool { getIcone() { return "H1"; } getName() { return Language.GetCode("Base.TextRichEditorH1"); } execute(e) { e.preventDefault(); this.applyStyle("h1"); super.execute(); } } class H2 extends BaseTool { getIcone() { return "H2"; } getName() { return Language.GetCode("Base.TextRichEditorH2"); } execute(e) { e.preventDefault(); this.applyStyle("h2"); super.execute(); } } class H3 extends BaseTool { getIcone() { return "H3"; } getName() { return Language.GetCode("Base.TextRichEditorH3"); } execute(e) { e.preventDefault(); this.applyStyle("h3"); super.execute(); } }class Underline extends BaseTool { getIcone() { return "u"; } getName() { return Language.GetCode("Base.TextRichEditorUndeline"); } execute(e) { e.preventDefault(); this.applyStyle("u"); super.execute(); } } class Stroke extends BaseTool { getIcone() { return "S"; } getName() { return Language.GetCode("Base.TextRichEditorStroke"); } execute(e) { e.preventDefault(); this.applyStyle("s"); super.execute(); } } class List extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorList"); } execute(e) { e.preventDefault(); const selectedText = window.getSelection().toString(); let newNode = this.applyStyle("ul"); newNode.innerHTML = ""; const li = document.createElement('li'); li.innerHTML = selectedText; newNode.appendChild(li); super.execute(); } } class FontSize extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorFonSize"); } execute(e) { let instance = this; this.select = this.container.querySelector("select"); this.select.addEventListener("change", (e) => { let value = e.srcElement.value; instance.addStyle("fontSize", value + "px"); super.execute(); }); } } class FontColor extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorFontColor"); } execute(e) { let instance = this; this.select = this.container.querySelector("select"); this.select.addEventListener("change", (e) => { let value = e.srcElement.value; instance.addStyle("color", value); super.execute(); }); } } class BackgroundColor extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorBackGroundColor"); } execute(e) { let instance = this; this.select = this.container.querySelector("select"); this.select.addEventListener("change", (e) => { let value = e.srcElement.value; instance.addStyle("backgroundColor", value); super.execute(); }); } } class AlignLeft extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorAlignLeft"); } execute(e) { let instance = this; let newNode = instance.addStyle("textAlign", "left"); newNode.style.width = "100%"; newNode.style.display = "inline-block"; super.execute(); } } class AlignCenter extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorAlignCenter"); } execute(e) { let instance = this; let newNode = instance.addStyle("textAlign", "center"); newNode.style.width = "100%"; newNode.style.display = "inline-block"; super.execute(); } } class AlignRight extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorAlignRight"); } execute(e) { let instance = this; let newNode = instance.addStyle("textAlign", "right"); newNode.style.width = "100%"; newNode.style.display = "inline-block"; super.execute(); } } class ImageTool extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorImage"); } setEvent(events) { this.events = events; } execute(e) { e.preventDefault(); for (let event in this.events) { if (this.events[event]["type"] == e.type) { let node = window.getSelection().anchorNode; this.events[event]['handler'](this.editor, node); } } } } class SaveContent extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorSaveContent"); } execute(e) { this.editor.clearBeforeSave(); for (let event in this.events) { if (this.events[event]["type"] == e.type) { this.events[event]['handler'](this.editor); } } } } class ShowBlock extends BaseTool { constructor(editor){ super(editor); this.activated = false; this.name = "ShowBlock"; } getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorShowBlock"); } execute(e) { let instance = this; let inputArea = instance.editor.inputArea; let elements = inputArea.querySelectorAll("div,h1,h2,h3, p, img"); if(instance.activated){ instance.activated = false; let infoDiv = document.querySelectorAll(".detailBlock.infoDiv"); for(let i =0; i < infoDiv.length; i++){ infoDiv[i].parentNode.removeChild(infoDiv[i]); } } else { instance.activated = true; } for(let i =0 ; i < elements.length; i++){ if(instance.activated == false){ elements[i].classList.remove("detailBlock"); } else { elements[i].classList.add("detailBlock"); let infoDiv = document.createElement("div"); infoDiv.innerHTML = elements[i].tagName; infoDiv.className = "detailBlock infoDiv"; elements[i].prepend(infoDiv); } } super.execute(); } }var Apps = ['EeApp','Lang','Swcf','SwcfApi','Stat','Cms','Seo','Users','Product','Proposition','Discuss','Blog','Tips','Shop',];