medium editor
5.23.3
หากคุณสนใจที่จะช่วยรักษาหนึ่งในบรรณาธิการข้อความ WYSIWYG ที่ประสบความสำเร็จมากที่สุดใน GitHub แจ้งให้เราทราบ! (ดูปัญหา #1503)
นี่คือโคลนของแถบเครื่องมือ Editor Medium.com Inline
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 " >การติดตั้งด้วยตนเอง:
ดาวน์โหลดรุ่นล่าสุดและแนบรูปแบบของ Editor Medium Editor ไปยังหน้าของคุณ:
ค้นหาไฟล์ไปยังการเชื่อมโยงด้านล่างที่กล่าวถึงในโฟลเดอร์ DIST (./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 >ตอนนี้คุณสามารถสร้างอินสแตนซ์วัตถุ MedialEditor ใหม่:
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >รหัสข้างต้นจะแปลงองค์ประกอบทั้งหมดด้วยคลาสที่แก้ไขได้เป็นเนื้อหาที่แก้ไขได้ HTML5 และเพิ่มแถบเครื่องมือตัวแก้ไขขนาดกลางให้กับพวกเขา
นอกจากนี้คุณยังสามารถผ่านรายการองค์ประกอบ HTML:
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; MediumEditor ยังรองรับ Textarea หากคุณให้องค์ประกอบ textarea สคริปต์จะสร้าง div ใหม่ด้วย contentEditable=true ซ่อน textarea และเชื่อมโยงค่า textarea กับเนื้อหา DIV HTML
ผู้คนมีส่วนร่วมในการห่อหุ้ม MediumEditor เพื่อบูรณาการกับกรอบและสแต็คเทคโนโลยีที่แตกต่างกัน ดูรายการของ wrappers และการรวมที่มีอยู่ซึ่งเขียนไว้แล้วสำหรับ MediumEditor!
ดูเอกสารตัวเลือก MediumEditor ในตัวเลือกต่าง ๆ ทั้งหมดสำหรับ MediumEditor
ตัวเลือกในการปรับแต่งบรรณาธิการสื่อจะถูกส่งผ่านเป็นอาร์กิวเมนต์ที่สองไปยังตัวสร้างสื่อกลาง ตัวอย่าง:
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | 'Fontawesome' ค่าเริ่มต้น: false การใช้ 'fontawesome' เนื่องจาก buttonLabels ต้องการเวอร์ชัน 4.1.0 ของ css fontawesome ที่จะอยู่บนหน้าเพื่อให้แน่ใจว่าไอคอนทั้งหมดจะปรากฏอย่างถูกต้อง
0falsefalsefalsefalsedocument.body{}truefalseแถบเครื่องมือสำหรับ MediumEditor ถูกนำไปใช้เป็นส่วนขยายในตัวซึ่งจะแสดงโดยอัตโนมัติเมื่อใดก็ตามที่ผู้ใช้เลือกข้อความบางอย่าง แถบเครื่องมือสามารถถือชุดของปุ่มในตัวที่กำหนดไว้ได้ แต่ยังสามารถกดปุ่มที่กำหนดเองใด ๆ ที่ส่งผ่านเป็นส่วนขยาย
ตัวเลือกสำหรับแถบเครื่องมือจะถูกส่งผ่านเป็นวัตถุที่เป็นสมาชิกของวัตถุตัวเลือกภายนอก ตัวอย่าง:
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'relative แทนที่จะเป็น absolute ค่าเริ่มต้น: 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() เพื่อพิจารณาว่าการดำเนินการได้ถูกนำไปใช้แล้วหรือไม่ หากการดำเนินการได้ถูกนำไปใช้แล้วปุ่มจะแสดงเป็น 'ใช้งาน' ในแถบเครื่องมือdocument.queryCommandState('bold') ซึ่งจะกลับมาจริงหากเบราว์เซอร์คิดว่าข้อความนั้นเป็นตัวหนาและเท็จเป็นอย่างอื่นinnerHTML ที่จะใส่ไว้ในปุ่มinnerHTML ที่จะใช้สำหรับเนื้อหาของปุ่มหากตัวเลือก ButtonLabels สำหรับ MediumEditor ถูกตั้งค่าเป็น 'fontawesome' ตัวอย่างของปุ่มเอาชนะ (ที่นี่เป้าหมายคือการเลียนแบบสื่อโดยมีปุ่ม H1 และ H2 ซึ่งสร้างแท็ก <h2> และ <h3> ตามลำดับ):
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'
]
}
} ) ; Preview Anchor เป็นส่วนขยายในตัวซึ่งจะแสดง 'Tooltip' โดยอัตโนมัติเมื่อผู้ใช้กำลังลอยอยู่เหนือลิงก์ในตัวแก้ไข คำแนะนำเครื่องมือจะแสดง href ของลิงค์และเมื่อคลิกจะเปิดแบบฟอร์มการแก้ไขจุดยึดในแถบเครื่องมือ
ตัวเลือกสำหรับการแสดงตัวอย่างของ Anchor 'Tooltip' จะถูกส่งผ่านเป็นวัตถุที่เป็นสมาชิกของวัตถุ Outer Options ตัวอย่าง:
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 ) แองเคิล-Preview จะถูกปิดใช้งานโดยอัตโนมัติตัวจัดการตัวยึดตำแหน่งเป็นส่วนขยายในตัวซึ่งแสดงข้อความตัวยึดตำแหน่งเมื่อตัวแก้ไขว่างเปล่า
ตัวเลือกสำหรับตัวยึดจะถูกส่งผ่านเป็นวัตถุที่เป็นสมาชิกของวัตถุตัวเลือกภายนอก ตัวอย่าง:
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
}
} ) ; ข้อความ : กำหนดตัวยึดตำแหน่งเริ่มต้นสำหรับผู้ที่ชื่นชอบที่ว่างเปล่าเมื่อ ผู้ถือตำแหน่ง ไม่ได้ตั้งค่าเป็นเท็จ คุณสามารถเขียนทับได้โดยการตั้งค่าแอตทริบิวต์ data-placeholder บนองค์ประกอบของตัวแก้ไข ค่าเริ่มต้น: 'Type your text'
HIDEONCLICK : ทำให้ตัวยึดตำแหน่งหายไปทันทีที่สนามได้รับความสนใจ ค่าเริ่มต้น: true หากต้องการซ่อนตัวยึดตำแหน่งหลังจากเริ่มพิมพ์และแสดงอีกครั้งทันทีที่ฟิลด์ว่างเปล่าตั้งตัวเลือกนี้เป็น false
หากต้องการปิดการใช้งานตัวยึดตำแหน่งให้ตั้งค่าตัวเลือกตัวเลือก placeholder เป็น false :
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;แบบฟอร์มสมอเป็นส่วนขยายปุ่มในตัวซึ่งช่วยให้ผู้ใช้สามารถเพิ่ม/แก้ไข/ลบลิงก์จากภายในตัวแก้ไข เมื่อ 'Anchor' ถูกส่งผ่านเป็นปุ่มในรายการปุ่มส่วนขยายนี้จะเปิดใช้งานและสามารถเรียกใช้โดยคลิกที่ปุ่มที่เกี่ยวข้องในแถบเครื่องมือ
ตัวเลือกสำหรับแบบฟอร์มสมอเป็นวัตถุที่เป็นสมาชิกของวัตถุตัวเลือกภายนอก ตัวอย่าง:
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'ตัวจัดการวางเป็นส่วนขยายในตัวซึ่งพยายามกรองเนื้อหาเมื่อผู้ใช้วาง วิธีที่ตัวกรอง Handler วางสามารถกำหนดค่าได้ผ่านตัวเลือกเฉพาะ
ตัวเลือกสำหรับการจัดการวางจะถูกส่งผ่านเป็นวัตถุที่เป็นสมาชิกของวัตถุตัวเลือกภายนอก ตัวอย่าง:
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) การเปลี่ยนเหล่านี้จะดำเนินการ ก่อน การเปลี่ยนในตัว ค่าเริ่มต้น: []true หรือเมื่อเรียกวิธีการช่วย cleanPaste(text) การเปลี่ยนเหล่านี้จะดำเนินการ หลังจาก การเปลี่ยนในตัว ค่าเริ่มต้น: []true หรือเมื่อโทร cleanPaste(text) หรือ pasteHTML(html,options) วิธีการของผู้ช่วย ค่าเริ่มต้น: ['class', 'style', 'dir']true หรือเมื่อโทร cleanPaste(text) หรือ pasteHTML(html,options) วิธีการของผู้ช่วย ค่าเริ่มต้น: ['meta']true หรือเมื่อโทร cleanPaste(text) หรือ pasteHTML(html,options) วิธีการช่วย ค่าเริ่มต้น: []ตัวจัดการคำสั่งคีย์บอร์ดเป็นส่วนขยายในตัวสำหรับการทำแผนที่การรวบรวมคีย์เพื่อดำเนินการเพื่อดำเนินการในตัวแก้ไข
ตัวเลือกสำหรับ KeyboardCommands จะถูกส่งผ่านเป็นวัตถุที่เป็นสมาชิกของวัตถุ Outer 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 Anchor (คล้ายกับฟังก์ชั่นของ 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
ตรวจสอบหน้า wiki สำหรับรายการชุดรูปแบบที่มีอยู่: https://github.com/yabwe/medium-editor/wiki/themes
ดูเอกสาร API Object MedialEditor บน Wiki สำหรับรายละเอียดเกี่ยวกับวิธีการทั้งหมดที่สนับสนุนในวัตถุ MediumEditor
on()importSelection()exportSelection() )saveSelection() ถูกเรียกdocument.execCommand('createLink') คำสั่งdocument.execCommanddocument.queryCommandState(action) สำหรับการตรวจสอบว่ามีการดำเนินการเฉพาะกับการเลือกหรือไม่delayinnerHTML ขององค์ประกอบที่ indexinnerHTML เป็น html ขององค์ประกอบที่ indexเป็นไปได้ที่จะเพิ่มองค์ประกอบใหม่ในอินสแตนซ์ของสื่อกลางที่มีอยู่แบบไดนามิก:
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 ) ; สำหรับการสังเกตการเปลี่ยนแปลงใด ๆ ในกรณีที่เป็นที่ชื่นชอบให้ใช้เหตุการณ์ 'editableInput' ที่กำหนดเองผ่านวิธี subscribe() :
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ; เหตุการณ์นี้ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมดที่รองรับโดย MediumEditor (รวมถึง IE9+ และ Edge)! เพื่อช่วยในกรณีที่หนึ่งในอินสแตนซ์ของ MediumEditor กำลังตรวจสอบหลายองค์ประกอบอาร์กิวเมนต์ที่ 2 ส่งผ่านไปยังตัวจัดการเหตุการณ์ ( editable ในตัวอย่างด้านบน) จะเป็นการอ้างอิงถึงองค์ประกอบที่เป็นที่ชื่นชอบที่มีการเปลี่ยนแปลงจริง
สิ่งนี้มีประโยชน์เมื่อคุณต้องการบันทึกการแก้ไขใด ๆ ไปยังองค์ประกอบที่เป็นที่ชื่นชอบรวมถึง::
เหตุใดสิ่งนี้จึงน่าสนใจและทำไมคุณควรใช้กิจกรรมนี้แทนที่จะเชื่อมต่อกับเหตุการณ์ input ในองค์ประกอบที่เป็นที่ชื่นชอบ
ดังนั้นสำหรับเบราว์เซอร์ที่ทันสมัยส่วนใหญ่ (Chrome, Firefox, Safari ฯลฯ ) เหตุการณ์ input ใช้งานได้ดี ในความเป็นจริง editableInput เป็นเพียงพร็อกซีสำหรับเหตุการณ์ input ในเบราว์เซอร์เหล่านั้น อย่างไรก็ตามเหตุการณ์ input ไม่ได้รับการสนับสนุนสำหรับองค์ประกอบที่เป็นที่ชื่นชอบใน IE 9-11 และ ส่วนใหญ่ ได้รับการสนับสนุนใน Microsoft Edge แต่ไม่สมบูรณ์
ดังนั้นเพื่อรองรับเหตุการณ์ editableInput ใน Internet Explorer และ Microsoft Edge ได้อย่างถูกต้อง MediumEditor ใช้การรวมกันของเหตุการณ์ selectionchange และ keypress รวมถึงการตรวจสอบการโทรไปยัง document.execCommand
ตรวจสอบเอกสารเพื่อเรียนรู้วิธีการพัฒนาส่วนขยายสำหรับ MediumEditor
รายการส่วนขยายและปลั๊กอินที่มีอยู่เช่นรูปภาพและสื่อฝังตัวตารางและ markdown สามารถพบได้ที่นี่
เพื่อเรียกใช้การสาธิตในพื้นที่:
npm install จากคอนโซลของคุณที่รูทnode index.js จากรูทhttp://localhost:8088/demo/index.html เพื่อดูการสาธิตงานการพัฒนาสื่อกลางได้รับการจัดการโดยเสียงฮึดฮัด ในการติดตั้งแพ็คเกจที่จำเป็นทั้งหมดเพียงแค่เรียกใช้:
npm installในการเรียกใช้การทดสอบทั้งหมดและสร้างไฟล์ DIST สำหรับการทดสอบในหน้าสาธิตเพียงแค่เรียกใช้:
gruntงานนี้เป็นงานเสมือนอื่น ๆ ที่มีอยู่:
ไฟล์ต้นฉบับอยู่ในไดเรกทอรี SRC ตรวจสอบให้แน่ใจว่าได้ทำการเปลี่ยนแปลงไฟล์เหล่านี้และไม่ใช่ไฟล์ในไดเรกทอรี DIST
ฆ่าแมลงบางอย่าง :)
git checkout -b my-new-feature )git commit -am 'Added some feature' ) โดยไม่ต้องใช้ไฟล์จากไดเรกทอรี DISTgit push origin my-new-feature ไปยังสาขาเพื่อช่วยสร้างรหัสที่ดูสม่ำเสมอตลอดทั้งโครงการเราใช้เครื่องมือสองสามอย่างเพื่อช่วยเรา พวกเขามีปลั๊กอินสำหรับบรรณาธิการ/IDE ที่ได้รับความนิยมมากที่สุดในการเข้ารหัสสำหรับโครงการของเรา แต่คุณควรใช้พวกเขาในโครงการของคุณเช่นกัน!
เราใช้ JShint ในการสร้างแต่ละครั้งเพื่อค้นหาข้อผิดพลาดที่จับได้ง่ายและปัญหาที่อาจเกิดขึ้นใน JS ของเรา คุณสามารถค้นหาการตั้งค่า JShint ของเราในไฟล์ .jshintrc ในรูทของโครงการ
เราใช้ JSCs ในการสร้างแต่ละครั้งเพื่อบังคับใช้กฎสไตล์รหัสที่เรามีสำหรับโครงการของเรา คุณสามารถค้นหาการตั้งค่า JSCS ของเราในไฟล์ .jscsrc ในรูทของโครงการ
เราใช้ EditorConfig เพื่อรักษารูปแบบการเข้ารหัสที่สอดคล้องกันระหว่างบรรณาธิการและ IDEs ต่างๆ คุณสามารถค้นหาการตั้งค่าของเราในไฟล์ .editorconfig ในรูทของโครงการ
กำลังมองหาสิ่งที่ง่ายสำหรับการบริจาคครั้งแรก? ลองแก้ไขข้อผิดพลาดแรกง่ายๆ!
https://github.com/yabwe/medium-editor/graphs/contributors
เพิ่มองค์กรของคุณที่นี่และเราสามารถเพิ่มคุณลงในหน้า Landing Page ของเรา!
MIT: https://github.com/yabwe/medium-editor/blob/master/license
