pen

Editor pena

• Demo Langsung: http://sofish.github.io/pen
• Markdown didukung
• Status Bangun:

---

---

0. Kode Sumber

Anda dapat mengkloning kode sumber dari GitHub, atau menggunakan Bower.

 bower install pen

1. Instalasi

1.1 init dengan Atribut ID

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

1.2 init dengan elemen

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

1.3 init dengan opsi

 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. Konfigurasikan

Objek berikut mengatur pengaturan default pena:

 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
}

Jika Anda ingin menyesuaikan bilah alat agar sesuai dengan proyek Anda sendiri, Anda dapat membuat konstruktor Pen dengan objek options seperti #1.3: init dengan opsi:

2.1 Fallback untuk Browser Lama

Anda dapat mengatur defaults.textarea ke sepotong string html, secara default, itu <textarea name="content"></textarea> 。Ini ini akan ditetapkan sebagai innerHTML dari #editor Anda.

2.2 Ubah Kelas Editor

Pena akan menambahkan .pen ke editor Anda secara default, jika Anda ingin mengubah kelas, pastikan untuk mengganti nama pen kelas Anda di src/pen.css .

2.3 Aktifkan Mode Debug

Jika options.debug diatur ke true , pena akan mengeluarkan log ke konsol browser Anda.

2.4 Kustomisasi toolbar

Anda dapat mengatur options.list ke Array , tambahkan string berikut untuk membuat sendiri:

• blockquote , h2 , h3 , p , pre : Buat tag sebagai makna literalnya
• insertorderedlist : Buat daftar ol>li
• insertunorderedlist : Buat daftar ul>li
• indent : Daftar Indent / BlockQuote Block
• outdent : Outdent List / BlockQuote Block
• bold : Bungkus pilihan teks dalam tag b
• italic : Bungkus pilihan teks dalam tag i
• underline : Bungkus pilihan teks dalam tag u
• createlink : Masukkan tautan ke pilihan teks
• inserthorizontalrule : Masukkan tag hr
• insertimage : Masukkan tag gambar ( img )

2.5 Tambahkan tooltips ke ikon toolbar

Anda dapat mengatur options.titles ke objek dengan properti yang cocok dengan tindakan bilah alat. Nilai setiap properti akan digunakan sebagai atribut judul pada ikon. Sebagian besar browser akan menampilkan atribut judul sebagai tooltip ketika mouse melayang di atas ikon.

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

Jika Anda menggunakan Bootstrap atau JQueryUI, Anda dapat menstandarkan gaya Tooltip dengan menambahkan $('i.pen-icon').tooltip() ke JavaScript Anda.

2.6 Mencegah pengalihan halaman yang tidak aman

Secara default, pena akan mencegah pengalihan halaman yang tidak aman saat mengedit, untuk mematikannya, options.stay spesifik. Masukkan ke false .

Catatan: Jika defaults.debug diatur ke true dan default.stay tidak disetel: defaults.stay == !defaults.debug .

2.7 Nonaktifkan dan mengaktifkan kembali editor

Anda dapat menonaktifkan metode editor pena dengan call destroy() dari var pen = new Pen(options) . menyukai:

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

pen . destroy ( ) ; // return itself

Dan, ada metode yang sesuai yang disebut rebuild() untuk mengaktifkan kembali editor:

 pen . rebuild ( ) ; // return itself 

2.8 Konten Ekspor sebagai Markdown

Ini fitur eksperimental

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

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

3. Dukungan Sintaks Markdown

3.1 Instal

Konvertor sintaks akan diaktifkan secara otomatis dengan menautkan markdown.js setelah `pen.js:

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

3.2 Penggunaan

Untuk menggunakannya, Anda dapat mengetikkan action cmd + space key pada awal garis. menyukai:

 ### This will create a h3 tag

CMD berikut diizinkan:

• Judul: Tipe 1 ~ 6 # di garis mulai
• Daftar yang tidak dipesan: Ketik - atau *
• Daftar yang dipesan: Tipe 1.
• Blok Kode: Ketik `` `
• Kutipan blok: ketik >
• Aturan Horizontal: Lebih dari 3 - , * , . akan membuat <hr /> seperti ......

4. Lisensi

Berlisensi di bawah MIT.

5. dipercaya oleh *