vue editor js

Vue-Editor-JS

Vue-Editor-JS هو مكون Wrapper EditorJS.

يرجى مراجعة هذا أولا. https://editorjs.io/

قبل 2.0.0 نسخة من مستخدمي الإصدار.

هذه المكونات الإضافية هي مكون غلاف لـ EditorJS. إذا كنت بحاجة إلى استخدام المكون الإضافي لـ editor.js ، فاستبحه وضبط خاصية config.

يرجى الاطلاع على demo.vue

قبل 1.0.0 من مستخدمي الإصدار.

يرجى استخدام Vue.use vue-editor-js في main.js.

المكونات الإضافية المدعومة

• شخصية
• رأس
• قائمة
• صورة
• inlinecode
• تضمين
• يقتبس
• علامة
• شفرة
• وصلة
• محدد
• خام
• طاولة
• تحذير
• فقرة
• قائمة المراجعة

تثبيت

 # NPM
npm install --save vue-editor-js

# or Yarn
yarn add vue-editor-js

الاستخدام

في main.js

 // ...
import Editor from 'vue-editor-js'

Vue . use ( Editor )
// ...

في nuxt.js

 // in nuxt.config.js
plugins: [
  {
    src : '~/plugins/vue-editor.js' , ssr : false
  }
] ,

// in ~/plugins/vue-editor.js
import Vue from 'vue'
import Editor from 'vue-editor-js'

Vue . use ( Editor ) 

  < editor ref="editor" : config = " config " : initialized = " onInitialized " />

حدد وظيفة التهيئة للحصول على مثيل editor.js عند التهيئة

إذا كنت مرتبكًا مع استخدامه مع Nuxt ، يرجى الاطلاع هنا

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

إذا كنت ترغب فقط في استيراد محرر على مكون واحد ، فيمكنك القيام بذلك عن طريق اتباع الإرشادات أدناه

1. تأكد من تثبيت @vue/composition-api

 # NPM
npm i --save @vue/composition-api

# or Yarn
yarn add @vue/composition-api

2. في main.js:

 import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue . use ( VueCompositionApi )

3. لا تستورد أي شيء من 'vue-editor-js' في Main.js
4. في المكون الخاص بك:

 import { Editor } from 'vue-editor-js'

export default {
  // ...
  components : {
    Editor ,
  } ,
  // ...
} 

أدوات

الأدوات المدعومة

كما هو الحال في الإضافات المدعومة ، ولكن مع تسمية مختلفة

• رأس
• قائمة
• شفرة
• inlinecode
• شخصية
• تضمين
• LinkTool
• علامة
• طاولة
• خام
• محدد
• يقتبس
• صورة
• تحذير
• فقرة
• قائمة المراجعة

الاستخدام

1. قم بتثبيت أداة EditorJS

 # NPM
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header

2. أدخل الحزمة في الدعامة التكوين

< editor
    ...
    : config = " {
        tools: {
          header: require ( ' @editorjs/header ' )
        }
    } "
/>

حفظ رمز المثال

< template >
	< div id = " app " >
		< Editor ref = " editor " :config = " config " />

		< button @click = " invokeSave " >Save</ button >
	</ div >
</ template >

< script >
	export default {
		methods : {
			invokeSave () {
				this . $refs . editor . _data . state . editor . save ()
					. then (( data ) => {
						// Do what you want with the data here
						console . log (data)
					})
					. catch ( err => { console . log (err) })
			}
		},
	}
</ script >

تحميل صورة (> = 1.1.0)

لتحميل الصور ، ستحتاج إلى الواجهة الخلفية لمعالجة الصور. يوفر Vue-Editor-JS دعامة config خاصة من أجل Eastable. إذا كنت تختبر الخادم الخاص بك لتحميل صورة ، يرجى الاطلاع على مثال الخادم.

< editor : config = " config " />

< script >
...
data () {
  return {
      config : {
        image : {
          // Like in https://github.com/editor-js/image#config-params
          endpoints : {
            byFile : ' http://localhost:8090/image ' ,
            byUrl : ' http://localhost:8090/image-by-url ' ,
          },
          field : ' image ' ,
          types : ' image/* ' ,
        },
      }
  }
}
</ script >

تحميل شخصية الصورة الرمزية (> = 2.0.1)

  config: {
    personality: {
      endpoints: 'http://localhost:8090/image'
    } 

الدعائم الأخرى:

• CustomTools - كائن مع الاسم (المفتاح) وفئة أداة مخصصة (قيمة)

استمتع بالمحررين مع مشروع Vue.js؟

كيف تساهم؟

1. مفترق هذا المشروع.
2. تحرير الرمز.
3. العلاقات العامة

أو

1. فقط أرسل مشكلة!

المساهمين

• حديقة تشانغجو
• ياشا
• لوسكر

والابي

نرحب بمساهمي المستودع هذا لاستخدام ترخيص Wallaby.js OSS للحصول على نتائج الاختبار فور تكتبه ، ومعرفة النتائج في المحرر بجوار الكود الخاص بك.