medium editor
5.23.3
Jika Anda tertarik untuk membantu mempertahankan salah satu editor teks WYSIWYG paling sukses di GitHub, beri tahu kami! (Lihat Edisi #1503)
Ini adalah klon dari toolbar editor inline medium.com.
MediumEditor telah ditulis menggunakan vanilla javascript, tidak diperlukan kerangka kerja tambahan.
Demo : http://yabwe.github.io/medium-editor/
Melalui NPM:
Jalankan di konsol Anda: npm install medium-editor
Via Bower:
bower install medium-editor
Melalui CDN eksternal
Untuk versi terbaru:
< 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 " >Untuk yang khusus:
< 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 " >Instalasi Manual:
Unduh rilis terbaru dan lampirkan stylesheet editor menengah ke halaman Anda:
Temukan file yang disebutkan di bawah ini tautan di folder 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 -->Langkah selanjutnya adalah merujuk skrip editor
< script src =" js/medium-editor.js " > </ script >Anda sekarang dapat membuat instantiate objek mediumeditor baru:
< script > var editor = new MediumEditor ( '.editable' ) ; </ script >Kode di atas akan mengubah semua elemen dengan kelas yang dapat diedit menjadi konten yang dapat diedit HTML5 dan menambahkan bilah alat editor menengah ke dalamnya.
Anda juga dapat melewati daftar elemen HTML:
var elements = document . querySelectorAll ( '.editable' ) ,
editor = new MediumEditor ( elements ) ; MediumEditor juga mendukung TextArea. Jika Anda memberikan elemen TextArea, skrip akan membuat div baru dengan contentEditable=true , Sembunyikan TextArea dan tautkan nilai TextArea ke Konten Div HTML.
Orang -orang telah menyumbangkan pembungkus di sekitar MediumEditor untuk berintegrasi dengan kerangka kerja yang berbeda dan tumpukan teknologi. Lihatlah daftar pembungkus dan integrasi yang ada yang telah ditulis untuk MediumEditor!
Lihat dokumentasi Opsi Mediumeditor pada semua opsi yang berbeda untuk MediumEditor.
Opsi untuk menyesuaikan editor sedang dilewati sebagai argumen kedua untuk konstruktor mediumeditor. Contoh:
var editor = new MediumEditor ( '.editor' , {
// options go here
} ) ;'medium-editor-button-active'false | 'Fontawesome'. Default: false Menggunakan 'fontawesome' sebagai tombol -label membutuhkan versi 4.1.0 dari CSS Fontawesome untuk berada di halaman untuk memastikan semua ikon akan ditampilkan dengan benar
0falsefalsefalsefalsedocument.body{}truefalseToolbar untuk mediumeditor diimplementasikan sebagai ekstensi bawaan yang secara otomatis ditampilkan setiap kali pengguna memilih beberapa teks. Toolbar dapat menampung setiap set tombol bawaan yang ditentukan, tetapi juga dapat menahan tombol khusus yang diteruskan sebagai ekstensi.
Opsi untuk toolbar dilewatkan sebagai objek yang merupakan anggota objek Opsi Luar. Contoh:
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 bukannya absolute . Default: nullfalsefalse static sedang digunakan:left | center | right - Ketika opsi statis true , ini menyelaraskan toolbar statis relatif terhadap elemen editor menengah. Default: centertrue , ini memungkinkan/menonaktifkan toolbar "menempel" ke viewport dan tetap terlihat di layar saat halaman menggulir. Default: falsetrue , ini memungkinkan/menonaktifkan memperbarui status tombol bilah alat bahkan ketika seleksi runtuh (tidak ada pilihan, hanya kursor). Default: false Untuk menonaktifkan toolbar (yang juga menonaktifkan ekstensi jangkar preview), atur nilai opsi toolbar ke false :
var editor = new MediumEditor ( '.editable' , {
toolbar : false
} ) ; Perilaku tombol dapat dimodifikasi dengan memasukkan objek ke array tombol, bukan string. Ini memungkinkan untuk mengesampingkan beberapa perilaku default tombol. Opsi berikut adalah beberapa bagian dasar dari tombol yang dapat Anda ganti, tetapi bagian mana pun dari MediumEditor.Extension.prototype dapat ditimpa melalui opsi tombol ini. (Lihat kode sumber untuk tombol untuk melihat apa yang bisa ditimpa semua).
MediumEditor.execAction() Saat tombol diklik.<b> atau <strong> yang menunjukkan teks sudah berani. Jadi array Tagname for Bold adalah: ['b', 'strong']useQueryState diatur ke true .'font-weight' yang diatur ke 700 atau 'bold' , yang menunjukkan teks sudah berani. Jadi objek gaya untuk tebal adalah { prop: 'font-weight', value: '700|bold' }useQueryState diatur ke true .'|' )document.queryCommandState() Metode untuk menentukan apakah tindakan telah diterapkan. Jika tindakan telah diterapkan, tombol akan ditampilkan sebagai 'aktif' di toolbardocument.queryCommandState('bold') yang akan mengembalikan true jika browser berpikir teks sudah tebal, dan false sebaliknyainnerHTML untuk dimasukkan ke dalam tombolinnerHTML untuk digunakan untuk konten tombol jika opsi ButtonLabels untuk mediumeditor diatur ke 'fontawesome' Contoh tombol utama (di sini, tujuannya adalah meniru media dengan memiliki tombol H1 dan H2 yang benar -benar menghasilkan tag <h2> dan <h3> masing -masing):
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'
]
}
} ) ; Pratinjau Anchor adalah ekstensi bawaan yang secara otomatis menampilkan 'tooltip' ketika pengguna melayang di atas tautan di editor. Tooltip akan menampilkan href tautan, dan ketika diklik, akan membuka formulir pengeditan jangkar di toolbar.
Opsi untuk pratinjau jangkar 'tooltip' dilewatkan sebagai objek yang merupakan anggota objek Opsi Luar. Contoh:
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 Untuk menonaktifkan pratinjau Anchor, atur nilai opsi anchorPreview menjadi false :
var editor = new MediumEditor ( '.editable' , {
anchorPreview : false
} ) ; toolbar: false atau atribut data-disable-toolbar ), preview jangkar secara otomatis dinonaktifkan.Penangan placeholder adalah ekstensi bawaan yang menampilkan teks placeholder ketika editor kosong.
Opsi untuk placeholder disahkan sebagai objek yang merupakan anggota objek Opsi Luar. Contoh:
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
}
} ) ; Teks : Menentukan placeholder default untuk ContentEditable kosong ketika placeholder tidak diatur ke false. Anda dapat menimpanya dengan mengatur atribut data-placeholder pada elemen editor. Default: 'Type your text'
HideOnclick : Menyebabkan placeholder menghilang segera setelah lapangan mendapatkan fokus. Default: true . Untuk menyembunyikan placeholder hanya setelah mulai mengetik, dan untuk menunjukkannya lagi segera setelah lapangan kosong, atur opsi ini menjadi false .
Untuk menonaktifkan placeholder, atur nilai opsi placeholder ke false :
var editor = new MediumEditor ( '.editable' , {
placeholder : false
} ) ;Formulir Anchor adalah ekstensi tombol bawaan yang memungkinkan pengguna untuk menambah/mengedit/menghapus tautan dari dalam editor. Ketika 'Anchor' diteruskan sebagai tombol dalam daftar tombol, ekstensi ini akan diaktifkan dan dapat dipicu dengan mengklik tombol yang sesuai di bilah alat.
Opsi untuk formulir jangkar dilewatkan sebagai objek yang merupakan anggota objek opsi luar. Contoh:
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 . Default: false'Paste or type a link'target dari tautan yang dibuat. Default: false'Open in new window'Handler pasta adalah ekstensi bawaan yang berupaya memfilter konten saat pengguna menempel. Bagaimana filter pawang pasta dapat dikonfigurasi melalui opsi tertentu.
Opsi untuk penanganan pasta dilewatkan sebagai objek yang merupakan anggota objek Opsi Luar. Contoh:
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 atau saat memanggil metode pembantu cleanPaste(text) . Penggantian ini dijalankan sebelum penggantian builtin. Bawaan: []true atau saat memanggil metode pembantu cleanPaste(text) . Penggantian ini dieksekusi setelah penggantian builtin. Bawaan: []true atau saat memanggil cleanPaste(text) atau metode pembantu pasteHTML(html,options) . Default: ['class', 'style', 'dir']true atau saat memanggil cleanPaste(text) atau metode pembantu pasteHTML(html,options) . Default: ['meta']true atau ketika memanggil cleanPaste(text) atau metode helper pasteHTML(html,options) . Bawaan: []Penangan perintah keyboard adalah ekstensi bawaan untuk memetakan kombinasi kunci ke tindakan untuk dieksekusi dalam editor.
Opsi untuk keyboardCommands dilewatkan sebagai objek yang merupakan anggota objek Opsi Luar. Contoh:
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() Saat kombinasi kunci digunakanfalse , jalan pintas akan dinonaktifkan Untuk menonaktifkan perintah keyboard, atur nilai opsi keyboardCommands ke false :
var editor = new MediumEditor ( '.editable' , {
keyboardCommands : false
} ) ;Auto-Link Handler adalah ekstensi bawaan yang secara otomatis mengubah URL yang dimasukkan ke dalam bidang teks menjadi tag jangkar HTML (mirip dengan fungsi penurunan harga). Fitur ini tidak aktif secara default.
Untuk mengaktifkan dukungan tautan otomatis bawaan, atur nilai opsi autoLink ke true :
var editor = new MediumEditor ( '.editable' , {
autoLink : true
} ) ;Handler seret gambar adalah ekstensi bawaan untuk menangani seret & menjatuhkan gambar ke dalam yang dapat diedit. Fitur ini aktif secara default.
Untuk menonaktifkan seret gambar bawaan, atur nilai opsi imageDragging ke false :
var editor = new MediumEditor ( '.editable' , {
imageDragging : false
} ) ; Untuk berhenti mencegah acara seret & lepas dan nonaktifkan seret file secara umum, berikan ekstensi pencitraan dummy.
var editor = new MediumEditor ( '.editor' , {
extensions : {
'imageDragging' : { }
}
} ) ;Karena keadaan kode dalam 5.0.0, editor selalu mencegah tindakan seret dan jatuhkan. Kami akan memiliki cara yang lebih baik untuk menonaktifkan seret file dalam 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'
}
} ) ; Secara default, MediumEditor mendukung tombol untuk sebagian besar perintah untuk document.execCommand() yang didukung dengan baik di semua browser yang didukung.
MediumEditor, secara default, hanya akan menampilkan tombol yang tercantum di sini untuk menghindari bilah alat yang besar:
Ini semua adalah tombol built-in yang didukung oleh mediumeditor.
Lihat halaman Wiki untuk daftar tema yang tersedia: https://github.com/yabwe/medium-editor/wiki/themes
Lihat Dokumentasi API Objek MediumEditor di Wiki untuk detail tentang semua metode yang didukung pada objek MediumEditor.
on()importSelection()exportSelection() )saveSelection() dipanggildocument.execCommand('createLink')document.execCommanddocument.queryCommandState(action) untuk memeriksa apakah tindakan tertentu telah diterapkan pada pemilihan.delayinnerHTML yang dipangkas dari elemen pada indexinnerHTML ke html elemen pada indexDimungkinkan untuk secara dinamis menambahkan elemen baru ke instance mediumeditor Anda yang ada:
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')); Melewati elemen atau array elemen ke addElements(elements) akan:
this.elements .<textarea> apa pun:<textarea><div contenteditable=true> baru dan tambahkan ke array elemen. Lurus ke depan, panggil saja removeElements dengan elemen atau serangkaian elemen yang ingin Anda roboh. Setiap elemen itu sendiri akan tetap dapat diedit - itu hanya akan menghapus semua penangan acara dan semua referensi untuk itu sehingga Anda dapat dengan aman menghapusnya dari 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 ) ; Untuk mengamati perubahan apa pun pada konten yang dapat diedit, gunakan peristiwa 'editableInput' khusus yang diekspos melalui metode subscribe() :
var editor = new MediumEditor ( '.editable' ) ;
editor . subscribe ( 'editableInput' , function ( event , editable ) {
// Do some work
} ) ; Acara ini didukung di semua browser yang didukung oleh MediumEditor (termasuk IE9+ dan Edge)! Untuk membantu dengan kasus ketika satu contoh mediumeditor memantau banyak elemen, argumen ke -2 yang diteruskan ke event handler ( editable dalam contoh di atas) akan menjadi referensi ke elemen yang dapat diedit yang benar -benar telah berubah.
Ini berguna ketika Anda perlu menangkap modifikasi apa pun pada elemen yang dapat diedit termasuk:
Mengapa ini menarik dan mengapa Anda harus menggunakan acara ini alih -alih hanya melampirkan ke acara input pada elemen yang dapat diedit?
Jadi untuk sebagian besar browser modern (Chrome, Firefox, Safari, dll.), Acara input berfungsi dengan baik. Bahkan, editableInput hanyalah proksi untuk acara input di browser tersebut. Namun, acara input tidak didukung untuk elemen yang dapat diedit dalam IE 9-11 dan sebagian besar didukung di Microsoft Edge, tetapi tidak sepenuhnya.
Jadi, untuk mendukung acara editableInput dengan benar di Internet Explorer dan Microsoft Edge, MediumEditor menggunakan kombinasi acara selectionchange dan keypress , serta memantau panggilan untuk document.execCommand . ExecCommand.
Periksa dokumentasi untuk mempelajari cara mengembangkan ekstensi untuk mediumeditor.
Daftar ekstensi dan plugin yang ada, seperti gambar dan embed media, tabel dan penurunan harga dapat ditemukan di sini.
Untuk menjalankan demo secara lokal:
npm install dari konsol Anda di rootnode index.js dari roothttp://localhost:8088/demo/index.html untuk melihat demoTugas pengembangan mediumeditor dikelola oleh Grunt. Untuk menginstal semua paket yang diperlukan, cukup minta:
npm installUntuk menjalankan semua tes dan membangun file Dist untuk pengujian di halaman demo, cukup panggil:
gruntIni adalah tugas kasar lainnya yang tersedia:
File sumber terletak di dalam direktori SRC . Pastikan untuk membuat perubahan pada file -file ini dan bukan file di direktori dist.
Bunuh beberapa bug :)
git checkout -b my-new-feature )git commit -am 'Added some feature' ) tanpa file dari direktori dist .git push origin my-new-feature )Untuk membantu membuat kode yang terlihat konsisten di seluruh proyek, kami menggunakan beberapa alat untuk membantu kami. Mereka memiliki plugin untuk editor/IDE paling populer untuk membuat pengkodean untuk proyek kami, tetapi Anda juga harus menggunakannya dalam proyek Anda!
Kami menggunakan JShint pada setiap build untuk menemukan kesalahan yang mudah ditangkap dan potensi masalah di JS kami. Anda dapat menemukan pengaturan JShint kami di file .jshintrc di root proyek.
Kami menggunakan JSC pada setiap build untuk menegakkan beberapa aturan gaya kode yang kami miliki untuk proyek kami. Anda dapat menemukan pengaturan JSCS kami di file .jscsrc di root proyek.
Kami menggunakan EditorConfig untuk mempertahankan gaya pengkodean yang konsisten antara berbagai editor dan IDE. Anda dapat menemukan pengaturan kami di file .editorconfig di root proyek.
Mencari sesuatu yang sederhana untuk kontribusi pertama? Coba perbaiki bug pertama yang mudah!
https://github.com/yabwe/medium-editor/graphs/contributors
Tambahkan org Anda di sini dan kami dapat menambahkan Anda ke halaman arahan kami!
MIT: https://github.com/yabwe/medium-editor/blob/master/license
