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 > 

إعدادات

أغراض	يكتب	وصف
اسم	خيط	اسم المكون المخصص ، الافتراضي هو محررتي
الوحدات النمطية	صفيف	تحتاج الوحدات إلى الاستخدام
أيقونات	هدف	تغطي رمز الوحدة النمطية المحددة
الأوامر	هدف	أمر مخصص
اختصار	هدف	اختصار مخصص
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	تشغيل عند تحميل الصور ، تتضمن المعلمات البيانات المقابلة للصورة ， PlacesRcafterUploadFinish: يستخدم لاستبدال سمة SRC لـ IMG من تنسيق BASE64 إلى عنوان URL الذي تم إرجاعه بواسطة الخادم عندما يكون التحميل ناجحًا） deleteimgwhenuploadfail: يستخدم لحذف الصورة الحالية عند فشل التحميل

تعديل الوحدة المدمجة

أضف معلمة تحمل اسم الوحدة النمطية المدمجة كمفتاح ، ستغطي الخصائص الأصلية للوحدة النمطية (انظر جميع الوحدات المدمجة وعناصر التكوين الخاصة بها في دليل SRC/MODULES）

خذ وحدة الصورة كمثال

 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 كأساس اختبار الوسيطة الأولى للدالة هي طريقة تدعى ADD ، والتي تم استدعاؤها لإضافة أساس فحص الوحدة النمطية. عندما تكون هناك قواعد تفتيش متعددة ، يرجى الاتصال بالسلاسل تشير المعلمة الأولى لطريقة إضافة إلى مسار الاختبار. الاختياري هو "النمط" و "السمة" عندما تكون المعلمة 1 هي "علامة" ، تمر المعلمة 2 في سلسلة اسم العلامة عندما تكون المعلمة 1 هي "النمط" ، فإن المعلمة 2 هي كائن ذو اسم stylename كمفتاح وقيمة نمط كقيمة. ملاحظة stylename استخدم نموذج الحدبة （（： fontsize） ， عندما يكون هناك العديد عندما تكون المعلمة 1 هي "السمة" ، فإن المعلمة 2 هي كائن هو مفتاحه هو اسم السمة وقيمة السمة هو قيمة ، ولاحظ أنه إذا كانت أي قيمة مطلوبة ، فقم بالمرور في "（ex ： إضافة (" السمة "، {'data-todo': ''})）.
معالج	وظيفة	ماذا تفعل عند النقر فوق الوحدة النمطية المعلمة 1 هي مثيل معامل المدى ، والذي يمكنك من خلاله الحصول على مثيل VUE للمحرر الحالي وطريقة تشغيل النطاق لا نوصي نطاق التشغيل مباشرة في المعالج ، ولكن يجب أن يغلف إجراء النطاق كأمر ، واتصل بالأمر عبر طريقة execcommand ضمن مثيل المحرر في المعالج
فاتورة غير مدفوعة	مثيل VUE	الوحدات النمطية التقليدية تستخدم معالجات لنقرات التعامل ، وإذا كنت ترغب في تنفيذ واجهة المستخدم (قائمة منسدلة من وحدات الخطوط) أو منطق أكثر تعقيدًا (تبديل من اليسار إلى اليمين للوحدات النمطية المحاذاة) ، استخدم علامة التبويب
init	وظيفة	يتوافق مع دورة حياة مكون المحرر التي تم إنشاؤها ، المعلمة 1 هي مثيل المحرر. لاحظ أنه لا يمكن استخدام طريقة execcommand في هذا الوقت
مثبت	وظيفة	يتوافق مع دورة حياة مكون المحرر المثبتة ، المعلمة 1 هي مثيل المحرر.
تحديث	وظيفة	يتوافق مع دورة حياة مكون المحرر التي تم تحديثها ، المعلمة 1 هي مثيل المحرر.
دمر	وظيفة	يتوافق مع دورة حياة مكون المحرر Beforedestroy ، المعلمة 1 هي مثيل المحرر.