vue editor js

Vue-editor-js

Vue-editor-JS เป็นองค์ประกอบ wrapper EditorJS

โปรดตรวจสอบสิ่งนี้ก่อน https://editorjs.io/

สำหรับผู้ใช้รุ่นก่อน 2.0.0

ปลั๊กอินนี้เป็นส่วนประกอบ wrapper สำหรับ editorJs หากคุณต้องการใช้ปลั๊กอินสำหรับ editor.js จากนั้นนำเข้าและตั้งค่าคุณสมบัติกำหนดค่า

โปรดดู 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. แทรกแพ็คเกจลงใน prop config

< 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 พิเศษเพื่อความสะดวก หากคุณกำลังทดสอบเซิร์ฟเวอร์ของคุณเพื่ออัปโหลดรูปภาพโปรดดูตัวอย่างเซิร์ฟเวอร์

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

อัพโหลด Avatar บุคลิกภาพ (> = 2.0.1)

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

อุปกรณ์ประกอบฉากอื่น ๆ :

• CustomTools - วัตถุที่มีชื่อ (คีย์) และคลาสของเครื่องมือที่กำหนดเอง (ค่า)

สนุกกับ editorjs ด้วยโครงการ vue.js?

จะมีส่วนร่วมอย่างไร?

1. แยกโครงการนี้
2. แก้ไขรหัส
3. PR

หรือ

1. เพียงแค่ส่งปัญหา!

ผู้มีส่วนร่วม

• สวนชางจู
• ยาชา
• ลอสเคียร์

wallaby.js

ผู้มีส่วนร่วมที่เก็บข้อมูลนี้สามารถใช้ใบอนุญาต Wallaby.js OSS เพื่อรับผลการทดสอบทันทีที่คุณพิมพ์และดูผลลัพธ์ในโปรแกรมแก้ไขของคุณติดกับรหัสของคุณ