vue2 editor

Vue2Editor

เครื่องมือแก้ไขข้อความที่ใช้งานง่าย แต่ยังใช้งานง่ายและปรับแต่งได้โดย quill.js และ vue.js

ดูเอกสาร

บันทึกย่อ

ติดตั้ง

คุณสามารถใช้เส้นด้ายหรือ NPM

npm install vue2-editor

หรือ

yarn add vue2-editor

การใช้งาน

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ; 

nuxt.js

เพิ่ม vue2-editor/nuxt ไปยังส่วนโมดูลของ nuxt.config.js

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

เพื่อหลีกเลี่ยงการเห็นคำเตือนจาก Vue เกี่ยวกับเนื้อหาที่ไม่ตรงกันคุณจะต้องห่อส่วนประกอบ VueEditor ด้วยส่วนประกอบของ client-only ที่ Nuxt ให้ไว้ตามที่แสดงไว้ที่นี่:

 < client-only >
  < VueEditor />
</ client-only > 

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
แบบกำหนดเอง	อาร์เรย์	-	ประกาศโมดูลขนนกเพื่อลงทะเบียน
พิการ	บูลีน	เท็จ	ตั้งค่าเป็นจริงเพื่อปิดการใช้งานตัวแก้ไข
EditorOptions	วัตถุ	-	เสนอวัตถุสำหรับการรวมเข้ากับการกำหนดค่าเริ่มต้น (เพิ่มรูปแบบ, โมดูล Quill ที่กำหนดเอง, ECT)
Editortoolbar	อาร์เรย์	** ยาวเกินไปสำหรับโต๊ะ ดูตัวอย่างแถบเครื่องมือด้านล่าง	ใช้แถบเครื่องมือที่กำหนดเอง
รหัสประจำตัว	สาย	หน้าตา	ตั้งค่า ID (จำเป็นหากมีตัวแก้ไขหลายตัวในมุมมองเดียวกัน)
ผู้ถือครองตำแหน่ง	สาย	-	ข้อความตัวยึดสำหรับบรรณาธิการ
usecustomimageHandler	บูลีน	เท็จ	จัดการการอัปโหลดรูปภาพแทนการใช้การแปลงเริ่มต้นเป็น base64
V-model	สาย	-	ตั้งค่า V-model เป็นคุณสมบัติเนื้อหาหรือข้อมูลที่คุณต้องการผูกไว้

เหตุการณ์

ชื่อ	พารามิเตอร์	คำอธิบาย
เบลอ	ขนนก	ปล่อยออกมาจากเหตุการณ์ blur
จุดสนใจ	ขนนก	ปล่อยออกมาในเหตุการณ์ focus
เพิ่มภาพ	ไฟล์, editor, cursorLocation	ปล่อยออกมาเมื่อ useCustomImageHandler เป็นจริงและรูปภาพจะถูกเพิ่มเข้าไปในตัวแก้ไข
ลบภาพ	ไฟล์, editor, cursorLocation	ปล่อยออกมาเมื่อ useCustomImageHandler เป็นจริงและรูปภาพถูกลบ
การเปลี่ยนแปลงการเลือก	ช่วงเก่าแหล่งที่มา	ปล่อยออกมาจากเหตุการณ์ selection-change ของ Quill
การเปลี่ยนข้อความ	Delta, Olddelta, แหล่งที่มา	ปล่อยออกมาจากเหตุการณ์ text-change ของ Quill

ตัวอย่าง

ตัวอย่าง - การตั้งค่าพื้นฐาน

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

ตัวอย่าง - ตัวจัดการภาพที่กำหนดเอง

หากคุณเลือกที่จะใช้ตัวจัดการภาพที่กำหนดเองเหตุการณ์จะถูกปล่อยออกมาเมื่อเลือกภาพถ่าย AA คุณสามารถดูด้านล่างว่า 3 พารามิเตอร์จะผ่าน

1. มันผ่านไฟล์ที่จะจัดการตามที่คุณต้องการ
2. อินสแตนซ์ของตัวแก้ไข
3. ตำแหน่งเคอร์เซอร์ในเวลาที่อัปโหลดเพื่อให้สามารถแทรกภาพได้ที่ตำแหน่งที่ถูกต้องในความสำเร็จ

หมายเหตุ นอกเหนือจากตัวอย่างนี้ฉันได้สร้างตัวอย่าง repo ที่แสดงคุณสมบัติใหม่นี้ด้วยเซิร์ฟเวอร์จริง

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

ตัวอย่าง - ตั้งค่าเนื้อหาหลังจากโหลดหน้าเว็บ

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

ตัวอย่าง - การใช้บรรณาธิการหลายตัว

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

ตัวอย่าง - แถบเครื่องมือที่กำหนดเอง

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

ตัวอย่าง - การบันทึกเนื้อหา

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

ตัวอย่าง - ใช้ตัวอย่างสด

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
    < div v-html = " content " ></ div >
  </ div >
</ template >

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

วิธีใช้โมดูลขนนกที่กำหนดเอง

มีสองวิธีในการใช้โมดูลที่กำหนดเองกับ Vue2Editor ส่วนหนึ่งเป็นเพราะมีกรณีที่ข้อผิดพลาดถูกโยนทิ้งเมื่อนำเข้าและพยายามประกาศโมดูลที่กำหนดเองและส่วนหนึ่งเป็นเพราะฉันเชื่อว่าจริง ๆ แล้วมันแยกความกังวลออกมาอย่างดี

เวอร์ชัน 1 - นำเข้าและลงทะเบียนด้วยตัวเอง

Vue2Editor ตอนนี้ส่งออกขนนกเพื่อช่วยในกระบวนการนี้

1. เมื่อนำเข้า VueEditor ให้นำเข้าขนนก
2. นำเข้าโมดูลที่กำหนดเองของคุณ
3. ลงทะเบียนโมดูลที่กำหนดเองด้วย Quill
4. เพิ่มการกำหนดค่าที่จำเป็นในวัตถุ editorOptions

< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

เวอร์ชัน 2 - คุณนำเข้า | Vue2Editor Registers

(วิธีที่แนะนำ)

1. นำเข้าโมดูลที่กำหนดเองของคุณ
2. ใช้ Prop customModules เพื่อประกาศอาร์เรย์ของโมดูล
3. เพิ่มการกำหนดค่าที่จำเป็นสำหรับโมดูลเหล่านั้นในวัตถุ editorOptions ภายใต้โมดูลดังที่เห็นด้านล่าง

< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

---

การพัฒนา

Vue2Editor ใช้ POI เพื่อการพัฒนา

• yarn dev : รันตัวอย่างในโหมดการพัฒนา
• yarn docs : การพัฒนาเอกสาร
• yarn build : สร้างส่วนประกอบในรูปแบบทั้งสอง
• yarn lint : เรียกใช้ ESLINT

ใบอนุญาต

มิกซ์