nicedit 경량급 편집기 사용 소감

NicEdit 의 자바 script 은 모든 사이트 에 통합 되 어 몇 초 동안 만들어 진 모든 요소/블록 편집 또는 표준 textareas 로 텍스트 편집 을 풍부하게 합 니 다.How to use http://nicedit.com/demos.php 가장 바보 같은 textarea 를 niceditor 로 바 꾸 고 편집 영역 과 명령 단 추 를 간단하게 설정 하 며 다양한 스타일 의 편집 인터페이스 를 제공 합 니 다.Deployment NicEdit 는 파일 을 가장 적 게 인용 하 는 온라인 편집기 일 수 있 습 니 다.js 하나,아이콘 파일 하나 가 더 줄 어 들 수 없 기 때 문 입 니 다.이 두 개의 디 렉 터 리 구 조 는 설정 을 수정 합 니 다.new nicEditor({icons Path:'../nicEditor Icons.gif'})Source Code NicEdit 의 소스 코드 는 대상 을 대상 으로 합 니 다.이 는 원래 1300 여 줄 이 적은 코드 를 쉽게 읽 을 수 있 습 니 다.물론 수정 도 있 습 니 다.그림 추가 단 추 를 예 로 들 면:/*START CONFIG*/var nicImageOptions={buttons:{'image':{name:'dd Image',type:'nicImageButton',tags:['IMG']};/*END CONFIG */ var nicImageButton = nicEditorAdvancedButton.extend({ addPane : function() { this.im = this.ne.selectedInstance.selElm().parentTag('IMG'); this.addForm({ '' : {type : 'title', txt : 'Add/Edit Image'}, 'src' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}}, 'alt' : {type : 'text', txt : 'Alt Text', style : {width: '100px'}}, 'align' : {type : 'select', txt : 'Align', options : {none : 'Default','left' : 'Left', 'right' : 'Right'}} },this.im); }, submit : function(e) { var src = this.inputs['src'].value; if(src == "" || src == "http://") { alert("You must enter a Image URL to insert"); return false; } this.removePane(); if(!this.im) { var tmp = 'javascript:nicImTemp();'; this.ne.nicCommand("insertImage",tmp); this.im = this.findElm('IMG','src',tmp); } if(this.im) { this.im.setAttributes({ src : this.inputs['src'].value, alt : this.inputs['alt'].value, align : this.inputs['align'].value }); } } }); nicEditors.registerPlugin(nicPlugin,nicImageOptions); /* START CONFIG*/*END CONFIG*/사 이 는 버튼 바 에 그림 버튼 을 추가 하 는 설정 입 니 다.이후 코드 제 어 는 그림 버튼 을 추가 하고 클릭 하면 해당 패 널 이 떠 서 편집기 에 그림 을 삽입 하 는 입력 을 받 습 니 다.마지막 코드 는 이 단 추 를 단추 막대 에 등록 하 는 것 이다.사실,nicedit 단추 바 를 전혀 사용 하지 않 고 명령 을 호출 할 수도 있 습 니 다.즉,이 줄 코드,ne.nicCommand("insert Image",tmp)입 니 다.이 곳 의 원 대상 은 nicedit 의 편집 구역 입 니 다.이 를 통 해 my NicEditor=new nicEditor()를 얻 을 수 있 습 니 다.myNicEditor.addInstance('editordiv'); ed = myNicEditor.nicInstances[0]; 주의해 야 할 것 은 네가 이렇게 간단하게 호출 하면 아무런 효과 가 없 을 수도 있다 는 것 이다.nicedit 편집 영역 onblur 전에 사용자 가 div 를 클릭 할 때 그림 을 삽입 해 야 합 니 다.이 때 div onmousedown 에서 ed.saverng()을 실행 해 야 합 니 다.편집기 에 있 는 키보드 의 초점 을 저장 하고 사용자 에 게 서 원 하 는 입력 을 받 은 후,예 를 들 어 div 의 onclick,또는 select 의 onchange 이후 ed.restoreRng()을 실행 합 니 다.초점 을 회복 하기 위해 서 는 그래 야 정확 한 위치 에 그림 을 삽입 할 수 있 습 니 다.download nicedit 는 플러그 인 메커니즘 을 제공 하여 확장 하기 쉽 습 니 다.http://nicedit.com/download.php 당신 은 당신 의 기능 수요 에 따라 다운 로드 를 맞 출 수 있 습 니 다본 사이트 다운로드 주소

좋은 웹페이지 즐겨찾기