my vue editor

My-vue-editor

ตัวแก้ไขข้อความที่หลากหลายตาม vue2.x
中文文档

การสาธิต

คลิกที่นี่เพื่อดูการสาธิต
การสาธิตเพิ่มเติมโปรดดูที่ไดเรกทอรีตัวอย่าง

การแนะนำ

บรรณาธิการของเราขึ้นอยู่กับการพัฒนารองของ Vue-HTML5-Editor ต้องขอบคุณผู้แต่ง Peaktai ที่ให้บริการปลั๊กอินตัวแก้ไขข้อความที่กระชับอย่างย่อบนพื้นฐานที่เราได้เขียนวิธีการดั้งเดิมและขยายฟังก์ชั่น

ติดตั้ง

 npm install my - vue - editor

แนะนำเป็นปลั๊กอิน

 import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue . use ( myVueEditor , options )

บทนำทั่วโลก

 < script src =" serverpath/vue.js " > </ script >
< script src =" serverpath/dist/my-vue-editor.js " > </ script >

ติดตั้งโดยตัวแปรส่วนกลาง myVueEditor

 Vue . use ( myVueEditor , options )

ใช้

 < my-vue-editor :content =" content " @change =' ctnChange ' @imageUpload =' imageUpload ' > </ my-vue-editor > 

การกำหนดค่า

รายการ	พิมพ์	คำอธิบาย
ชื่อ	สาย	ชื่อองค์ประกอบที่กำหนดเองค่าเริ่มต้นคือ My-vue-editor
โมดูล	อาร์เรย์	โมดูลจำเป็นต้องใช้
ไอคอน	วัตถุ	ครอบคลุมไอคอนของโมดูลที่ระบุ
คำสั่ง	วัตถุ	คำสั่งที่กำหนดเอง
ทางลัด	วัตถุ	ทางลัดที่กำหนดเอง
Extendmodules	อาร์เรย์	โมดูลที่กำหนดเอง
ชื่อโมดูลในตัวใด ๆ	วัตถุ	เขียนทับคุณสมบัติของโมดูลในตัวที่สอดคล้องกัน

ตัวอย่าง

 Vue . use ( myVueEditor , {
  // Overlay built-in module's icon
  icons : {
    image : 'iui-icon iui-icon-pic' ,
    indent : 'iui-icon iui-icon-insert'
  } ,
  // Modules in use
  modules : [
    'font' ,
    'bold' ,
    'italic' ,
    'underline' ,
    'linethrough' ,
    'ul' ,
    'indent' ,
    'align' ,
    'image' ,
    'quote' ,
    'todo' ,
    // This is a custom module
    'customSave'
  ] ,
  // Overlay image module's configuration
  image : {
    maxSize : 5120 * 1024 ,
    imgOccupyNewRow : true ,
    compress : {
      width : 1600 ,
      height : 1600 ,
      quality : 0.8
    }
  } ,
  // Overlay font module's configuration
  font : {
    config : {
      'xx-large' : {
        fontSize : 6 ,
        name : 'H1'
      } ,
      'medium' : {
        fontSize : 3 ,
        name : 'H2'
      } ,
      'small' : {
        fontSize : 2 ,
        name : 'H3'
      } ,
      default : 'medium'
    } ,
    // Modify the font module's module inspect mechanism to inspect via style and tag name
    inspect ( add ) {
      add ( 'style' , {
        fontSize : [ 'xx-large' , 'x-large' , 'large' , 'medium' , 'small' ]
      } ) . add ( 'tag' , 'font' )
    }
  } ,
  // Overlay ul module's configuration
  ul : {
    // When the ul module is inspected, disabled all but itself
    exclude : 'ALL_BUT_MYSELF' ,
    // When the ul module is clicked, execute the following method
    handler ( rh ) {
     console . log ( 'i am ul!' )
     rh . editor . execCommand ( 'insertUnorderedList' )  
    }
  } ,
  // When the ul module is inspected, disabled image, todo and ul module
  quote : {
    exclude : [ 'image' , 'todo' , 'ul' ]
  } ,
  // Customize an command named getAllTexts that prints out all the text nodes under the current range object
  commands : {
    getAllTexts ( rh , arg ) {
      console . log ( rh . getAllTextNodeInRange ( ) )
    }
  } ,
  shortcut : {
    // Custom a shortcut key, when you press the command + s, execute the save function
    saveNote : {
      metaKey : true ,
      keyCode : 83 ,
      handler ( editor ) {
        save ( )
      }
    }
  } ,
  // Customize a module, a alert pops up when you click on the module icon
  extendModules : [ {
     name : 'smile' ,
     icon : 'iui iui-icon-smile'
     handler ( rh ) {
      alert ( 'smile~~' )
     }
  } ]
} ) 

เหตุการณ์

ชื่อเหตุการณ์	คำอธิบาย
เปลี่ยน	ทริกเกอร์เมื่อมีการเปลี่ยนแปลงเนื้อหาของตัวแก้ไขพารามิเตอร์เป็นข้อมูลเนื้อหาที่ทันสมัย
ImageUpload	ทริกเกอร์เมื่ออัปโหลดรูปภาพพารามิเตอร์รวมถึงข้อมูลที่เกี่ยวข้องของภาพ， replacesRcafteruploadfinish: ใช้เพื่อแทนที่แอตทริบิวต์ SRC ของ IMG จากรูปแบบ Base64 ไปยัง URL ที่ส่งคืนโดยเซิร์ฟเวอร์เมื่อการอัปโหลดสำเร็จ) deleteimgwhenuploadfail: ใช้เพื่อลบรูปภาพปัจจุบันเมื่อการอัปโหลดล้มเหลว

ปรับเปลี่ยนโมดูลในตัว

เพิ่มพารามิเตอร์ที่มีชื่อโมดูลในตัวเป็นคีย์จะครอบคลุมคุณสมบัติดั้งเดิมของโมดูลในตัว (ดูโมดูลในตัวทั้งหมดและรายการการกำหนดค่าในไดเรกทอรี SRC/โมดูล)

นำโมดูลรูปภาพเป็นตัวอย่าง

 Vue . user ( myVueEditor , {
  image : {
    // Modify the image module's icon
    icon : 'iui-pic' ,
    // Cover the original compression parameters, so that the image is not compressed when uploaded
    compress : null ,
    // Can not upload the same image repeatedly
    canUploadSameImage : false
  }
} ) 

โมดูล Cutom

ขยายโมดูลด้วยรายการการกำหนดค่า ExtendModules เรามีรายการการกำหนดค่าโมดูลทั่วไปบางรายการ

รายการ	พิมพ์	คำอธิบาย
ชื่อ	สาย	ชื่อโมดูล
ไอคอน	สาย	ชื่อคลาสของโมดูลไอคอน， ไอคอน fontawesome ถูกใช้โดยค่าเริ่มต้น
แยกออก	อาร์เรย์สตริง	ปิดใช้งานโมดูลเมื่อมีการตรวจสอบโมดูลปัจจุบัน เมื่อค่าคือ 'ทั้งหมด' หมายถึงการปิดใช้งานโมดูลทั้งหมดรวมโมดูลปัจจุบัน เมื่อค่าคือ all_but_myself 'หมายถึงปิดใช้งานโมดูลทั้งหมด แต่โมดูลปัจจุบัน เมื่อค่าเป็นประเภทของอาร์เรย์ชื่อโมดูลอินพุตที่จะปิดใช้งาน
ตรวจสอบ	การทำงาน	การตรวจสอบโมดูล， เมื่อเคอร์เซอร์อยู่ในรายการโมดูลรายการจะถูกเน้นนั่นคือโมดูลรายการจะถูกตรวจสอบซึ่งขึ้นอยู่กับฉลาก UL เป็นพื้นฐานการทดสอบ อาร์กิวเมนต์แรกของฟังก์ชั่นคือวิธีการที่ชื่อเพิ่มซึ่งเรียกว่าเพื่อเพิ่มพื้นฐานการตรวจสอบของโมดูล เมื่อมีฐานการตรวจสอบหลายฐานโปรดโทรไปที่การผูกมัด พารามิเตอร์แรกของวิธีเพิ่มหมายถึงเส้นทางที่จะทดสอบ ตัวเลือกคือ 'แท็ก' 'สไตล์' และ 'แอตทริบิวต์' เมื่อพารามิเตอร์ 1 คือ 'แท็ก' พารามิเตอร์ 2 จะผ่านในสตริงชื่อแท็ก เมื่อพารามิเตอร์ 1 คือ 'สไตล์' พารามิเตอร์ 2 เป็นวัตถุที่มี stylename เป็นคีย์และ stylevalue เป็นค่า หมายเหตุ stylename ใช้แบบฟอร์ม hump （Ex： FontSize)） เมื่อมีหลายสไตล์โปรดใช้รูปแบบของอาร์เรย์ เมื่อพารามิเตอร์ 1 คือ 'แอตทริบิวต์' พารามิเตอร์ 2 เป็นวัตถุที่คีย์คือชื่อแอตทริบิวต์และค่าแอตทริบิวต์คือค่าและโปรดทราบว่าหากต้องการค่าใด
ผู้ดูแล	การทำงาน	จะทำอย่างไรเมื่อคุณคลิกโมดูล พารามิเตอร์ 1 เป็นอินสแตนซ์ตัวจัดการช่วงซึ่งคุณจะได้รับอินสแตนซ์ VUE ของตัวแก้ไขปัจจุบันและวิธีการใช้งานช่วง เราไม่แนะนำช่วงการใช้งานโดยตรงในตัวจัดการ แต่ควรห่อหุ้มการกระทำของช่วงเป็นคำสั่งเรียกใช้คำสั่งผ่านวิธีการ execommand ภายใต้อินสแตนซ์ของตัวแก้ไขในตัวจัดการ
แท็บ	อินสแตนซ์ VUE	โมดูลทั่วไปใช้ตัวจัดการสำหรับการจัดการคลิกและหากคุณต้องการใช้ UI (รายการแบบเลื่อนลงของโมดูลตัวอักษร) หรือตรรกะที่ซับซ้อนมากขึ้น
การเริ่มต้น	การทำงาน	สอดคล้องกับวัฏจักรชีวิตส่วนประกอบของตัวแก้ไขที่สร้างขึ้นพารามิเตอร์ 1 คืออินสแตนซ์ของตัวแก้ไข โปรดทราบว่าไม่สามารถใช้วิธีการ ExecCommand ได้ในเวลานี้
ติดตั้ง	การทำงาน	สอดคล้องกับวงจรชีวิตส่วนประกอบของตัวแก้ไขพารามิเตอร์ 1 คืออินสแตนซ์ของตัวแก้ไข
อัปเดต	การทำงาน	สอดคล้องกับวัฏจักรชีวิตขององค์ประกอบตัวแก้ไขที่อัปเดตพารามิเตอร์ 1 คืออินสแตนซ์ของตัวแก้ไข
ถูกทำลาย	การทำงาน	สอดคล้องกับวงจรชีวิตส่วนประกอบของตัวแก้ไขที่ Beforedestroy พารามิเตอร์ 1 คืออินสแตนซ์ของตัวแก้ไข