vuejs medium editor

Vuejs متوسطة المحرر

مكون Vue 2 و 3 JS لـ Medium Editor Wrapper with https://github.com/yabwe/medium-editor ولكن جميع الإضافات يتم إعادة الكتابة في Vue.js جميع تكوينات المحرر المتوسطة مدعومة

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

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

سمات

• متوسط مثل المحرر
• تحميل الصور والوصف
  • عرض عرض الصور القابل للتكوين للاحجام العادي / التوسع / ملء الشاشة
  • تحميل Imgur
• تضمين جوهر
• تمييز بناء جملة رمز مضمّن
• تم تضمين الفيديو
  • فيديو يوتيوب والسراويل القصيرة
  • فيديو 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 (سلسلة) - قيمة محرر ما قبل مملوءة - القيمة الافتراضية ،
• Readonly (Boolean) - اجعل المحرر يقرأ فقط. الافتراضي - خطأ
• الخيارات - تستخدم لتمرير خيارات المحرر ، انظر أدناه
• OnChange - حدث Pass Onchange
• HideImage - خيار تحميل الصورة (الافتراضي -
• مخيط - يخفي رمز GIST تضمين - افتراضي (خطأ)
• HideVideo - Video Hides Embed - افتراضي (خطأ)

الأحداث

• تم الرفع - Imgur Image Upload Callback

خيارات

شريط الأدوات

يمكنك تخصيص أزرار شريط الأدوات أيضًا

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 على الريبو الأصلي

 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. تمييز الكود في ثناياه عوامل في ثناياه عوامل باستخدام ALMBLANT.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 ، في ثناياه عوامل أيضا. انقر فوق الزر + ، ثم انقر فوق رمز (إضافة GIST) ، ثم أضف عنوان URL GIST ، انقر فوق إدخال لإنهاء

اقرأ مثال فقط

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

استخدام nuxt.js

قم بإنشاء ملف مكون إضافي vuejs-medium-editor.js Inside /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
] 

ْعَنِّي

ماجاك إيمانويل

رخصة

معهد ماساتشوستس للتكنولوجيا

ترميز سعيد ، نجمة قبل شوكة ؟؟؟