ดาวน์โหลด jodit vue - jodit vue แหล่งที่มาดาวน์โหลด

jodit vue

ทรัพยากรอื่นๆ

1.0.0

ดาวน์โหลด

jodit vue

Vue wrapper สำหรับ jodit editor

วิธีใช้

ใช้เวอร์ชัน 2* สำหรับ Vue 2
ใช้เวอร์ชัน 3* สำหรับ Vue 3

ติดตั้ง jodit vue :

 npm install jodit-vue --save
// or with Yarn
yarn add jodit-vue

นำเข้าและใช้งาน

เนื่องจากส่วนประกอบนี้เป็นเพียง wrapper คุณต้องรวม css ของ jodit editor ในแอพของคุณเพื่อให้ทำงานได้อย่างถูกต้องหากคุณใช้ vue-cli เพื่อสร้างแอปของคุณหรือระบบบิลด์อื่นที่คุณสามารถนำเข้าโดยตรงหรือเพิ่มแท็ก link ด้วยไฟล์ css ที่จัดทำโดยแพ็คเกจ jodit editor

 import 'jodit/build/jodit.min.css'
import Vue from 'vue'
import JoditVue from 'jodit-vue'

Vue . use ( JoditVue )

แทนที่จะใช้ Vue.use(JoditVue) คุณสามารถใช้ส่วนประกอบในเครื่อง

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

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> '
        }
    }
}
</ script >

คุณสามารถตรวจสอบและทดสอบบน codesanbox ได้เช่นกัน

ใช้โดยไม่มีระบบสร้าง

หากคุณไม่ได้ใช้ระบบบิลด์บนแอพของคุณคุณสามารถใช้ jodit vue โดยไม่มีปัญหาตรวจสอบและทดสอบใน JSFIDDLE นี้

คุณสมบัติส่วนประกอบ

หากคุณผ่านเฉพาะ v-model สำหรับส่วนประกอบมันจะโหลดคุณสมบัติของตัวแก้ไขทั้งหมดหากคุณต้องการปรับแต่งมันคุณสามารถทำได้ด้วยคุณสมบัติที่แสดงอยู่ด้านล่าง แต่ไม่จำเป็นทั้งหมด

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
ปุ่ม	อาร์เรย์	`null`	ปุ่มที่คุณต้องการแสดงบนแถบเครื่องมือหากไม่ได้ให้ไว้จะมีการแสดงปุ่มทั้งหมด
การออกเสียง	อาร์เรย์	`null`	หากคุณต้องการสร้างและแสดงปุ่มที่กำหนดเองคุณสามารถผ่านอาร์เรย์ด้วยปุ่มที่กำหนดเองของคุณไปยังคุณสมบัตินี้
การกำหนดค่า	วัตถุ	`{}`	วัตถุกำหนดค่าที่มีการกำหนดค่าอื่น ๆ ทั้งหมดสำหรับตัวแก้ไข
ปลั๊กอิน	อาร์เรย์	`[]`	หากคุณต้องการสร้างปลั๊กอินที่กำหนดเองคุณสามารถส่งอาร์เรย์ของปลั๊กอินไปยังคุณสมบัตินี้

คุณสมบัติปุ่ม

เมื่อให้ปุ่มเพื่อแสดงบนตัวแก้ไขคุณจะต้องจัดเตรียมอาร์เรย์ด้วยปุ่มที่คุณต้องการแสดง ชื่อปุ่มสามารถพบได้ ที่นี่ คุณยังสามารถผ่าน A | เพื่อวางตัวแบ่งระหว่างปุ่ม

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ]
        }
    }
}
</ script >

คุณสมบัติปุ่มพิเศษ

หากคุณต้องการสร้างปุ่มที่กำหนดเองไปยังตัวแก้ไขคุณสามารถสร้างและจัดเตรียมอาร์เรย์ให้กับส่วนประกอบ

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :buttons = " buttons " :extra-buttons = " customButtons " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            buttons : [ ' source ' , ' image ' , ' | ' , ' bold ' , ' underline ' , ' italic ' ],
            customButtons : [
                {
                    name : ' insertDate ' ,
                    iconURL : ' http://xdsoft.net/jodit/logo.png ' ,
                    exec : function ( editor ) {
                        editor . selection . insertHTML (( new Date ). toDateString ());
                    }
                }
            ]
        }
    }
}
</ script >

หากต้องการสร้างปุ่มที่กำหนดเองให้ตรวจสอบ เอกสารตัวแก้ไข jodit

อสังหาริมทรัพย์

การกำหนดค่านี้ช่วยให้คุณสามารถผ่านการกำหนดค่าอื่น ๆ ทั้งหมดที่พบ ที่นี่ เพื่อปรับแต่งตัวแก้ไขของคุณ

คุณสมบัติปลั๊กอิน

คุณสมบัติปลั๊กอินช่วยให้คุณสามารถผ่านอาร์เรย์ของวัตถุปลั๊กอินที่มีชื่อและการโทรกลับซึ่งจะเริ่มต้นเมื่อ jodit เริ่มต้น ปลั๊กอินจะเริ่มต้นทั่วโลกและจะเพิ่มเข้าไปในทุกกรณีของ jodit editor ตัวอย่างเช่น:

< template >
    < div id = " app " >
        < jodit-editor v-model = " content " :plugins = " plugins " />
    </ div >
</ template >

< script >
import ' jodit/build/jodit.min.css '
import { JoditEditor } from ' jodit-vue '

export default {
    name : ' app ' ,

    components : { JoditEditor },

    data () {
        return {
            content : ' <h1>Hello Jodit Vue</h1> ' ,
            plugins : [
              {
                name : ' example ' ,
                callback : function ( editor ) {
                  editor . events . on ( ' afterInit ' , function () {
                    console . warn ( ' Example plugin has beed initialized, check Jodit documentation for more details. ' )
                  })
                }
              }
            ]
        }
    }
}
</ script >