모나코 에디터 기능 초석 쌓기

route/setting.py

@@ -328,7 +328,7 @@ def setting_2(conn, num, db_set):
                         <hr class="main_hr">
                         <button id="save" type="submit">''' + load_lang('save') + '''</button>
                         <hr class="main_hr">
-                        <ul>
+                        <ul id="footnote_data">
                             <li><a href="#fn-1" id="rfn-1">(1)</a> <span>''' + load_lang('approval_question_visible_only_when_approval_on') + '''</span></li>
                         </ul>
                     </form>

route/tool/func.py

@@ -554,7 +554,7 @@ def next_fix(link, num, page, end = 50):
 
 def other2(data):
     global req_list
-    main_css_ver = '56'
+    main_css_ver = '57'
     data += ['' for _ in range(0, 3 - len(data))]
 
     if req_list == '':

views/main_css/js/do_editor.js → views/main_css/js/load_editor.js

@@ -48,17 +48,17 @@ function do_paste_image() {
 
 function pasteListener(e) {
     // find file
-    if (e.clipboardData && e.clipboardData.items) {
+    if(e.clipboardData && e.clipboardData.items) {
         const items = e.clipboardData.items;
         let haveImageInClipboard = false;
         const formData = new FormData();
-        for (let i = 0; i < items.length; i++) {
+        for(let i = 0; i < items.length; i++) {
             if (items[i].type.indexOf("image") !== -1) {
                 const file = items[i].getAsFile();
-                const customName = prompt("파일 이름을 설정해주세요. (확장자는 생략)");
+                const customName = prompt("파일 이름 (확장자 제외)");
                 
                 if (!customName) {
-                    return alert("취소되었습니다.");
+                    return alert("파일 이름 없음");
                 }
                 
                 const customFile = new File([file], customName + ".png", { type: file.type });
@@ -69,7 +69,7 @@ function pasteListener(e) {
                 break;
             }
         }
-        if (!haveImageInClipboard) {
+        if(!haveImageInClipboard) {
             return;
         }
 
@@ -81,22 +81,50 @@ function pasteListener(e) {
             if (res.status === 200 || res.status === 201) {
                 const url = res.url;
                 alert(
-                    '클립보드의 이미지를 성공적으로 업로드했습니다. 아래 텍스트로 본문에 삽입할 수 있습니다. ' +
+                    '업로드 완료 : ' +
                     '[[' + decodeURIComponent(url.replace(/.*\/w\/file/, "file")) + ']]'
                 );
             } else {
                 console.error("[ERROR] PasteUpload Fail :", res.statusText);
                 if(res.status === 400) {
-                    alert("클립보드의 이미지를 업로드하는데 실패했습니다. 파일 이름 중복일 수 있습니다.");
+                    alert("파일 이름 중복");
                 } else if(res.status === 401) {
-                    alert("클립보드의 이미지를 업로드하는데 실패했습니다. 권한 부족일 수 있습니다.");    
+                    alert("권한 부족");    
                 } else {
-                    alert("클립보드의 이미지를 업로드하는데 실패했습니다.");        
+                    alert("업로드 실패");        
                 }
             }
         }).catch((err) => {
-            console.error("[ERROR] PasteUpload Fail :", JSON.stringify(err), err);
-            alert("클립보드의 이미지를 업로드하는데 실패했습니다. 서버가 응답하지 않습니다.");
+            console.error("오류 내역 :", JSON.stringify(err), err);
+            alert("업로드 실패");
         });
     }
+}
+
+function load_preview(name) {
+    var s_data = new FormData();
+    s_data.append('data', document.getElementById('content').value);
+
+    var url = "/api/w/" + name;
+    var url_2 = "/api/markup";
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", url, true);
+    xhr.send(s_data);
+
+    var xhr_2 = new XMLHttpRequest();
+    xhr_2.open("GET", url_2, true);
+    xhr_2.send(null);
+
+    xhr.onreadystatechange = function() {
+        if(xhr.readyState === 4 && xhr.status === 200) {
+            var o_p_data = JSON.parse(xhr.responseText);
+            document.getElementById('see_preview').innerHTML = o_p_data['data'];
+            eval(o_p_data['js_data'])
+        }
+    }
+}
+
+function load_raw_preview(name_1, name_2) {
+    document.getElementById(name_2).innerHTML = document.getElementById(name_1).value;
 }

views/main_css/js/load_preview.js

@@ -1,27 +0,0 @@
-function load_preview(name) {
-    var s_data = new FormData();
-    s_data.append('data', document.getElementById('content').value);
-
-    var url = "/api/w/" + name;
-    var url_2 = "/api/markup";
-
-    var xhr = new XMLHttpRequest();
-    xhr.open("POST", url, true);
-    xhr.send(s_data);
-
-    var xhr_2 = new XMLHttpRequest();
-    xhr_2.open("GET", url_2, true);
-    xhr_2.send(null);
-
-    xhr.onreadystatechange = function() {
-        if(xhr.readyState === 4 && xhr.status === 200) {
-            var o_p_data = JSON.parse(xhr.responseText);
-            document.getElementById('see_preview').innerHTML = o_p_data['data'];
-            eval(o_p_data['js_data'])
-        }
-    }
-}
-
-function load_raw_preview(name_1, name_2) {
-    document.getElementById(name_2).innerHTML = document.getElementById(name_1).value;
-}

views/main_css/js/load_skin_set.js

@@ -74,6 +74,13 @@ function main_css_get_post() {
         document.cookie = 'main_css_font_size=;';
     }
 
+    check = document.getElementById('main_css_monaco');
+    if(check.checked) {
+        document.cookie = 'main_css_monaco=1;';
+    } else {
+        document.cookie = 'main_css_monaco=0;';
+    }
+
     history.go(0);
 }
 
@@ -156,7 +163,13 @@ function main_css_load_lang(name) {
             "all_off" : "Always off",
             "set_font_size" : "Set font size",
             "change_to_link" : "Change to link",
-            "font_size" : "font size"
+            "font_size" : "font size",
+            "editor" : "Editor",
+            "main" : "Main",
+            "clipboard_upload" : "Clipboard upload",
+            "only_korean" : "Supported in korean only",
+            "except_ie" : "Not supported for Internet Explorer",
+            "use_monaco" : "Use monaco editor"
         }, "ko-KR" : {
             "default" : "기본값",
             "change_to_normal" : "일반 텍스트로 변경",
@@ -179,7 +192,13 @@ function main_css_load_lang(name) {
             "all_off" : "항상 끔",
             "set_font_size" : "글자 크기 설정",
             "change_to_link" : "링크로 변경",
-            "font_size" : "글자 크기"
+            "font_size" : "글자 크기",
+            "editor" : "편집기",
+            "main" : "메인",
+            "clipboard_upload" : "클립보드 파일 올리기",
+            "only_korean" : "한국어로만 지원됨",
+            "except_ie" : "인터넷 익스플로러에선 지원되지 않음",
+            "use_monaco" : "모나코 에디터 사용"
         }
     }
 
@@ -346,6 +365,15 @@ function main_css_skin_set() {
         set_data["font_size"] = '';
     }
 
+    if(
+        document.cookie.match(main_css_regex_data('main_css_monaco')) &&
+        document.cookie.match(main_css_regex_data('main_css_monaco'))[1] === '1'
+    ) {
+        set_data["monaco"] = "checked";
+    } else {
+        set_data["monaco"] = "";
+    }
+
     document.getElementById("main_skin_set").innerHTML = ' \
         <h2>1. ' + main_css_load_lang('renderer') + '</h2> \
         <h3>1.1. ' + main_css_load_lang('strike') + '</h3> \
@@ -370,15 +398,84 @@ function main_css_skin_set() {
         </select> \
         <h3>1.6. ' + main_css_load_lang('other') + '</h3> \
         <input ' + set_data["include"] + ' type="checkbox" id="main_css_include" value="include"> ' + main_css_load_lang('include_link') + ' \
-        <hr class="main_hr"> \
-        <input ' + set_data["image_paste"] + ' type="checkbox" id="main_css_image_paste" value="image_paste"> 클립보드 이미지 업로드 (ko-KR) \
         <h3>1.7. ' + main_css_load_lang('set_toc') + '</h3> \
         <select id="main_css_toc"> \
             ' + set_data["toc"] + ' \
         </select> \
         <h3>1.8. ' + main_css_load_lang('set_font_size') + '</h3> \
-        <input id="main_css_font_size" placeholder="' + main_css_load_lang('font_size') + '" value="' + set_data["font_size"] + '"> \
+        <input id="main_css_font_size" placeholder="' + main_css_load_lang('font_size') + ' (EX : 11)" value="' + set_data["font_size"] + '"> \
+        <h2>2. ' + main_css_load_lang('editor') + '</h2> \
+        <h3>2.1. ' + main_css_load_lang('main') + '</h3> \
+        <input ' + set_data["monaco"] + ' type="checkbox" id="main_css_monaco" value="monaco"> ' + main_css_load_lang('use_monaco') + '<sup>(1)</sup> \
+        <hr class="main_hr"> \
+        <input ' + set_data["image_paste"] + ' type="checkbox" id="main_css_image_paste" value="image_paste"> ' + 
+            main_css_load_lang('clipboard_upload') + '<sup>(ko-KR)</sup><sup>(1)</sup> \
         <hr class="main_hr"> \
         <button onclick="main_css_get_post();">' + main_css_load_lang('save') + '</button> \
+        <hr class="main_hr"> \
+        <ul id="footnote_data"> \
+            <li><a id="note_1_end" href="#note_1">(1)</a> ' + main_css_load_lang('except_ie') + '</li> \
+            <li><a href="#note_1_1">(1.1)</a></li> \
+            <li><a id="note_2_end" href="#note_2">(ko-KR)</a> ' + main_css_load_lang('only_korean') + '</li> \
+        </ul> \
     ';
+
+    // 목차 구현
+    var toc_all_data = '<div id="toc"><span id="toc_title">TOC</span><br>';
+    var skin_set_data = document.getElementById("main_skin_set").innerHTML;
+    var split_toc;
+    var toc_data;
+    i = 1;
+    while(1) {
+        toc_data = skin_set_data.match(/<h[1-6]>([^<>]+)<\/h[1-6]>/);
+        if(toc_data) {
+            split_toc = toc_data[1].match(/^([^ ]+)(.+)/);
+            toc_all_data += '' + 
+                '<br>' +
+                '<span style="margin-left: ' + String(((toc_data[1].match(/\./g) || []).length - 1) * 10) + 'px;">' +
+                    '<a href="#toc_' + String(i) + '">' + split_toc[1] + '</a>' + split_toc[2] +
+                '</span>' +
+            '';
+
+            skin_set_data = skin_set_data.replace(
+                /<(h[1-6])>([^<>]+)<\/h[1-6]>/, 
+                '<$1 id="toc_' + String(i) + '"><a href="#toc">' + split_toc[1] + '</a>' + split_toc[2] + '</$1>'
+            );
+            i += 1;
+        } else {
+            break;
+        }
+    }
+    document.getElementById("main_skin_set").innerHTML = toc_all_data + '</div>' + skin_set_data;
+
+    // 각주 구현
+    skin_set_data = document.getElementById("main_skin_set").innerHTML;
+    var note_list = {};
+    var plus_note;
+    i = 1;
+    while(1) {
+        toc_data = skin_set_data.match(/<sup>([^<>]+)<\/sup>/);
+        if(toc_data) {
+            if(!note_list[toc_data[1]]) {
+                note_list[toc_data[1]] = [String(i), 0];
+            } else {
+                note_list[toc_data[1]][1] += 1;
+            }
+
+            if(note_list[toc_data[1]][1] != 0) {
+                plus_note = '_' + String(note_list[toc_data[1]][1]);
+            } else {
+                plus_note = '';
+            }
+            
+            skin_set_data = skin_set_data.replace(
+                /<sup>([^<>]+)<\/sup>/, 
+                '<sup><a id="note_' + note_list[toc_data[1]][0] + plus_note + '" href="#note_' + note_list[toc_data[1]][0] + '_end">$1</a></sup>'
+            );
+            i += 1;
+        } else {
+            break;
+        }
+    }
+    document.getElementById("main_skin_set").innerHTML = skin_set_data;    
 }