its-op-server/src/main/resources/static/application/op/06.vms/03.form/parse.js

function htmlEditor() {
    const fontArr = []
    for(var ii = 9; ii < 41; ii++){
        fontArr.push(ii+'pt')
    }

          $('.htmlEditor').dxHtmlEditor({
              onContentReady: function(e) {
                e.component.format("font", "맑은고딕");
                e.component.format("size", "18pt");
                e.component.format("color", "springgreen");
                e.component.getQuillInstance().blur();
                e.component.getQuillInstance().focus();
              },
              toolbar: {
                  items: [
                    'alignLeft', 'alignCenter','alignRight',
                    'separator',
                    ,
                    {
                      name: 'font',
                      acceptedValues: ['맑은고딕','굴림체', '궁서체', '돋움체', '바탕체'],
                      options: {
                        //value:'맑은 고딕',
                        //width: 170
                      },
                    },
                    'separator',
                    {
                      name: 'color',
                      acceptedValues: ['red', 'springgreen','yellow'],
                      options: {
                        //value:"springgreen",
                        //width: 170,
                        // icon: "color"
                      }
                    },
                    'separator',     
                    {
                      name: 'size',
                      acceptedValues: fontArr,
                      options: {
                        //value:"18pt",
                        //width: 170,
                      }
                    },
                    'separator',
                    'bold' 
                    
                  ],
                  //container: ".htmlToolBar"
              },
              onValueChanged(e) {
                    let color  = $(".dx-htmleditor-content").find("span").css("color")
                    if(color == null) {
                            e.component.format("font", "맑은고딕");
                            e.component.format("size", "18pt");
                            e.component.format("color", "springgreen");
                            e.component.getQuillInstance().blur();
                            e.component.getQuillInstance().focus();
                    }

                    $('.value-content').text(e.component.option('value'));
                    let htmlTextVal = $('.value-content').text()
                    parsHtml(htmlTextVal)
              },
          })
}

function parsHtml(htmlTextVal) {
    // 돋움 : Dotum
    // 돋움체 : DotumChe
    // 굴림 : Gulim
    // 굴림체 : GulimChe
    // 바탕 : Batang
    // 바탕체 : BatangChe
    // 궁서 : Gungsuh
    // 궁서체 : GungsuhChe
    // 새굴림: New Gulim
    // 맑은 고딕 : Malgun Gothic, ==> Default Font

    const fontNameMap = new Map();
    fontNameMap.set("맑은 고딕", 1);
    fontNameMap.set("HY견명조", 2);
    fontNameMap.set("굴림체", 3);
    fontNameMap.set("궁서체", 4);
    fontNameMap.set("돋움체", 5);
    fontNameMap.set("바탕체", 6);

    const fontCodeMap = new Map();
    fontCodeMap.set(1, "맑은 고딕");
    fontCodeMap.set(2, "HY견명조");
    fontCodeMap.set(3, "굴림체");
    fontCodeMap.set(4, "궁서체");
    fontCodeMap.set(5, "돋움체");
    fontCodeMap.set(6, "바탕체");

    class Text {
        constructor(name, size, color, bold, width, height, htmlText, text) {
            this.name = name;
            this.size = size;
            this.color = color;
            this.bold = bold;
            this.width = width;
            this.height = height;
            this.htmlText = htmlText;
            this.text = text;
            this.x = 0;
            this.y = 0;
        }
    }
    class Line {
        constructor(align) {
            this.align = align;
            this.width = 0;
            this.height = 0;
            this.texts = new Array();
        }
    }
    class Form {
        constructor(color, width, height) {
            this.color = color;
            this.width = width;
            this.height = height;
            this.textHeight = 0;
            this.lines = new Array();
        }
    }

    // Map 으로 저장해서 처리하는 것으로 수정하는 것이 좋음.
    function getTextAlignFromData(align) {
        //(0:left, 1:right, 2:center
        if (align === "center") {
            return 2;
        }
        if (align === "right") {
            return 1;
        }
        return 0;
    }
    function getTextAlignFromCode(align) {
        //(0:left, 1:right, 2:center
        if (align === 2) {
            return "center";
        }
        if (align === 1) {
            return "right";
        }
        return "left";
    }

    var $log = $("#log");
    var str = "";
    // str += '<p style="text-align: center;">';
    // str += '   <strong style="color: rgb(255, 0, 0); font-size: 18pt; font-family: 맑은 고딕;">맑은 고딕</strong>';
    // str += '   <strong style="color: rgb(0, 255, 0); font-size: 18pt; font-family: 맑은 고딕;">굴림체</strong>';
    // str += '   <strong style="color: rgb(0, 0, 255); font-size: 18pt; font-family: 맑은 고딕;">HY견명조</strong></p>';
    // str += '<p style="text-align: center;">';
    // str += '   <strong style="color: rgb(255, 0, 0); font-size: 18pt; font-family: 궁서체;">궁서체</strong>';
    // str += '   <strong style="color: rgb(0, 255, 0); font-size: 18pt; font-family: 궁서체;">돋움체</strong>';
    // str += '   <strong style="color: rgb(0, 0, 255); font-size: 18pt; font-family: 궁서체;">바탕체</strong></p>';
    // str += '<p style="text-align: left;">';
    // str += '   <strong style="color: rgb(255, 0, 0); font-size: 18pt; font-family: 맑은 고딕;">맑은 afdsa 고딕</strong>';
    // str += '   <strong style="color: rgb(0, 255, 0); font-size: 18pt; font-family: 굴림체;">굴림체</strong>';
    // str += '   <strong style="color: rgb(0, 0, 255); font-size: 18pt; font-family: HY견명조;">HY견명조</strong></p>';
    // str += '<p style="text-align: right;">';
    // str += '   <strong style="color: rgb(255, 0, 0); font-size: 18pt; font-family: 궁서체;">궁서체</strong>';
    // str += '   <strong style="color: rgb(0, 255, 0); font-size: 18pt; font-family: 돋움체;">돋움체</strong>';
    // str += '   <strong style="color: rgb(0, 0, 255); font-size: 18pt; font-family: 바탕체;">바탕체</strong></p>';

    str = htmlTextVal;
    // '<p style="text-align: left;"><span style="color: red; font-size: 12pt;">동해물과 백두산이</span> <span style="font-family: 굴림체; color: springgreen; font-size: 12pt;">마르고 닳도록</span></p><p style="text-align: right;"><span style="font-family: 궁서체; font-size: 12pt; color: yellow;">하나님이 보우하사</span> <span style="font-family: 돋움체; font-size: 12pt; color: red;">우리나라 만세</span></p>';
    //    '<p><span style="color: red; font-family: 나눔고딕;">기본폰트 </span><span style="font-family: Sunflower; color: springgreen;">나눔고딕 </span><span style="font-family: 나눔명조;">나눔명조</span></p><p><span style="font-family: 나눔고딕;">썬플라워</span> <span style="font-family: 나눔고딕;">햄릿</span><span style="font-family: Hahmlet;">  </span><span style="font-family: 나눔고딕;">노토산즈</span></p><p><br></p>';
    var html = $.parseHTML(str);
    var nodeNames = [];

    let line = 0;

    ////console.log("=====================================================");

    // HTML TAG Parsing....................
    const el = document.createElement("html");
    el.innerHTML = str;
    const pTags = el.getElementsByTagName("p");
    //console.log(el);
    //console.log(pTags);

    const objForm = new Form("rgb(0,0,0)", 384, 64);

    for (let ii = 0; ii < pTags.length; ii++) {
        const p = pTags[ii];
        const textAlign = getTextAlignFromData(p.style.textAlign);
        const children = p.children;
        //console.log("----------------------------------------------------------------");
        if (children.length == 0) {
            console.warn("object not found....");
            continue;
        }
        const objLine = new Line(textAlign);
        for (let jj = 0; jj < children.length; jj++) {
            const obj = children[jj];
            const fontName = obj.style.fontFamily;
            const fontSize = Number(obj.style.fontSize.replace("pt", "").replace("px", ""));
            const fontBold = obj.nodeName === "STRONG" ? true : obj.style.fontWeight === "bold";
            let fontColor = obj.style.color.replaceAll(" ", "");
            if (fontColor === "") {
                fontColor = "rgb(0,0,0)";
            }
            const htmlText = obj.innerText;
            const text = htmlText.trim();
            const result = getTextInfo(fontName, fontSize, fontBold, htmlText);
            const textWidth = result.width;
            const textHeight = result.height;
            objLine.width += textWidth;
            if (textHeight > objLine.height) {
                objLine.height = textHeight;
            }

            const objText = new Text(fontName, fontSize, fontColor, fontBold, textWidth, textHeight, htmlText, text);
            objLine.texts.push(objText);

            //console.log(
            //     `line ${line}, objects ${jj}, font-Name: ${fontName}, bold: ${fontBold}, size: ${fontSize}, color: ${fontColor}, text: ${text}, [${htmlText}], text-height: ${textHeight}, text-width: ${textWidth}`
            // );
        }
        //console.log(
        //     `line ${line}, objects: [${children.length}], text-align: [${textAlign}]${getTextAlignFromCode(textAlign)}, line-width: ${objLine.width}, line-height: ${
        //         objLine.height
        //     }`
        // );
        objForm.textHeight += objLine.height;
        objForm.lines.push(objLine);
        line++;
    }

    // 텍스트 위치 계산
    let textTop = objForm.height - objForm.textHeight;
    if (textTop <= 0) {
        textTop = 0;
    } else {
        textTop /= 2;
    }
    objForm.lines.forEach((line, idx) => {
        let left = 0; // left
        if (line.align == 1) {
            // right
            left = objForm.width - line.width;
            if (left <= 0) {
                left = 0;
            }
        } else if (line.align == 2) {
            // center
            left = objForm.width - line.width;
            if (left <= 0) {
                left = 0;
            } else {
                left /= 2;
            }
        }
        line.texts.forEach((text, seq) => {
            text.x = left;
            text.y = textTop + (line.height - text.height);
            left += text.width;
        });
        textTop += line.height;
    });
    //console.log(objForm);
    // 미리보기 폼을 캔버스에 그린다.
    drawPreviewForm(objForm);

    $log.html(html);
    //$("#previewCanvas").append("<h3>Preview:</h3>");
    // $log.append("<h3>Preview:</h3>");

    function getTextInfo2(fontName, fontSize, fontBold, htmlText) {
        var text = document.createElement("span");
        document.body.appendChild(text);

        //text.style.backgroundColor = "#FF0000";
        //text.style.lineHeight = "100%";
        text.style.border = "none";
        text.style.margin = "0px";
        text.style.padding = "0px";
        text.style.font = fontName;
        if (fontBold) {
            text.style.fontWeight = "bold";
        }
        text.style.fontFamily = fontName;
        text.style.fontSize = fontSize + "pt";
        text.style.height = "auto";
        text.style.width = "auto";
        text.style.position = "absolute";
        text.style.whiteSpace = "pre"; //"nowrap";
        text.innerHTML = htmlText;
        ////console.log("getTextInfo: ", text.getBoundingClientRect());
        const width = Math.ceil(text.clientWidth);
        const height = Math.ceil(text.clientHeight);
        document.body.removeChild(text);
        //console.log("getTextInfo: ", width, height);
        return {
            width: width,
            height: height,
        };
    }

    function getTextInfo(fontName, fontSize, fontBold, htmlText) {
        const canvas = document.getElementById("previewCanvas");
        const ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        const bold = fontBold ? "bold" : "";
        ctx.font = `${bold} ${fontSize}pt ${fontName}`;
        ctx.textBaseline = "hanging";
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.fillText(htmlText, 0, 0);
        const metrics = ctx.measureText(htmlText);
        const textWidth = metrics.width;
        const fontHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
        const actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
        //console.log(metrics);
        // //console.log(fontHeight, actualHeight);
        const width = Math.ceil(textWidth);
        const height = Math.ceil(fontHeight);
        return {
            width: width,
            height: height,
        };
    }

    function drawPreviewForm(form) {
        const canvas = document.getElementById("previewCanvas");
        const ctx = canvas.getContext("2d");
        ctx.fillStyle = form.color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        form.lines.forEach((line, idx) => {
            line.texts.forEach((text, seq) => {
                const bold = text.bold ? "bold" : "";
                ctx.font = `${bold} ${text.size}pt ${text.name}`;
                ctx.textBaseline = "hanging";
                ctx.fillStyle = text.color;
                ctx.fillText(text.text, text.x, text.y);
            });
        });
    }
}