<!doctype html> <!-- /** * Copyright(c) 2020. ATSoft Co., Ltd. All sources are freely reusable. * * @brief combobox/checkbox/image 등 HTML Control에 점자출력 속성 적용 샘플 * @detail * @version 2020-12-23 */ --> <html lang="ko"> <head> <meta charset="utf-8"/> <!-- eDotXPress HTML 라이브러리 --> <link rel="stylesheet" type="text/css" href="../css/atsoft.css"> <!-- exportBrl 함수 샘플(커스터마이징 필요) --> <script type="text/javascript" src="/EDotXPressHtml/js/edotxpress-html.min.js?t=20210308"></script> <script type="text/javascript"> <!-- // begin 점자 생성 함수 //---------------------------------------------------------------------- // 1. 현재 페이지나 특정 element를 점역하여 점자파일로 내려받는다. //---------------------------------------------------------------------- // tableId를 생략하면 현재 페이지를 점역하고 전달하면 해당 표만 점역한다. // 현재 페이지 전체는 xls로 받을 수 없고 하나의 표만 xls로 받을 수 있다. function exportBrl(fileType, fileTitle, tableId) { var docData = atsoft.edotxpress.HtmlParser.parseHtml(tableId); if (docData != null) { var invoker = new atsoft.edotxpress.EDotServerInvoker("https://demo.atsoft.kr/EDotXPressHtml/brlgen"); invoker.addParameter("tag_record", docData ); invoker.addParameter("export_type", fileType ); // btag, brl, brf, xls invoker.addParameter("export_name", fileTitle); // 확장자를 제외한 저장할 파일명 invoker.invoke(); // cf. invoker.invoke(errorCallback); } else alert(atsoft.errorManager.getErrorMsg("[brl 파일 생성 실패]")); } /* 오류 발생시 상세 메시지 대신 간단한 메시지를 출력할 경우 function errorCallback(errMgr) { var msg = errMgr.getErrorMsg("[brl 파일 생성 실패(app 재정의된 오류 메시지)]"); // cf. errMgr.getErrorCode() alert(msg); } */ //---------------------------------------------------------------------- // 2. 현재 페이지나 특정 element를 점역하여 점자뷰어로 보여준다. //---------------------------------------------------------------------- // braille_viewer.html에서 opener.docData를 사용하는데 도메인이 서로 다르면 CORS가 발생하므로 동일한 도메인에 있어야 한다. var popupWnd = null; var popupParam = {}; function openBrlViewer(fileTitle, tableId) { if (popupWnd != null) popupWnd.close(); var docData = atsoft.edotxpress.HtmlParser.parseHtml(tableId); if (docData != null) { popupParam.svrUrl = "https://demo.atsoft.kr/EDotXPressHtml/brlgen"; popupParam.docData = docData; popupParam.fileTitle = fileTitle; popupParam.enableXls = atsoft.util.misc.isEmpty(tableId) ? "false" : "true";; popupWnd = atsoft.util.window.popup("/EDotXPressHtml/html/braille_viewer.html", "eDotXPress Viewer", 900, 600, "resizable=yes, scrollbars=yes"); } else alert(atsoft.errorManager.getErrorMsg("[brl 파일 생성 실패]")); } // end 점자 생성 함수 //--> </script> <!-- function test() { var node = document.getElementById("asdf"); alert("'" + node.innerHTML + "'"); alert("'" + node.innerText + "'"); alert("'" + node.textContent + "'"); } //--> </script> </head> <body> <button onclick="openBrlViewer('eDotXPress HTML Demo')">점자뷰어 보기</button> <button onclick="exportBrl('brl', 'Text')">점자파일 내려받기</button> <!-- <button onclick="exportBrl('btag', 'Text')">디버깅파일 내려받기</button> --> <p> <!-- 1. HTML 소스파일의 엔터키 --> <strong data-brl-use="PH/H1">1. HTML 소스파일의 엔터키</strong> <p data-brl-use="PH" > 이 라인은 br태그로<br>개행됐습니다.<br> 이 라인은 잘못된 위치에서 엔터키 로 개행했습니다.<br> 이 라인은 의도하고 띄어쓰기 위치에서 엔터키로 개행했습니다. </p> <p> </p> <!-- 2. <li>태그를 이용한 개행 --> <strong data-brl-use="PH/H1">2. <li>태그를 이용한 개행</strong> <ul data-brl-use="PH"> <li><a href="view.do" target="_self">개방 </a><span>2021-01-23</span></li> <li><a href="view.do" target="_self">독서실 오픈</a><span>2021-01-16</span></li> <li><a href="view.do" target="_self">빨리 정상화가되길..</a><span>2021-01-11</span></li> <li><a href="view.do" target="_self">독서실 운영</a><span>2021-01-03</span></li> <li><a href="view.do" target="_self">12월 19일부터 이용가능한가요?</a><span>2020-12-15</span></li> </ul> <!-- 2.1 <li>태그를 이용한 개행 --> <strong data-brl-use="PH/H1">2.1 <li>태그를 이용한 개행</strong> <ul data-brl-use="PH"> <li>증명서, 내역서, 통지서, 확인서, 고지서 등의 문서를 전자적 형태의<br />점자 파일로 자동 변환하는 전자점자 생성 기술 개발</li> <li>전자점자 생성 시스템 구축</li> <li>구축 대상 : 민원정보시스템, 금융정보시스템, 의료정보시스템,<br />교육정보시스템, 구매정보시스템 등</li> </ul> <!-- 2.2 <li>태그를 이용한 개행 --> <strong data-brl-use="PH/H1">2.2 <li>태그를 이용한 개행</strong> <div data-brl-use="PH" > <ul> <li>기초 <ul> <li>PC활용 <ul> <li>컴퓨터 기초(윈도우10)</li> <li>인터넷 기초</li> </ul> </li> <li>스마트폰 <ul> <li>스마트폰기초</li> </ul> </li> </ul> </li> <li>활용 <ul> <li>PC활용 <ul> <li>인터넷 활용</li> <li>내 컴퓨터 쉽게 관리하기(윈도우10)</li> </ul> </li> <li>OA활용 <ul> <li>한글 기초(2010, NEO) /한글 활용(2010, NEO)</li> <li>파워포인트 기초(2010, 2016) / 파워포인트 활용(2010, 2016)</li> <li>엑셀 기초(2010, 2016) /엑셀 활용(2010, 2016)</li> </ul> </li> <li>스마트폰 <ul> <li>스마트폰 활용</li> <li>스마트폰 정보검색</li> <li>편리한 스마트폰 앱 활용</li> </ul> </li> </ul> </li> <li>심화 <ul> <li>UCC</li> <li>마법의 사진 편집도구 픽슬러 활용</li> <li>마법의 사진 편집도구 포토스케이프 활용</li> <li>나도 유튜버! 동영상 제작하기</li> </ul> </li> <li>최신트렌드 <ul> <li>엔트리로 시작하는 코딩</li> <li>앱인벤터로 스마트폰 앱 만들기</li> </ul> </li> <li>스마트폰 <ul> <li>스마트폰 UCC 만들기</li> <li>스마트폰을 이용한 SNS</li> <li>스마트폰 여행즐기기</li> </ul> </li> </ul> </div> <!-- 3. <dl>태그를 이용한 개행 --> <strong data-brl-use="PH/H1">3. <dl>태그를 이용한 개행</strong> <div data-brl-use="PH"> <dl > <dt>Firefox</dt> <dd> Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼 그래픽 웹 브라우저. </dd> <dd> 붉은 판다, 레서 판다, 랫서 판다, 혹은 "Firefox"는 초식성 포유류이다. 몸 길이는 애완용 고양이보다 약간 큰 정도인 60cm다. </dd> </dl> <dl> <dt>Firefox</dt> <dt>Mozilla Firefox</dt> <dt>Fx</dt> <dd> Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼 그래픽 웹 브라우저. </dd> </dl> <dl> <dt>Name</dt> <dd>Godzilla</dd> <dt>Born</dt> <dd>1952</dd> <dt>Birthplace</dt> <dd>Japan</dd> <dt>Color</dt> <dd>Green</dd> </dl> </div> <!-- 5. <dl>태그를 이용한 개행 --> <!-- <dt>에 개행을 위한 <br>이 있다. --> <strong data-brl-use="PH/H1">5. <dl>태그를 이용한 개행</strong> <div data-brl-use="PH" id="asdf"> <dl> <dt>모두를 위한<br>교육</dt> <dd>빠짐이나 넘침이 없음을 의미하며, 이를 위한 교육을 실천</dd> <dd>빈부, 도농, 계층을 넘어 고르고 투명한 교육정책을 추구</dd> <dd>사교육비가 들지 않는 무상교육을 통해 신나게 공부할 수 있는 교육환경을 마련</dd> <dd>모두를 위한 교육을 실현하는 것이 도민과의 약속이며 강원교육이 추구하는 미래상</dd> </dl> <dl class="second"> <dt>행복한<br>학교</dt> <dd>학생이 자신의 꿈을 마음껏 펼칠 수 있는 학교</dd> <dd>교사와 학생이 서로의 인권을 존중하는 학교</dd> <dd>학부모가 자녀를 믿고 맡길 수 있는 학교</dd> <dd>학생에게 희망을, 교사에게 보람을, 학부모에게 기쁨을 주는 학교</dd> </dl> <dl class="third"> <dt>함께하는<br>강원교육</dt> <dd>강원도민이 강원도교육청의 교육정책과 활동에 참여함으로써 주체임을 느낌</dd> </dl> </div> <strong data-brl-use="PH/H1">100. else</strong> <div data-brl-use="PH" > 동해물과<p>백두산이</p>마르고 닳도록<br> 동해물과<li>백두산이</li>마르고 닳도록<br> </div> <div data-brl-use="PH"> <ul> <li>Milk</li> <li>Cheese <ul> <li>Blue cheese</li> <li>Feta</li> </ul> </li> </ul> </div> </body> </html>