الصفحة الرئيسية>موارد بناء الموقع>موارد أخرى
تنزيل

Vue-tinymce-editor

يوفر هذا المكون سهلاً للاستخدام السهل لمطوري VUE

العرض التوضيحي

يمكنك رؤية عرض تجريبي ومثال في هذه الصفحة: العرض التوضيحي والأمثلة

التثبيت 

$ npm install vue-tinymce-editor

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

 import Vue from 'vue'
import tinymce from 'vue-tinymce-editor'
Vue . component ( 'tinymce' , tinymce )

يمكنك استخدام المكون في الترميز الخاص بك 

 < tinymce id =" d1 " v-model =" data " > </ tinymce > 
 export default {
    data ( ) {
        return {
            data : ''
        } ;
    }
}

ملكيات

ملكية يكتب تقصير وصف
بطاقة تعريف مطلوب ، سلسلة معرف نص المكون
شريط الأدوات خيط 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat' شريط الأدوات 1 من tinymce
شريط الأدوات 2 خيط '' ' شريط الأدوات 2 من tinymce
الإضافات صفيف ['advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality','template paste textcolor colorpicker textpattern imagetools toc help emoticons hr codesample'] مكونات الإضافات من Tinymce تحتاج إلى تحميلها
other_options صفيف {} خيارات الصفيح الأخرى. يمكنك أيضًا تجاوز خياراتنا الأولية
قراءة منطقية خطأ شنيع تمكين أو تعطيل المحرر

الأحداث

حدث المعلمة وصف
محرر حدث سيتم استدعاء هذا الحدث عندما يدعو Tinymce onchane
محرر محرر سيتم استدعاء هذا الحدث بعد تهيئة المحرر

التوطين

إذا كنت ترغب في استخدام Tinymce بلغات أخرى ، فيرجى اتباع هذه الخطوات:

  1. قم بتنزيل حزمة اللغة التي ترغب في استخدامها من هنا.
  2. قم بفك ملف ملف اللغة في المسار المطلوب ، والذي يمكن الوصول إليه من الخارج وهناك عنوان URL يشير إليه.
  3. أخيرًا ، قم بتعيين Language_url في other_options إلى عنوان URL الذي يشير إلى ملف اللغة.

على سبيل المثال: 

 export default {
    data ( ) {
        return {
            data : '' ,
            options : {
                language_url : 'http://example.com/js/langs/fa_IR.js' //This url points to location of persian language file.
            }
        } ;
    }
} 
 < tinymce id =" d1 " v-model =" data " :other_options =" options " > </ tinymce >

الوصول المباشر إلى محرر Tinymce

يمكنك الوصول إلى tinymce نفسها عن طريق تعيين مرجع لهذا المكون: 

 < tinymce id =" d1 " v-model =" data " ref =" tm " > </ tinymce >

ثم يمكنك الوصول إلى المحرر عن طريق الاتصال: 

 this . $refs . tm . editor

يتبرع

إذا كنت تحب هذا المشروع وكان من المفيد لك ألا تدعه يموت. ساعدني في مواصلة ذلك. شكرًا لك. أو يمكنك شراء قهوة لي

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل