medium editor
5.23.3
GitHub에서 가장 성공적인 Wysiwyg 텍스트 편집기 중 하나를 유지하는 데 관심이 있으시면 알려주십시오! (문제 #1503 참조)
이것은 medium.com 인라인 편집기 도구 모음의 클론입니다.
Mediumeditor는 추가 프레임 워크가 필요하지 않은 바닐라 JavaScript를 사용하여 작성되었습니다.
데모 : http://yabwe.github.io/medium-editor/
NPM을 통해 :
콘솔에서 실행하십시오 : npm install medium-editor
Bower를 통해 :
bower install medium-editor
외부 CDN을 통해
최신 버전의 경우 :
< script src =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >사용자 정의 :
< script src =" //cdn.jsdelivr.net/npm/[email protected]/dist/js/medium-editor.min.js " > </ script >
< link rel =" stylesheet " href =" //cdn.jsdelivr.net/npm/[email protected]/dist/css/medium-editor.min.css " type =" text/css " media =" screen " charset =" utf-8 " >수동 설치 :
최신 릴리스를 다운로드하고 중간 편집기의 스타일 시트를 페이지에 첨부하십시오.
Dist Folder에서 언급 된 링크 아래의 파일을 찾으십시오. (./medium-editor/dist/...)
< link rel =" stylesheet " href =" css/medium-editor.css " > <!-- Core -->
< link rel =" stylesheet " href =" css/themes/default.css " > <!-- or any other theme -->다음 단계는 편집기 스크립트를 참조하는 것입니다
< script src =" js/medium-editor.js " > </ script >이제 새로운 중간체 개체를 인스턴스화 할 수 있습니다.
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >위의 코드는 .editable 클래스의 모든 요소를 HTML5 편집 가능한 내용으로 변환하고 중간 편집기 도구 모음을 추가합니다.
HTML 요소 목록을 전달할 수도 있습니다.
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; Mediomeditor는 또한 Textarea를 지원합니다. Textarea 요소를 제공하는 경우 스크립트는 contentEditable=true 있는 새 DIV를 생성하고 TextRea를 숨기고 TextRea 값을 DIV HTML 컨텐츠에 연결합니다.
사람들은 다양한 프레임 워크 및 기술 스택과 통합하기 위해 Mediumeditor 주변의 포장지를 기고했습니다. Medior Editor를 위해 이미 작성된 기존 포장지 및 통합 목록을 살펴보십시오!
Medior Editor의 다양한 옵션에 대한 Medior Editor 옵션 설명서를보십시오.
중간 편집기를 사용자 정의하는 옵션은 중간체 에디터 생성자에게 두 번째 인수로 전달됩니다. 예:
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | 'fontawesome'. 기본값 : false ButtonLabels로 'fontawesome' 사용하려면 모든 아이콘이 올바르게 표시되도록 Fontawesome CSS의 버전 4.1.0이 페이지에 있어야합니다.
0falsefalsefalsefalsedocument.body{}truefalseMediumeditor 용 도구 모음은 사용자가 일부 텍스트를 선택할 때마다 자동으로 표시되는 내장 확장자로 구현됩니다. 도구 모음은 정의 된 내장 버튼 세트를 보유 할 수 있지만 확장자로 전달 된 사용자 정의 버튼을 보유 할 수도 있습니다.
도구 모음 옵션은 외부 옵션 객체의 구성원 인 객체로 전달됩니다. 예:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
/* These are the default options for the toolbar,
if nothing is passed this is what is used */
allowMultiParagraphSelection : true ,
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' , 'h2' , 'h3' , 'quote' ] ,
diffLeft : 0 ,
diffTop : - 10 ,
firstButtonClass : 'medium-editor-button-first' ,
lastButtonClass : 'medium-editor-button-last' ,
relativeContainer : null ,
standardizeSelectionStart : false ,
static : false ,
/* options which only apply when static is true */
align : 'center' ,
sticky : false ,
updateOnEmptySelection : false
}
} ) ;true['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']0-10'medium-editor-button-first''medium-editor-button-last'absolute 대신 relative 배치됩니다. 기본값 : nullfalsefalse static 옵션을 사용할 때만 적용되는 옵션 :left | center | right - 정적 옵션이 true 이면 중간 편집기 요소에 비해 정적 도구 모음을 정렬합니다. 기본값 : centertrue 이면, 페이지가 스크롤하는 동안 도구 모음 "고정"을 뷰포트에 "고정"하고 화면에서 보이는 상태를 유지할 수 있습니다. 기본값 : falsetrue 인 경우 선택이 붕괴 된 경우에도 도구 모음 버튼의 상태를 업데이트 할 수 있습니다 (선택할 수없고 커서 만). 기본값 : false 도구 모음을 비활성화하려면 (Anchor-Preview 확장도 비활성화) toolbar 옵션의 값을 false 로 설정하십시오.
var editor = new MediumEditor ( '.editable' , {
toolbar : false
} ) ; 객체를 문자열 대신 버튼 어레이에 전달하여 버튼 동작을 수정할 수 있습니다. 이를 통해 버튼의 기본 동작 중 일부를 재정의 할 수 있습니다. 다음 옵션은 재정의 할 수있는 버튼의 기본 부분 중 일부이지만 MediumEditor.Extension.prototype 의 일부는 이러한 버튼 옵션을 통해 재정의 할 수 있습니다. (버튼의 소스 코드를 확인하여 모든 것이 재정의 할 수 있는지 확인하십시오).
MediumEditor.execAction() 로 전달되는 인수입니다.<b> 또는 <strong> 태그 내에있는 경우 텍스트가 이미 굵게 표시되어 있습니다. 대담한 태그 이름의 배열은 다음과 같습니다. ['b', 'strong']useQueryState 가 true 로 설정된 경우 사용되지 않습니다.'font-weight' 스타일 속성이 700 또는 'bold' 로 설정된 요소 내에있는 경우 텍스트가 이미 대담하다는 것을 나타냅니다. 그래서 대담한 스타일 객체는 { prop: 'font-weight', value: '700|bold' } 입니다.useQueryState 가 true 로 설정된 경우 사용되지 않습니다.'|' 로 분리 할 수 있습니다).document.queryCommandState() 사용해야하는지 여부를 활성화/비활성화하여 조치가 이미 적용되었는지 여부를 결정합니다. 작업이 이미 적용된 경우 버튼이 도구 모음에서 'Active'로 표시됩니다.document.queryCommandState('bold') 를 호출합니다. 이는 브라우저가 이미 대담하다고 생각하면 true를 반환합니다.innerHTML 버튼 안에 넣습니다'fontawesome' 으로 설정된 경우 버튼의 내용에 사용할 innerHTML 버튼 오버 링의 예 (여기서 목표는 <h2> 및 <h3> 태그를 실제로 각각 생성하는 H1 및 H2 버튼을 사용하여 매체를 모방하는 것입니다.
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [
'bold' ,
'italic' ,
{
name : 'h1' ,
action : 'append-h2' ,
aria : 'header type 1' ,
tagNames : [ 'h2' ] ,
contentDefault : '<b>H1</b>' ,
classList : [ 'custom-class-h1' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h1'
}
} ,
{
name : 'h2' ,
action : 'append-h3' ,
aria : 'header type 2' ,
tagNames : [ 'h3' ] ,
contentDefault : '<b>H2</b>' ,
classList : [ 'custom-class-h2' ] ,
attrs : {
'data-custom-attr' : 'attr-value-h2'
}
} ,
'justifyCenter' ,
'quote' ,
'anchor'
]
}
} ) ; Anchor Preview는 사용자가 편집기의 링크 위로 호버링 될 때 '툴팁'을 자동으로 표시하는 내장 확장자입니다. 툴팁은 링크의 href 를 표시하고 클릭하면 툴바에서 앵커 편집 양식을 열게됩니다.
앵커 미리보기 '툴팁'옵션은 외부 옵션 객체의 구성원 인 객체로 전달됩니다. 예:
var editor = new MediumEditor ( '.editable' , {
anchorPreview : {
/* These are the default options for anchor preview,
if nothing is passed this is what it used */
hideDelay : 500 ,
previewValueSelector : 'a'
}
}
} ) ;500'a'falsetrue 앵커 미리보기를 비활성화하려면 anchorPreview 옵션의 값을 false 로 설정하십시오.
var editor = new MediumEditor ( '.editable' , {
anchorPreview : false
} ) ; toolbar: false 옵션 또는 data-disable-toolbar 속성) 앵커-예정은 자동으로 비활성화됩니다.자리 표시 자 핸들러는 내장 확장으로 편집기가 비어있을 때 자리 표시 자 텍스트를 표시합니다.
자리 표시자를위한 옵션은 외부 옵션 객체의 구성원 인 객체로 전달됩니다. 예:
var editor = new MediumEditor ( '.editable' , {
placeholder : {
/* This example includes the default options for placeholder,
if nothing is passed this is what it used */
text : 'Type your text' ,
hideOnClick : true
}
} ) ; 텍스트 : 자리 표시자가 False로 설정되지 않은 경우 빈 ContenteDitables의 기본 자리 표시자를 정의합니다. 편집기 요소에서 data-placeholder 속성을 설정하여 덮어 쓸 수 있습니다. 기본값 : 'Type your text'
HideonClick : 필드가 집중 되 자마자 자리 표시자가 사라집니다. 기본값 : true . 입력을 시작한 후에 만 자리 표시자를 숨기고 필드가 비어있는 즉시 다시 표시하려면이 옵션을 false 로 설정하십시오.
자리 표시자를 비활성화하려면 placeholder 옵션을 false 로 설정하십시오.
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;앵커 양식은 내장 버튼 확장으로 사용자가 편집기 내에서 링크를 추가/편집/제거 할 수 있습니다. 버튼 목록의 버튼으로 '앵커'가 전달되면이 확장자가 활성화되고 도구 모음에서 해당 버튼을 클릭하여 트리거 될 수 있습니다.
앵커 양식의 옵션은 외부 옵션 객체의 구성원 인 객체로 전달됩니다. 예:
var editor = new MediumEditor ( '.editable' , {
toolbar : {
buttons : [ 'bold' , 'italic' , 'underline' , 'anchor' ]
} ,
anchor : {
/* These are the default options for anchor form,
if nothing is passed this is what it used */
customClassOption : null ,
customClassOptionText : 'Button' ,
linkValidation : false ,
placeholderText : 'Paste or type a link' ,
targetCheckbox : false ,
targetCheckboxText : 'Open in new window'
}
}
} ) ;null'Button'encodeURI 사용하여 유효한 문자로 변환합니다. 기본값 : false'Paste or type a link'target 속성이 변경됩니다. 기본값 : false'Open in new window'페이스트 핸들러는 내장 확장자로서 사용자가 페이스트 할 때 콘텐츠를 필터링하려고합니다. 페이스트 핸들러 필터가 특정 옵션을 통해 구성 가능한 방법.
페이스트 처리 옵션은 외부 옵션 객체의 구성원 인 객체로 전달됩니다. 예:
var editor = new MediumEditor ( '.editable' , {
paste : {
/* This example includes the default options for paste,
if nothing is passed this is what it used */
forcePlainText : true ,
cleanPastedHTML : false ,
cleanReplacements : [ ] ,
cleanAttrs : [ 'class' , 'style' , 'dir' ] ,
cleanTags : [ 'meta' ] ,
unwrapTags : [ ]
}
} ) ;truefalsetrue 또는 cleanPaste(text) 도우미 방법을 호출 할 때 페이스트 중에 사용할 수있는 Regexp 및 교체 텍스트의 사용자 정의 쌍 (2 요소 어레이) 및 교체 텍스트. 이러한 교체는 빌드 된 교체 전에 실행됩니다. 기본: []true 또는 cleanPaste(text) 도우미 방법을 호출 할 때 페이스트 중에 사용할 수있는 regexp 및 교체 텍스트를 사용할 수 있습니다. 이러한 교체는 내장 교체 후에 실행됩니다. 기본: []true 일 때 또는 cleanPaste(text) 또는 pasteHTML(html,options) 도우미 방법을 호출 할 때 페이스트 중에 제거 할 요소 속성 목록. 기본값 : ['class', 'style', 'dir']true 일 때 또는 cleanPaste(text) 또는 pasteHTML(html,options) 도우미 방법을 호출 할 때 페이스트 중에 제거 할 요소 태그 이름 목록. 기본값 : ['meta']true 일 때 또는 cleanPaste(text) 또는 pasteHTML(html,options) 도우미 메소드를 호출 할 때 페이스트 중에 페이스트 중에 랩을 풀지 만 하위 요소를 유지하는 요소 태그 이름 목록. 기본: []키보드 명령 핸들러는 키 공모를 편집기에서 실행할 작업에 매핑하기위한 내장 확장자입니다.
키보드 공무원 옵션은 외부 옵션 객체의 구성원 인 객체로 전달됩니다. 예:
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : {
/* This example includes the default options for keyboardCommands,
if nothing is passed this is what it used */
commands : [
{
command : 'bold' ,
key : 'B' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'italic' ,
key : 'I' ,
meta : true ,
shift : false ,
alt : false
} ,
{
command : 'underline' ,
key : 'U' ,
meta : true ,
shift : false ,
alt : false
}
] ,
}
} ) ;editor.execAction() 에 전달 된 인수false 로 정의되면 바로 가기가 비활성화됩니다. 키보드 명령을 비활성화하려면 keyboardCommands 옵션을 false 로 설정하십시오.
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : false
} ) ;자동 링크 핸들러는 내장 확장자로서 텍스트 필드에 입력 한 URL을 HTML 앵커 태그 (Markdown의 기능과 유사)로 자동으로 전환합니다. 이 기능은 기본적으로 꺼져 있습니다.
내장 자동 링크 지원을 활성화하려면 autoLink 옵션의 값을 true 로 설정하십시오.
var editor = new MediumEditor ( '.editable' , {
autoLink : true
} ) ;이미지 드래그 핸들러는 이미지를 컨텐츠 교육으로 드래그하고 삭제하는 것을 처리하기위한 내장 확장자입니다. 이 기능은 기본적으로 켜져 있습니다.
내장 이미지 드래그를 비활성화하려면 imageDragging 옵션의 값을 false 로 설정하십시오.
var editor = new MediumEditor ( '.editable' , {
imageDragging : false
} ) ; 드래그 앤 드롭 이벤트 방지를 중단하고 일반적으로 파일 드래그를 비활성화하려면 더미 이미지 래깅 확장자를 제공하십시오.
var editor = new MediumEditor ( '.editor' , {
extensions : {
'imageDragging' : { }
}
} ) ;5.0.0의 코드 상태로 인해 편집기는 항상 드래그 앤 드롭 동작을 방지했습니다. 6에서 파일 드래그를 비활성화하는 더 나은 방법이 있습니다.*
var editor = new MediumEditor ( '.editable' , {
delay : 1000 ,
targetBlank : true ,
toolbar : {
buttons : [ 'bold' , 'italic' , 'quote' ] ,
diffLeft : 25 ,
diffTop : 10 ,
} ,
anchor : {
placeholderText : 'Type a link' ,
customClassOption : 'btn' ,
customClassOptionText : 'Create Button'
} ,
paste : {
cleanPastedHTML : true ,
cleanAttrs : [ 'style' , 'dir' ] ,
cleanTags : [ 'label' , 'meta' ] ,
unwrapTags : [ 'sub' , 'sup' ]
} ,
anchorPreview : {
hideDelay : 300
} ,
placeholder : {
text : 'Click to edit'
}
} ) ; 기본적으로 MediumEditor는 모든 지원되는 브라우저에 잘 지원되는 document.execCommand() 에 대한 대부분의 명령에 대한 버튼을 지원합니다.
MediumEditor는 기본적으로 거대한 도구 모음을 피하기 위해 여기에 나열된 버튼 만 표시됩니다.
이들은 MediumEditor에서 지원하는 모든 내장 버튼입니다.
사용 가능한 테마 목록은 위키 페이지를 확인하십시오 : https://github.com/yabwe/medium-editor/wiki/themes
Medior Editor 객체에서 지원되는 모든 메소드에 대한 자세한 내용은 Wiki의 Mediomeditor Object API 문서를보십시오.
on() 통해 첨부 한 DOM 이벤트를 분리합니다.importSelection()exportSelection() 에 의해 반환 된 값)saveSelection() 호출 될 때 선택한 내용으로 선택을 복원하십시오.document.execCommand('createLink') 명령document.execCommand 통해 내장 작업을 실행합니다document.queryCommandState(action) 주변의 래퍼.delay 옵션으로 전달 된 시간에 따라 함수가 실행되는 것을 지연시킵니다.index 에서 요소의 트림 된 innerHTML 가져옵니다.index 에서 요소의 html 로 innerHTML 설정합니다.기존 Mediumeditor 인스턴스에 새 요소를 동적으로 추가 할 수 있습니다.
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , this . _handleEditableInput . bind ( this ) ) ;
// imagine an ajax fetch/any other dynamic functionality which will add new '.editable' elements to the DOM
editor . addElements ( '.editable' ) ;
// OR editor.addElements(document.getElementsByClassName('editable'));
// OR editor.addElements(document.querySelectorAll('.editable')); 요소 또는 요소를 addElements(elements) 로 전달합니다.
this.elements 에 추가하십시오.<textarea> 요소의 경우 :<textarea> 숨 깁니다<div contenteditable=true> 요소를 만들고 요소 배열에 추가하십시오. 간단히 말하면, 찢어 지려는 요소 또는 배열과 함께 removeElements 요소를 호출하십시오. 각 요소 자체는 만족스러운 상태로 유지됩니다. 모든 이벤트 핸들러와 모든 참조를 제거하여 DOM에서 안전하게 제거 할 수 있습니다.
editor . removeElements ( document . querySelector ( '#myElement' ) ) ;
// OR editor.removeElements(document.getElementById('myElement'));
// OR editor.removeElements('#myElement');
// in case you have jQuery and don't exactly know when an element was removed, for example after routing state change
var removedElements = [ ] ;
editor . elements . forEach ( function ( element ) {
// check if the element is still available in current DOM
if ( ! $ ( element ) . parents ( 'body' ) . length ) {
removedElements . push ( element ) ;
}
} ) ;
editor . removeElements ( removedElements ) ; Contentestable의 변경 사항을 관찰하려면 subscribe() 메소드를 통해 노출 된 사용자 정의 'editableInput' 이벤트를 사용하십시오.
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ; 이 이벤트는 Medium Editor (IE9+ 및 Edge 포함)에서 지원하는 모든 브라우저에서 지원됩니다! Mediumeditor의 한 인스턴스가 여러 요소를 모니터링하는 경우를 돕기 위해, 이벤트 핸들러에 전달 된 두 번째 인수 (위의 예에서 editable )는 실제로 변경된 내용 가능한 요소에 대한 참조입니다.
이것은 다음을 포함하여 내용 가능한 요소에 대한 수정을 캡처해야 할 때 편리합니다.
이것이 흥미로운 이유이며 내용 조정 가능한 요소에 input 이벤트에 첨부하는 대신이 이벤트를 사용해야하는 이유는 무엇입니까?
따라서 대부분의 최신 브라우저 (Chrome, Firefox, Safari 등)의 경우 input 이벤트가 잘 작동합니다. 실제로 editableInput 해당 브라우저에서 input 이벤트의 프록시 일뿐입니다. 그러나 input 이벤트는 IE 9-11의 만족 부여 요소에 대해 지원되지 않으며 대부분 Microsoft Edge에서 지원되지만 완전히 지원되지는 않습니다.
따라서 Internet Explorer 및 Microsoft Edge의 editableInput 이벤트를 올바르게 지원하기 위해 Mediomeeditor는 selectionchange 및 keypress 이벤트의 조합과 document.execCommand 로의 통화를 모니터링합니다.
Medior Editor의 확장을 개발하는 방법을 배우려면 문서를 확인하십시오.
이미지 및 미디어 임베드, 테이블 및 마크 다운과 같은 기존 확장 및 플러그인 목록은 여기에서 찾을 수 있습니다.
로컬로 데모를 실행하려면 :
npm install 실행하십시오node index.js 실행하십시오http://localhost:8088/demo/index.html 로 이동하여 데모를보십시오중간체 개발 작업은 Grunt에 의해 관리됩니다. 필요한 모든 패키지를 설치하려면 다음과 같이 호출하십시오.
npm install모든 테스트를 실행하고 데모 페이지에서 테스트를 위해 Dist 파일을 작성하려면 다음과 같이 호출하십시오.
grunt이들은 사용 가능한 다른 grunt 작업입니다.
소스 파일은 SRC 디렉토리 내부에 있습니다. Dist 디렉토리의 파일이 아닌 이러한 파일을 변경하십시오.
몇 가지 버그를 죽여 :)
git checkout -b my-new-feature )git commit -am 'Added some feature' )을 커밋하십시오.git push origin my-new-feature )프로젝트 전반에 걸쳐 일관된 코드를 만들기 위해 몇 가지 도구를 사용하여 도움이됩니다. 프로젝트 코딩을 만들기 위해 가장 인기있는 편집자/IDE를위한 플러그인이 있지만 프로젝트에서도 사용해야합니다!
우리는 각 빌드에서 jshint를 사용하여 JS에서 캐치하기 쉬운 오류 및 잠재적 문제를 찾습니다. 프로젝트의 루트에서 .jshintrc 파일에서 jshint 설정을 찾을 수 있습니다.
우리는 각 빌드에서 JSC를 사용하여 프로젝트에 대한 코드 스타일 규칙을 시행합니다. 프로젝트 루트에서 .jscsrc 파일에서 JSCS 설정을 찾을 수 있습니다.
우리는 EditorConfig를 사용하여 다양한 편집자와 IDE 간의 일관된 코딩 스타일을 유지합니다. 프로젝트의 루트에서 .editorconfig 파일에서 설정을 찾을 수 있습니다.
첫 번째 기여를 위해 간단한 것을 찾고 계십니까? 쉬운 첫 번째 버그를 수정 해보세요!
https://github.com/yabwe/medium-editor/graphs/contributors
여기에 조직을 추가하면 방문 페이지에 추가 할 수 있습니다!
MIT : https://github.com/yabwe/medium-editor/blob/master/license
