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 الذي يوفره Nuxt كما هو موضح هنا:

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

الدعائم

اسم	يكتب	تقصير	وصف
الحززة	صفيف	-	إعلان وحدات Quill للتسجيل
عاجز	منطقية	خطأ شنيع	تعيين على صواب لتعطيل المحرر
المحرر	هدف	-	يوفر كائنًا للاندماج في التكوين الافتراضي (إضافة تنسيقات ، وحدات Quill المخصصة ، ECT)
editortoolbar	صفيف	** طويل جدا للجدول. انظر مثال شريط الأدوات أدناه	استخدم شريط أدوات مخصص
بطاقة تعريف	خيط	Quill-container	اضبط المعرف (ضروري إذا كان العديد من المحررين في نفس العرض)
عنصر نائب	خيط	-	نص نائب للمحرر
usecustomImageHandler	منطقية	خطأ شنيع	التعامل مع تحميل الصورة بدلاً من استخدام التحويل الافتراضي إلى BASE64
طراز V.	خيط	-	قم بتعيين نموذج V على خاصية المحتوى أو البيانات التي ترغب في ربطها بها

الأحداث

اسم	حدود	وصف
طمس	ريشة	ينبعث من حدث blur
ركز	ريشة	المنبعث في حدث focus
مضافة للصور	ملف ، محرر ، cursorlocation	ينبعث عندما يكون useCustomImageHandler صحيحًا ويتم إضافة الصورة إلى المحرر
تم التقاط الصور	ملف ، محرر ، cursorlocation	المنبعث عندما يكون useCustomImageHandler صحيحًا وتم حذف الصورة
اختيار الاختيار	المدى ، Oldrange ، المصدر	انبعث في حدث selection-change من Quill
تغيير النص	دلتا ، أولدتيلتا ، المصدر	انبعث في حدث text-change

أمثلة

مثال - الإعداد الأساسي

< 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. موضع المؤشر في وقت التحميل حتى يمكن إدراج الصورة في الموضع الصحيح عند النجاح

ملاحظة بالإضافة إلى هذا المثال ، قمت بإنشاء مثال على إعادة توضيح هذه الميزة الجديدة مع خادم فعلي.

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

كيفية استخدام وحدات Quill المخصصة

هناك طريقتان لاستخدام وحدات مخصصة مع Vue2Editor. ويرجع ذلك جزئيًا إلى وجود حالات يتم فيها إلقاء الأخطاء عند استيرادها ومحاولتها إعلان الوحدات المخصصة ، ويرجع ذلك جزئيًا إلى أن ذلك يفصل بالفعل المخاوف بشكل جيد.

الإصدار 1 - استيراد وتسجيل نفسك

Vue2Editor يصدر الآن Quill للمساعدة في هذه العملية.

1. عند استيراد Vueeditor ، استيراد Quill أيضًا.
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

(الطريقة الموصى بها)

1. استيراد وحداتك المخصصة
2. استخدم دعامة 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 : RUN ESLINT

رخصة

معهد ماساتشوستس للتكنولوجيا