pen

บรรณาธิการปากกา

• การสาธิตสด: http://sofish.github.io/pen
• รองรับ Markdown
• สร้างสถานะ:

---

---

0. ซอร์สโค้ด

คุณสามารถโคลนซอร์สโค้ดจาก GitHub หรือใช้ Bower

 bower install pen

1. การติดตั้ง

1.1 init พร้อมแอตทริบิวต์ ID

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

1.2 init พร้อมองค์ประกอบ

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

1.3 init พร้อมตัวเลือก

 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
}

หากคุณต้องการปรับแต่งแถบเครื่องมือให้พอดีกับโครงการของคุณเองคุณสามารถ Instanciate Pen Constructor ด้วยวัตถุ options เช่น #1.3: init พร้อมตัวเลือก:

2.1 ทางเลือกสำหรับเบราว์เซอร์เก่า

คุณสามารถตั้งค่า defaults.textarea เป็นชิ้นส่วนของสตริง HTML โดยค่าเริ่มต้นมันคือ <textarea name="content"></textarea> 。จะถูกตั้งค่าเป็น innerHTML ของ #editor ของคุณ

2.2 เปลี่ยนคลาส Editor

ปากกาจะเพิ่ม .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 : รายการเยื้อง / blockquote block
• outdent : outdent list / blockquote block
• 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 ป้องกันการเปลี่ยนเส้นทางหน้าไม่ปลอดภัย

โดยค่าเริ่มต้นปากกาจะป้องกันไม่ให้หน้าเว็บที่ไม่ปลอดภัยเปลี่ยนเส้นทางเมื่อแก้ไขเพื่อปิด options.stay เฉพาะเลือกเป็น false

หมายเหตุ: หาก defaults.debug ถูกตั้งค่าเป็น true และ default.stay ไม่ได้ตั้งค่า: defaults.stay == !defaults.debug

2.7 ปิดการใช้งานและเปิดใช้งานอีกครั้ง

คุณสามารถปิดใช้งานตัวแก้ไขปากกาได้โดยวิธีการ destroy() ของวัตถุ var pen = new Pen(options) ชอบ:

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

pen . destroy ( ) ; // return itself

และมีวิธีการที่สอดคล้องกันที่เรียกว่า rebuild() เพื่อเปิดใช้งานตัวแก้ไขอีกครั้ง:

 pen . rebuild ( ) ; // return itself 

2.8 เนื้อหาส่งออกเป็น markdown

เป็นคุณสมบัติการทดลอง

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

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

3. การสนับสนุนไวยากรณ์ของ Markdown

3.1 ติดตั้ง

ตัวแปลงไวยากรณ์จะเปิดใช้งานโดยอัตโนมัติโดยเชื่อมโยง markdown.js หลังจาก `pen.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.
• บล็อกรหัส: พิมพ์ `` `
• บล็อกใบเสนอราคา: พิมพ์ >
• กฎแนวนอน: มากกว่า 3 - , * . จะสร้าง <hr /> เช่น ......

4. ใบอนุญาต

ได้รับใบอนุญาตภายใต้ MIT

5. เชื่อถือได้โดย *