pen

펜 편집기

• 라이브 데모 : http://sofish.github.io/pen
• Markdown이 지원됩니다
• 상태 빌드 :

---

---

0. 소스 코드

Github에서 소스 코드를 복제하거나 Bower를 사용하여 소스 코드를 복제 할 수 있습니다.

 bower install pen

1. 설치

1.1 INT IND 속성이 있습니다

 var editor = new Pen ( '#editor' ) ; 

1.2 요소와 함께 시작하십시오

 var editor = new Pen ( document . getElementById ( 'editor' ) ) ; 

1.3 옵션이있는 초기

 var options = {
  editor : document . body , // {DOM Element} [required]
  class : 'pen' , // {String} class of the editor,
  debug : false , // {Boolean} false by default
  textarea : '<textarea name="content"></textarea>' , // fallback for old browsers
  list : [ 'bold' , 'italic' , 'underline' ] , // editor menu list
  linksInNewWindow : true // open hyperlinks in a new windows/tab
}

var editor = new Pen ( options ) ; 

2. 구성

다음 객체는 펜의 기본 설정을 설정합니다.

 defaults = {
  class : 'pen' ,
  debug : false ,
  textarea : '<textarea name="content"></textarea>' ,
  list : [
    'blockquote' , 'h2' , 'h3' , 'p' , 'insertorderedlist' , 'insertunorderedlist' ,
    'indent' , 'outdent' , 'bold' , 'italic' , 'underline' , 'createlink'
  ] ,
  stay : true ,
  linksInNewWindow : false
}

자신의 프로젝트에 맞게 도구 모음을 사용자 정의하려면 #1.3 : init 옵션과 같은 options 객체로 Pen 생성자를 시동 할 수 있습니다.

2.1 오래된 브라우저의 폴백

defaults.textarea HTML 문자열로 설정할 수 있습니다. 기본적으로 <textarea name="content"></textarea> 。 ## #editor 의 innerHTML 로 설정됩니다.

2.2 편집기 클래스를 변경합니다

펜은 기본적으로 편집기에 .pen 추가합니다. 클래스를 변경하려면 클래스 이름 pen src/pen.css 로 자신의 것으로 교체하십시오.

2.3 디버그 모드 활성화

options.debug 가 true 로 설정된 경우 펜은 브라우저의 콘솔에 로그를 출력합니다.

2.4 도구 모음을 사용자 정의하십시오

options.list 설정할 수 있습니다. Array 로 표시하고 다음 문자열을 추가하여 직접 만들 수 있습니다.

• blockquote , h2 , h3 , p , pre : 문자 그대로의 의미로 태그를 만듭니다.
• insertorderedlist : ol>li 목록을 만듭니다
• insertunorderedlist : ul>li 목록을 만듭니다
• indent : 들여 쓰기 목록 / 블록 쿼트 블록
• outdent : Outdent List / Blockquote 블록
• bold : 텍스트 선택을 b 태그로 래핑하십시오.
• italic : i 태그에서 텍스트 선택을 마무리합니다.
• underline : u 태그로 텍스트 선택을 래핑하십시오.
• createlink : 텍스트 선택에 링크를 삽입하십시오
• inserthorizontalrule : hr 태그를 삽입하십시오
• insertimage : 이미지 ( img ) 태그를 삽입하십시오

2.5 도구 모음 아이콘에 툴팁을 추가하십시오

도구 모음 작업과 일치하는 속성이있는 옵션 options.titles 설정할 수 있습니다. 각 속성의 값은 아이콘의 제목 속성으로 사용됩니다. 대부분의 브라우저는 마우스가 아이콘 위로 떠날 때 제목 속성을 툴팁으로 표시합니다.

 options . title = {
    'blockquote' : 'Blockquote'
    'createlink' : 'Hyperlink'
    'insertimage' : 'Image'
}

Bootstrap 또는 JQueryUi를 사용하는 경우 $('i.pen-icon').tooltip() JavaScript에 추가하여 툴팁 스타일을 표준화 할 수 있습니다.

2.6 안전하지 않은 페이지를 방지합니다

기본적으로 PEN은 편집 할 때 안전하지 않은 페이지 리디렉션을 방지하고 특정 options.stay 삭제하기 위해 false .

참고 : defaults.debug 가 true 로 설정되고 default.stay 설정되지 않은 경우 : defaults.stay == !defaults.debug .

2.7 비활성화 및 재 활성화 편집기

var pen = new Pen(options) 객체의 Call destroy() 메소드로 펜 편집기를 비활성화 할 수 있습니다. 좋다:

 var pen = new Pen ( '#editor' ) ;

pen . destroy ( ) ; // return itself

그리고 편집자를 다시 활성화하기 위해 rebuild() 라는 해당 방법이 있습니다.

 pen . rebuild ( ) ; // return itself 

2.8 마크 다운으로 내용을 내보내십시오

실험적인 기능입니다

 var pen = new Pen ( '#editor' ) ;

pen . toMd ( ) ; // return a markdown string 

3. Markdown Syntax 지원

3.1 설치

구문 변환기는`pen.js : markdown.js : js :

 < script src =" src/pen.js " > </ script >
< script src =" src/markdown.js " > </ script > 

3.2 사용

이를 사용하려면 라인 시작에 action cmd + space key 입력 할 수 있습니다. 좋다:

 ### This will create a h3 tag

다음 CMD가 허용됩니다.

• 제목 : 라인 시작에서 1 ~ 6 # 유형
• 순서 대표 목록 : 유형 - 또는 *
• 주문 목록 : 유형 1.
• 코드 블록 : 타입 ```
• 블록 견적 : type >
• 수평 규칙 : - , * . ...... 와 같은 <hr /> 만들 것입니다.

4. 라이센스

MIT에 따라 라이센스.

5. 신뢰