toast ui.vue editor

️ إشعار: تم إهمال هذا المستودع

تم إدارة Toast UI Editor Vue Wrapper بشكل منفصل عن مستودع محرر UI Toast. نتيجة لتوزيع هذه القضايا ، قررنا إهمال كل مستودع غلاف وإدارة المستودع كمحرر أحادي من مستودع محرر UI Toast.

من الآن فصاعدًا ، يرجى تقديم المشكلات أو المساهمات المتعلقة بـ Toast UI React Wrapper لمستودع محرر واجهة المستخدم الخبز المحمص. شكرًا لك؟.

محرر واجهة المستخدم المحمص لصالح Vue

هذا هو مكون VUE لف محرر واجهة مستخدم الخبز المحمص.

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

• جمع الإحصائيات حول استخدام المصدر المفتوح
• ثَبَّتَ
  • باستخدام NPM
• استخدام المحرر
  • حمولة
  • ينفذ
  • باستخدام نموذج V.
  • الدعائم
  • حدث
  • طريقة
• استخدام المشاهد
  • حمولة
  • ينفذ
  • الدعائم
  • حدث
• سحب خطوات الطلب
• وثائق
• المساهمة
• رخصة

جمع الإحصائيات حول استخدام المصدر المفتوح

يقوم Vue Wrapper of Toast UI بتطبيق Google Analytics (GA) لجمع الإحصاءات حول استخدام المصدر المفتوح ، من أجل تحديد مدى استخدام محرر واجهة المستخدم على نطاق واسع في جميع أنحاء العالم. كما أنه بمثابة فهرس مهم لتحديد المسار المستقبلي للمشاريع. الموقع. لتعطيل GA ، استخدم خيارات usageStatistics التالية عند إعلان Compoent Compoent.

 var options = {
    ...
    usageStatistics : false
}

أو ، قم بتضمين tui-code-snippet.js ( v1.4.0 أو أحدث ) ثم اكتب الخيارات على الفور على النحو التالي:

 tui . usageStatistics = false ; 

؟ ثَبَّتَ

باستخدام NPM

npm install --save @toast-ui/vue-editor

استخدام المحرر

حمولة

يمكنك استخدام محرر واجهة مستخدم Toast fue كمساحة أو مساحة اسم Moudule. كما يمكنك استخدام مكون ملف واحد (SFC من VUE). عند استخدام تنسيق الوحدة النمطية و SFC ، يجب عليك تحميل tui-editor.css و tui-editor-contents.css و codemirror.css في البرنامج النصي.

• باستخدام وحدة ECMASCRIPT

   import 'tui-editor/dist/tui-editor.css' ;
  import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'codemirror/lib/codemirror.css' ;
  import { Editor } from '@toast-ui/vue-editor'

• باستخدام وحدة CommonJS

   require ( 'tui-editor/dist/tui-editor.css' ) ;
  require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
  require ( 'codemirror/lib/codemirror.css' ) ;
  var toastui = require ( '@toast-ui/vue-editor' ) ;
  var Editor = toastui . Editor ;

• باستخدام مكون ملف واحد

   import 'tui-editor/dist/tui-editor.css' ;
  import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'codemirror/lib/codemirror.css' ;
  import Editor from '@toast-ui/vue-editor/src/Editor.vue'

• باستخدام مساحة الاسم

   var Editor = toastui . Editor ;

ينفذ

تنفيذ أولا <editor/> في القالب.

 < template >
    < editor />
</ template >

ثم أضف Editor إلى components في مكونك أو مثيل VUE مثل هذا:

 import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  }
}

أو

 import { Editor } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'editor' : Editor
    }
} ) ;

باستخدام نموذج V.

إذا كنت تستخدم نموذج V ، فيجب عليك إعلان data الربط. (❗ عند استخدام المحرر في وضع wysiwyg ، يمكن أن يتسبب v-model في تدهور الأداء.)

في المثال أدناه ، يكون editorText ملزمًا بنص المحرر.

 < template >
    < editor v-model =" editorText " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
  components : {
    'editor' : Editor
  } ,
  data ( ) {
      return {
          editorText : ''
      }
  }
}
</ script >

الدعائم

اسم	يكتب	تقصير	وصف
قيمة	خيط	'' '	يمكن أن يغير هذا الدعامة محتوى المحرر. إذا كنت تستخدم v-model ، فلا تستخدمه .
خيارات	هدف	بعد defaultOptions	خيارات tui.editor. هذا لبدء tui.editor.
ارتفاع	خيط	'300px'	يمكن لهذا الدعامة التحكم في ارتفاع المحرر.
معاينة	خيط	'فاتورة غير مدفوعة'	يمكن أن يغير هذا الدعامة نمط المعاينة للمحرر. ( tab أو vertical )
وضع	خيط	'تخفيض السعر'	يمكن أن يغير هذا الدعامة طريقة المحرر. ( markdown أو wysiwyg )
HTML	خيط	-	إذا كنت ترغب في تغيير محتوى المحرر باستخدام تنسيق HTML ، فاستخدم هذا الدعامة.
مرئي	منطقية	حقيقي	يمكن أن تتحكم هذا الدعامة في مرئية من Eiditor.

 const defaultOptions = {
    minHeight : '200px' ,
    language : 'en_US' ,
    useCommandShortcut : true ,
    useDefaultHTMLSanitizer : true ,
    usageStatistics : true ,
    hideModeSwitch : false ,
    toolbarItems : [
        'heading' ,
        'bold' ,
        'italic' ,
        'strike' ,
        'divider' ,
        'hr' ,
        'quote' ,
        'divider' ,
        'ul' ,
        'ol' ,
        'task' ,
        'indent' ,
        'outdent' ,
        'divider' ,
        'table' ,
        'image' ,
        'link' ,
        'divider' ,
        'code' ,
        'codeblock'
    ]
} ;

مثال :

 < template >
    < editor
    :value =" editorText "
    :options =" editorOptions "
    :html =" editorHtml "
    :visible =" editorVisible "
    previewStyle =" vertical "
    height =" 500px "
    mode =" wysiwyg "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    data ( ) {
        return {
            editorText : 'This is initialValue.' ,
            editorOptions : {
                hideModeSwitch : true
            } ,
            editorHtml : '' ,
            editorVisible : true
        } ;
    } ,
} ;
</ script >

حدث

• التحميل: سيتم انبعاثه عند تحميل المحرر بالكامل
• التغيير: سيتم انبعاده عندما تغير المحتوى
• StateChange: سيتم الانبعاث عند تغيير التنسيق بواسطة موقف المؤشر
• التركيز: سيتم انبعاثه عندما يحصل المحرر على التركيز
• Blur: سيتم انبعاده عندما يركز المحرر الفضفاض

مثال :

 < template >
    < editor
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        onEditorLoad ( ) {
            // implement your code
        } ,
        onEditorFocus ( ) {
            // implement your code
        } ,
        onEditorBlur ( ) {
            // implement your code
        } ,
        onEditorChange ( ) {
            // implement your code
        } ,
        onEditorStateChange ( ) {
            // implement your code
        } ,
    }
} ;
</ script >

طريقة

إذا كنت تريد المزيد من معالجة المحرر ، فيمكنك استخدام طريقة invoke لاستدعاء طريقة Tui.Editor. لمزيد من المعلومات من الطريقة ، راجع طريقة tui.editor.

أولاً ، تحتاج إلى تعيين سمة ref لـ <editor/> وبعد ذلك يمكنك استخدام طريقة invoke من خلال this.$refs مثل هذا:

 < template >
    < editor ref =" tuiEditor " />
</ template >
< script >
import { Editor } from '@toast-ui/vue-editor'

export default {
    components : {
        'editor' : Editor
    } ,
    methods : {
        scroll ( ) {
            this . $refs . tuiEditor . invoke ( 'scrollTop' , 10 ) ;
        } ,
        moveTop ( ) {
            this . $refs . tuiEditor . invoke ( 'moveCursorToStart' ) ;
        } ,
        getHtml ( ) {
            let html = this . $refs . tuiEditor . invoke ( 'getHtml' ) ;
        }
    }
} ;
</ script > 

؟ استخدام المشاهد

حمولة

• باستخدام وحدة ECMASCRIPT

   import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'highlight.js/styles/github.css' ;
  import { Viewer } from '@toast-ui/vue-editor'

• باستخدام وحدة CommonJS

   require ( 'tui-editor/dist/tui-editor-contents.css' ) ;
  require ( 'highlight.js/styles/github.css' ) ; 
  var toastui = require ( '@toast-ui/vue-editor' ) ;
  var Viewer = toastui . Viewer ;

• باستخدام مكون ملف واحد

   import 'tui-editor/dist/tui-editor-contents.css' ;
  import 'highlight.js/styles/github.css' ;
  import Viewer from '@toast-ui/vue-editor/src/Viewer.vue'

• باستخدام مساحة الاسم

   var Viewer = toastui . Viewer ;

ينفذ

قم أولاً بتنفيذ <viewer/> في القالب.

 < template >
    < viewer />
</ template >

ثم أضف Viewer إلى components في مكونك أو مثيل VUE مثل هذا:

 import { Viewer } from '@toast-ui/vue-editor'

export default {
  components : {
    'viewer' : Viewer
  }
}

أو

 import { Viewer } from '@toast-ui/vue-editor'
new Vue ( {
    el : '#app' ,
    components : {
        'viewer' : Viewer
    }
} ) ;

الدعائم

اسم	يكتب	تقصير	وصف
قيمة	خيط	'' '	يمكن أن يغير هذا الدعامة محتوى المشاهد.
ارتفاع	خيط	'300px'	يمكن لهذا الدعامة التحكم في ارتفاع المشاهد.
exts	صفيف		يمكن لهذا الدعامة تطبيق ملحقات المشاهد.

مثال :

 < template >
    < viewer
    :value =" viewerText "
    height =" 500px "
    />
</ template >
< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components : {
        'viewer' : Viewer
    } ,
    data ( ) {
        return {
            viewerText : '# This is Viewer.n Hello World.' ,
        } ;
    } ,
} ;
</ script >

حدث

• التحميل: سيتم انبعاثه عند تحميل المحرر بالكامل
• التغيير: سيتم انبعاده عندما تغير المحتوى
• StateChange: سيتم الانبعاث عند تغيير التنسيق بواسطة موقف المؤشر
• التركيز: سيتم انبعاثه عندما يحصل المحرر على التركيز
• Blur: سيتم انبعاده عندما يركز المحرر الفضفاض

مثال :

 < template >
    < viewer
    @load =" onEditorLoad "
    @focus =" onEditorFocus "
    @blur =" onEditorBlur "
    @change =" onEditorChange "
    @stateChange =" onEditorStateChange "
    />
</ template >

< script >
import { Viewer } from '@toast-ui/vue-editor'

export default {
    components: {
        'viewer': Viewer
    },
    methods: {
        onEditorLoad() {
            // implement your code
        },
        onEditorFocus() {
            // implement your code
        },
        onEditorBlur() {
            // implement your code
        },
        onEditorChange() {
            // implement your code
        },
        onEditorStateChange() {
            // implement your code
        },
    }
};

؟ سحب خطوات الطلب

تكون منتجات Toast UI مفتوحة المصدر ، بحيث يمكنك إنشاء طلب سحب (PR) بعد إصلاح المشكلات. قم بتشغيل البرامج النصية NPM وتطوير نفسك مع العملية التالية.

يثبت

شوكة develop فرع في مستودعك الشخصي. استنساخها إلى الكمبيوتر المحلي. تثبيت وحدات العقدة. قبل بدء التطوير ، يجب عليك التحقق من أخطاء Haveany.

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

يطور

لنبدأ التنمية!

طلب سحب

قبل العلاقات العامة ، تحقق من الاختبار أخيرًا ثم تحقق من أي أخطاء. إذا لم يكن لديه خطأ ، ارتكب ثم ادفعه!

لمزيد من المعلومات حول خطوة العلاقات العامة ، يرجى الاطلاع على روابط القسم المساهمة.

المساهمة

• مدونة لقواعد السلوك
• المبدأ التوجيهي المساهمة
• اتفاقية الالتزام

رخصة

هذا البرنامج مرخص تحت معهد ماساتشوستس للتكنولوجيا © NHN.