تنزيل jodit vue - تنزيل رمز المصدر jodit vue

jodit vue

موارد أخرى

1.0.0

تنزيل

Jodit Vue

غلاف Vue لمحرر Jodit

كيفية استخدام

استخدم الإصدار 2.* لـ Vue 2
استخدم الإصدار 3.* لـ Vue 3

تثبيت Jodit Vue :

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

استيراده واستخدامه

نظرًا لأن هذا المكون مجرد غلاف ، فأنت بحاجة إلى تضمين css لمحرر Jodit على تطبيقك حتى يعمل بشكل صحيح ، إذا كنت تستخدم vue-cli لإنشاء تطبيقك ، أو نظام إنشاء آخر يمكنك استيراده مباشرة أو إضافة علامة link مع ملف css الذي توفره حزمة Jodit Package.

 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`	الأزرار التي تريد عرضها على شريط الأدوات ، إذا لم يتم توفير ذلك ، فسيتم عرض جميع الأزرار
extrabuttons	صفيف	`null`	إذا كنت بحاجة إلى إنشاء أزرار مخصصة وعرضها ، فيمكنك تمرير صفيف مع أزرار مخصصة لهذه الخاصية
تكوين	هدف	`{}`	كائن التكوين الذي يحتوي على جميع التكوينات الأخرى للمحرر
الإضافات	صفيف	`[]`	إذا كنت بحاجة إلى إنشاء ملحقات مخصصة ، فيمكنك تمرير مجموعة من الإضافات إلى هذه الخاصية

خاصية الأزرار

عند توفير الأزرار لعرضها على المحرر ، ستحتاج إلى تزويد صفيف بالأزرار التي تريد عرضها. يمكن العثور على أسماء الأزرار هنا . يمكنك أيضا تمرير | لوضع مقسم بين الأزرار.

< 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

خاصية التكوين

يتيح لك هذا التكوين تمرير جميع التكوينات الأخرى الموجودة هنا لتخصيص المحرر الخاص بك

خاصية الإضافات

تتيح لك Plugins Property تمرير مجموعة من كائنات البرنامج المساعد مع الاسم والاستدعاء الذي سيتم تهيئته عند تهيئة JODIT. تتم تهيئة المكونات الإضافية على مستوى العالم وسيتم إضافتها إلى جميع مثيلات محرر Jodit. على سبيل المثال:

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