vuejs medium editor

Vuejs Medium Editor

Vue 2 และ 3 JS Component สำหรับ wrapper ตัวแก้ไขขนาดกลางพร้อม https://github.com/yabwe/medium-editor แต่ปลั๊กอินทั้งหมดกำลังเขียนใหม่ใน vue.js การกำหนดค่าตัวแก้ไขกลางทั้งหมดได้รับการสนับสนุน

การสาธิต

การสาธิต

คุณสมบัติ

• สื่อชอบแก้ไข
• อัพโหลดรูปภาพและคำอธิบาย
  • ความกว้างของภาพความกว้างที่กำหนดค่าได้สำหรับการปรับขนาดปกติ / ขยาย / เต็มหน้าจอ
  • การอัปโหลด imgur
• ฝังส่วนสำคัญ
• ไฮไลต์ไวยากรณ์ของรหัสแบบอินไลน์
• ฝังวิดีโอ
  • วิดีโอและกางเกงขาสั้นของ YouTube
  • วิดีโอ Vimeo
  • วิดีโอทอผ้า

การใช้งาน

การติดตั้ง

 yarn add vuejs-medium-editor

# Vue 3
yarn add vuejs-medium-editor@next

หรือ

 npm install vuejs-medium-editor

# Vue 3
npm install vuejs-medium-editor@next

การใช้งาน

เพิ่มไปยังส่วนประกอบทั่วโลกใน Vue 2

 import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue . component ( 'medium-editor' , MediumEditor )

หรือ Vue 3

 import { createApp } from 'vue'
import MediumEditor from 'vuejs-medium-editor'
import App from './App.vue'

const app = createApp ( App )

app . component ( 'medium-editor' , MediumEditor )
app . mount ( '#app' )

อย่าลืมรวมไฟล์ CSS ในโครงการของคุณสำหรับ Vue 2

 import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/src/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'

หรือใน styles เช่นด้านล่าง

<style lang = "css" >
@import "~medium-editor/dist/css/medium-editor.css" ;
@import "~vuejs-medium-editor/src/themes/default.css" ;
/*@import '~highlight.js/styles/github.css';*/
@import '~highlight.js/styles/github.css' ;
< / style >

สำหรับ Vue 3

 import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/dist/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'

หรือใน styles เช่นด้านล่าง

<style lang = "css" >
@import "medium-editor/dist/css/medium-editor.css" ;
@import "vuejs-medium-editor/dist/themes/default.css" ;
/*@import '~highlight.js/styles/github.css';*/
@import 'highlight.js/styles/github.css' ;
< / style > 

ตัวอย่าง

< medium-editor
  v-model = " content "
  : options = " options "
  : onChange = " onChange "
  v-on : uploaded = " uploadCallback "
/>

<script>
import Editor from 'vuejs-medium-editor'

export default {
  data() {
    return {
      content: '',
      options: {},
    }
  },
  components: {
    'medium-editor': Editor,
  },
  methods: {
    onChange() {
      console.log(this.content)
    },
    uploadCallback(url) {
      console.log('uploaded url', url)
    },
  },
}
</script>

อุปกรณ์ประกอบฉากที่มีอยู่

• prefill (สตริง) - ค่าตัวแก้ไขที่กรอกล่วงหน้า - ค่าเริ่มต้น
• อ่านอย่างเดียว (บูลีน) - ทำให้ตัวแก้ไขอ่านเท่านั้น ค่าเริ่มต้น - FALSE
• ตัวเลือก - ใช้เพื่อส่งตัวเลือกตัวแก้ไขดูด้านล่าง
• onchange - ผ่านเหตุการณ์ onchange
• HideImage - ซ่อนตัวเลือกอัพโหลดรูปภาพ (ค่าเริ่มต้น -False)
• Hidegist - ซ่อนรหัส gist Embed - ค่าเริ่มต้น (เท็จ)
• HideVideo - ซ่อนวิดีโอฝัง - ค่าเริ่มต้น (เท็จ)

เหตุการณ์

• อัปโหลด - Imgur Image Upload การโทรกลับ

ตัวเลือก

แถบเครื่องมือ

คุณสามารถปรับแต่งปุ่มแถบเครื่องมือได้ด้วย

options: {
  toolbar : {
    buttons : [
      'bold' ,
      'italic' ,
      'underline' ,
      'quote' ,
      'h1' ,
      'h2' ,
      'h3' ,
      'pre' ,
      'unorderedlist' ,
    ]
  }
}

ตัวเลือกที่มีอยู่: ตัวเลือกทั้งหมดมีอยู่ที่นี่คุณสามารถแทนที่ตัวเลือกเช่นในตัวแก้ไขกลาง;

options: {
  buttons : [
    'anchor' ,
    {
      name : 'pre' ,
      action : 'append-pre' ,
      aria : 'code highlight' ,
      tagNames : [ 'pre' ] ,
      contentDefault : '<b><\></b>' ,
      contentFA : '<i class="fa fa-code fa-lg"></i>' ,
    } ,
  ]
}

ภาพ

การใช้ตัวเลือกรูปภาพในแถบเครื่องมือเพิ่มลิงค์รูปภาพไฮไลต์เพื่อแก้ไขจากนั้นเลือกไอคอนภาพ

buttons: [
  {
    name : 'image' ,
    action : 'image' ,
    aria : 'insert image from url' ,
    tagNames : [ 'img' ] ,
    contentDefault : '<b>image</b>' ,
    contentFA : '<i class="fa fa-picture-o"></i>' ,
  } ,
]

นอกจากนี้ตัวเลือกที่มีอยู่: ขอบคุณคำขอดึง ergofriend บน repo ดั้งเดิม

 options: {
    uploadUrl : "https://api.imgur.com/3/image" ,
    uploadUrlHeader : { 'Authorization' : 'Client-ID a3tw6ve4wss3c' } ,
    file_input_name : "image" ,
    file_size : 1024 * 1024 * 10 ,
    imgur : true ,
 }

การเน้นรหัส

1. การไฮไลต์โค้ดถูกสร้างขึ้นโดยใช้ไฮไลต์. js เพิ่มโค้ดตัวอย่างไฮไลต์จากนั้นเลือกรหัสในแถบเครื่องมือ (คุณต้องเพิ่ม pre ในแถบเครื่องมือดูตัวเลือกด้านบน)

คุณควรรวมไฟล์ highligh.js CSS ไว้ในสไตล์

<style >
    /*default css  */
    @import 'highlight.js/styles/default.css' ;
    /* github style */
    @import 'highlight.js/styles/github.css' ;
< / style >

คุณสามารถรับสไตล์ธีมเพิ่มเติมได้ที่นี่

2. รหัสสูงโดยใช้ GIST รวมถึง inbuilt คลิก + ปุ่มจากนั้นคลิกรหัส (เพิ่ม gist) จากนั้นเพิ่ม url gist, คลิก Enter เพื่อเสร็จสิ้น

อ่านตัวอย่างเท่านั้น

< medium-editor : prefill = " defaultValue " : read-only = " true " />

การใช้งาน nuxt.js

สร้างไฟล์ปลั๊กอิน vuejs-medium-editor.js ภายใน /plugins dir

 import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue . component ( 'medium-editor' , MediumEditor )

นำเข้าปลั๊กอินใน nuxt.config.js พร้อมโหมดปิดใช้งานโหมด SSR

plugins: [ { src : '~/plugins/vuejs-medium-editor' , ssr : false } ]

รวมไฟล์ CSS สำหรับ Vue 2

css: [
  'medium-editor/dist/css/medium-editor.css' ,
  'vuejs-medium-editor/src/themes/default.css' ,
  'highlight.js/styles/github.css' , //if using code highlight
]

สำหรับ Vue 3

css: [
  'medium-editor/dist/css/medium-editor.css' ,
  'vuejs-medium-editor/dist/themes/default.css' ,
  'highlight.js/styles/github.css' , //if using code highlight
] 

เกี่ยวกับฉัน

Magak Emmanuel

ใบอนุญาต

มิกซ์

การเข้ารหัสมีความสุขสตาร์ก่อนส้อม ???