"; dialog.innerHTML += view; document.body.appendChild(dialog); Event.AddById("btnCloseDialog", "click", function () { 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(); this.toolsObjetByName = 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); this.toolsObjetByName[this.tools[tool]] = Tool; } } getContent() { this.clearBeforeSave(); if(this.toolsObjetByName["SourceCode"]){ if(this.toolsObjetByName["SourceCode"].activated){ this.toolsObjetByName["SourceCode"].updateArea(); } } let content = this.inputArea.innerHTML; return content; } getJSONContent(){ let content = this.getContent(); return JSON.stringify({content:content}); } getCleanContent(){ let content = this.getContent(); content = content.replace(/>/g, '>'); content = content.replace(/</g, '<'); return content; } 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); } appendLink(label, link) { let selection = window.getSelection(); let a = document.createElement("a") a.innerHTML = label; a.href = link; this.node.append(a); } appendTable(column, row){ let selection = window.getSelection(); let container = document.createElement("div"); let html = ""; for(let i = 0; i < row; i++){ html += ""; for(let j = 0; j < column; j++){ html += ""; } html += ""; } html += "

"; container.innerHTML = html; this.node.append(container); } 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 UpdateContent extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorUpdateContent"); } 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(); } }class Link extends BaseTool { getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorLink"); } setEvent(events) { this.events = events; } execute(e) { e.preventDefault(); e.stopPropagation(); let instance = this; let node = window.getSelection().anchorNode; let textValue =""; let child = false; let removeChid = false; //ON prend la div parents if(node.nodeName == "#text" ){ child = node; node = node.parentElement; if( window.getSelection().toString() != ""){ textValue = node.textContent; removeChid = true; } } instance.editor.setSelectedNode(node); let view = "

"; view += "" view += "" + Language.GetCode("Base.Label") + ""; view += ""; view += "" + Language.GetCode("Base.Link") + ""; view += ""; view += ""; view += "

"; this.editor.dialog(view, function () { Event.AddById("btnApplyLink", "click", (e) => { e.preventDefault(); let label = Form.GetValue("linkForm", "label"); let link = Form.GetValue("linkForm", "link"); if(removeChid){ console.log("On remplace"); console.log(node); let a = document.createElement("a") a.innerHTML = label; a.href = link; window.getSelection().anchorNode.appendChild(a); //instance.editor.setSelectedNode(node); //instance.editor.appendLink(label, link); } else{ instance.editor.appendLink(label, link); } TextRichEditor.removeDialog(); }); }); } }class SourceCode extends BaseTool { constructor(editor){ super(editor); this.activated = false; this.name = "SourceCode"; } getIcone() { return ""; } getName() { return Language.GetCode("Base.TextRichEditorShowSourceCode"); } 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 codeEditor = document.getElementById("codeEditor"); inputArea.innerHTML = codeEditor.value.replace(/

([\s\S]*?)<\/code>/g, function(match, p1) {
                   // Remplacer les caractères < et > dans le contenu trouvé, puis ajouter les 
 pour les sauts de ligne
                   let transformed = p1
                       .replace(/\n/g, "
"); // Remplacer les sauts de ligne par 


                   // Retourner le contenu modifié avec les balises 
                   return "" + transformed + "";
                   });;
          
            inputArea.style.display = "";
            inputArea.parentNode.removeChild(codeEditor);

        } else {
            instance.activated = true;

            let codeEditor = document.createElement("textarea");
            codeEditor.id = "codeEditor";
            codeEditor.style.width = "100%";
            codeEditor.style.height = "auto";
            codeEditor.style.minHeight = "250px";
          
            codeEditor.value = inputArea.innerHTML.replace(/([\s\S]*?)<\/code>/g, function(match, p1) {
                   // Remplacer les caractères < et > dans le contenu trouvé, puis ajouter les 
 pour les sauts de ligne
                   let transformed = p1
                       .replace(/
/g, "\n"); // Remplacer les sauts de ligne par 


                   // Retourner le contenu modifié avec les balises 
                   return "" + transformed + "";
                   });
            
            inputArea.parentNode.appendChild(codeEditor);
            inputArea.style.display = "none";
        }   

      super.execute();
    }

    updateArea(){
        let instance = this;
        let codeEditor  = document.getElementById("codeEditor");
        let inputArea = instance.editor.inputArea;
 
        inputArea.innerHTML = codeEditor.value.replace(/([\s\S]*?)<\/code>/g, function(match, p1) {
               // Remplacer les caractères < et > dans le contenu trouvé, puis ajouter les 
 pour les sauts de ligne
               let transformed = p1
                   .replace(/\n/g, "
"); // Remplacer les sauts de ligne par 


               // Retourner le contenu modifié avec les balises 
               return "" + transformed + "";
               });;
           
    } 
}class TableTool extends BaseTool {
    getIcone() {
        return "";
    }

    getName() {
        return Language.GetCode("Base.TextRichEditorTable");
    }

    setEvent(events) {
        this.events = events;
    }
    execute(e) {
        e.preventDefault();

        let imgSource = e.srcElement;
        let instance = this;
        let node = window.getSelection().anchorNode;
        instance.editor.setSelectedNode(node);
   
        let view = "";
        view += ""
        view += "" + Language.GetCode("Base.NumerColum") + "";
        view += "";

        view += "" + Language.GetCode("Base.NumerRow") + "";
        view += "";
      
        view += "";
        view += "";

        this.editor.dialog(view, function () {
            Event.AddById("btnAddTable", "click", (e) => {

                e.preventDefault();
                let column = Form.GetValue("tableForm", "column");
                let row = Form.GetValue("tableForm", "row");
                
                instance.editor.appendTable(column, row);
           
                TextRichEditor.removeDialog();
            });
        });
    }
}class Paragraph extends BaseTool {
    getIcone() {
        return "P";
    }

    getName() {
        return Language.GetCode("Base.TextRichEditorParagraph");
    }
    execute(e) {
        e.preventDefault();
        this.applyStyle("p");
        super.execute();
    }
}class HtmlToCode extends BaseTool {

    constructor(editor){
        super(editor);
        this.activated = false;
        this.name = "HtmlToCode";
    }

    getIcone() {
        return "";
    }

    getName() {
        return Language.GetCode("Base.TextRichEditorShowSourceCode");
    }
    execute(e) {
        
        let instance = this;
        let inputArea = instance.editor.inputArea;
        let codeEditor = document.querySelector("#codeEditor");
        let updatedCode  ="";
        
        if(codeEditor.value.indexOf(":lt") < 0 ){
     
            updatedCode = codeEditor.value.replace(/([\s\S]*?)<\/codehtml>/g, function(match, p1) {
                   // Remplacer les caractères < et > dans le contenu trouvé, puis ajouter les 
 pour les sauts de ligne
                   let transformed = p1
                       .replace(//g, ":gt:")   // Remplacer > par >
                       .replace(/'/g, ":q")
                       .replace(/{/g, ":#123;")// Remplacer < par <
                       .replace(/}/g, ":#125;")// Remplacer < par <
                       
                        .replace(/\n/g, ":br:"); // Remplacer les sauts de ligne par 


                   // Retourner le contenu modifié avec les balises 
                   return "" + transformed + "";
                   });
        } else{
   
    updatedCode = codeEditor.value.replace(/([\s\S]*?)<\/codehtml>/g, function(match, p1) {
                   // Remplacer les caractères < et > dans le contenu trouvé, puis ajouter les 
 pour les sauts de ligne
                   let transformed = p1
                       .replace(/:lt:/g, "<")   // Remplacer < par <
                       .replace(/:gt:/g, ">")   // Remplacer > par >
                       .replace(/:q/g, "'")   // Remplacer < par <
                        .replace(/:#123;/g, "{")// Remplacer < par <
                 .replace(/:#125;/g, "}")// Remplacer < par <
                           
                .replace(/:br:/g, "\n"); // Remplacer les sauts de ligne par 


                   // Retourner le contenu modifié avec les balises 
                   return "" + transformed + "";
                   });
   
   
        }
        
        codeEditor.value = updatedCode;
        
      super.execute();
    }
}var Apps = ['Cms','EeApp','Lang','Ide','PuzzJect','PuzzSite','Notes','Blog','Annonce','Profil','Message','Sitemap','Seo','Shop','Applications','PuzzProject','Forms','Extensions','Carousel','UseCase','Calendar','Mooc','Crm','BugTracker','Notify','WorkFlow',];