비교적 거칠고 단순합니다. 관심있는 학생들은 살펴보시면 됩니다. 주요 내용을 올려보겠습니다: 첫번째 ppt의 주요 내용입니다. 구체적인 내용은 많이 올리지 않겠습니다. 이런 부분에 관심이 있는 학생들은 다운받아서 살펴보시면 됩니다. 예시로 에디터 기반의 ppt이므로 execCommand 명령어를 사용하여 간단한 데모도 첨부하겠습니다. 편집기의 원리는 데모에서 볼 수 있습니다. 여기에 첨부된 코드는 코드를 복사하세요. 코드는 다음과 같습니다. 너비: 500px; <BR>.bar { <BR>여백-하단: 8px; <BR>} <BR>.con { <BR>테두리: 2px 솔리드 #ccc;} <BR>.block { <BR>오버플로: 숨겨진; <BR> 높이: <BR>} <BR>float: 왼쪽 <BR>여백: 6px; <BR>높이 : 20px; <BR>폭: 20px; <BR>텍스트 정렬: <BR>글꼴 크기: 14px; <BR>글꼴 무게: <BR> 🎜> <BR>var Class = { <BR>create: function () { <BR>반환 함수 () { <BR>this.init.apply(this, 인수) <BR>} <BR>} <BR>}, <BR>H$ = function(i) {return document.getElementById(i)}, <BR>$CE = function() { <BR>var div = document.createElement('div'); <BR>return function(html) { <BR>div.innerHTML = <BR>var el = div; .childNodes[0] ; <BR>div.removeChild(el); <BR>return el; <BR>} <BR>} () <BR>Editor = Class.create(); 프로토타입 = { <BR>init : function(id) { <BR>var c = [] <BR>c[0] = ['bold', 'B'] <BR>c[1] = [' italic', 'I']; <BR>this.t = H$(id); <BR>this.t.style['display'] = 'none' <BR>this.i = $CE(' <iframeframeBorder= "0" width="500" height="200"></iframe>') <BR>var wp = $CE('<div class="wp">< /div>') , <BR>bar = $CE('<div class="bar block"></div>'), <BR>con = $CE('<div class="con ">< /div>'), <BR>self = this; <BR>for (var i=0; i<c.length; i ) { <BR>var btn = $CE('<a class="controler" >' c[i][1] '</a>') <BR>bar.appendChild(btn) <BR>btn.onclick = (function(i){ <BR> return function () { <BR>self.action(c[i][0]); <BR>} <BR>})(i) <BR>if (! "v1") {btn.unselectable = ' on'} // IE에서는 unselectable = 'on'으로 설정해야 합니다. <BR>} <BR>this.t.parentNode.insertBefore(wp, this.t) <BR>con.appendChild(this.t) ; <BR>con.appendChild(this.i); <BR>wp.appendChild(con) <BR>this.e = this.i.contentWindow.document .i.contentDocument; <BR>this.e.designMode = 'on'; <BR>this.e.open() <BR>this.e.close(); <BR>액션: function (cmd, val) { <BR>this.e.execCommand(cmd, 0, val || null) <BR>} <BR>} <BR> <BR><script type="text/javascript"> <BR>새 편집기('테스트') <BR></ body> <BR>< /html> <BR><BR> <BR>현지에 가서 직접 시연해 볼 수도 있습니다. <BR>첫 번째 ppt 다운로드는 다음과 같습니다. ["JS에 대한 몇 가지 팁"을 다운로드하려면 여기를 클릭하세요.] <BR><BR>[Alibaba China Station의 프런트엔드 아키텍처의 역사 - 간략한 이야기] <BR> 다음은 ppt부분 내용입니다: <BR><BR><BR> <BR>관심 있는 학생들은 한 번 살펴보세요. <BR></style> </div>파일 패키지 다운로드 주소<br><br>
