my vue editor

My-vue-editor

Editor Teks Kaya Berdasarkan Vue2.x
中文文档

Demo

Klik di sini untuk melihat demo
Demo lainnya silakan merujuk ke Direktori Contoh

Perkenalan

Editor kami didasarkan pada pengembangan sekunder VUE-HTML5-Editor. Berkat penulisnya Peaktai karena menyediakan plug-in editor teks yang ringkas, atas dasar yang telah kami tulis ulang metode asli dan memperluas fungsionalitas.

Memasang

 npm install my - vue - editor

Diperkenalkan sebagai plug-in

 import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue . use ( myVueEditor , options )

Pendahuluan Global

 < script src =" serverpath/vue.js " > </ script >
< script src =" serverpath/dist/my-vue-editor.js " > </ script >

Diinstal oleh variabel global myvueEditor

 Vue . use ( myVueEditor , options )

Menggunakan

 < my-vue-editor :content =" content " @change =' ctnChange ' @imageUpload =' imageUpload ' > </ my-vue-editor > 

Konfigurasi

Item	Jenis	Keterangan
nama	Rangkaian	Nama Komponen Kustom, defaultnya adalah my-vue-editor
modul	Array	Modul perlu digunakan
ikon	Obyek	Menutupi ikon modul yang ditentukan
perintah	Obyek	Perintah khusus
jalan pintas	Obyek	Pintasan khusus
Perpanjangan Modul	Array	Modul khusus
Nama modul bawaan apa pun	Obyek	Menimpa sifat-sifat modul bawaan yang sesuai

contoh

 Vue . use ( myVueEditor , {
  // Overlay built-in module's icon
  icons : {
    image : 'iui-icon iui-icon-pic' ,
    indent : 'iui-icon iui-icon-insert'
  } ,
  // Modules in use
  modules : [
    'font' ,
    'bold' ,
    'italic' ,
    'underline' ,
    'linethrough' ,
    'ul' ,
    'indent' ,
    'align' ,
    'image' ,
    'quote' ,
    'todo' ,
    // This is a custom module
    'customSave'
  ] ,
  // Overlay image module's configuration
  image : {
    maxSize : 5120 * 1024 ,
    imgOccupyNewRow : true ,
    compress : {
      width : 1600 ,
      height : 1600 ,
      quality : 0.8
    }
  } ,
  // Overlay font module's configuration
  font : {
    config : {
      'xx-large' : {
        fontSize : 6 ,
        name : 'H1'
      } ,
      'medium' : {
        fontSize : 3 ,
        name : 'H2'
      } ,
      'small' : {
        fontSize : 2 ,
        name : 'H3'
      } ,
      default : 'medium'
    } ,
    // Modify the font module's module inspect mechanism to inspect via style and tag name
    inspect ( add ) {
      add ( 'style' , {
        fontSize : [ 'xx-large' , 'x-large' , 'large' , 'medium' , 'small' ]
      } ) . add ( 'tag' , 'font' )
    }
  } ,
  // Overlay ul module's configuration
  ul : {
    // When the ul module is inspected, disabled all but itself
    exclude : 'ALL_BUT_MYSELF' ,
    // When the ul module is clicked, execute the following method
    handler ( rh ) {
     console . log ( 'i am ul!' )
     rh . editor . execCommand ( 'insertUnorderedList' )  
    }
  } ,
  // When the ul module is inspected, disabled image, todo and ul module
  quote : {
    exclude : [ 'image' , 'todo' , 'ul' ]
  } ,
  // Customize an command named getAllTexts that prints out all the text nodes under the current range object
  commands : {
    getAllTexts ( rh , arg ) {
      console . log ( rh . getAllTextNodeInRange ( ) )
    }
  } ,
  shortcut : {
    // Custom a shortcut key, when you press the command + s, execute the save function
    saveNote : {
      metaKey : true ,
      keyCode : 83 ,
      handler ( editor ) {
        save ( )
      }
    }
  } ,
  // Customize a module, a alert pops up when you click on the module icon
  extendModules : [ {
     name : 'smile' ,
     icon : 'iui iui-icon-smile'
     handler ( rh ) {
      alert ( 'smile~~' )
     }
  } ]
} ) 

Peristiwa

Nama Acara	Keterangan
mengubah	Pemicu saat konten editor berubah, parameter adalah data konten terkini
Imageupload	Pemicu saat mengunggah gambar, parameter menyertakan data gambar yang sesuai, REPLACESRCAFTERUPLOADFINISH: Digunakan untuk mengganti atribut SRC IMG dari format Base64 ke URL yang dikembalikan oleh server ketika unggahan berhasil） deleteimgwhenuploadfail: Digunakan untuk menghapus gambar saat ini saat unggahan gagal

Ubah modul bawaan

Tambahkan parameter dengan nama modul bawaan sebagai kuncinya, akan menutupi properti asli modul bawaan (lihat semua modul bawaan dan item konfigurasinya di direktori SRC/Modul）

Ambil modul gambar sebagai contoh

 Vue . user ( myVueEditor , {
  image : {
    // Modify the image module's icon
    icon : 'iui-pic' ,
    // Cover the original compression parameters, so that the image is not compressed when uploaded
    compress : null ,
    // Can not upload the same image repeatedly
    canUploadSameImage : false
  }
} ) 

Modul cutom

Perpanjang Modul dengan Item Konfigurasi Extegmodules Kami menyediakan beberapa item konfigurasi modul umum

Barang	Jenis	Keterangan
nama	Rangkaian	Nama Modul
ikon	Rangkaian	ClassName Ikon Modul ， ikon fontawesome digunakan secara default
mengecualikan	Array string	modul dinonaktifkan saat modul saat ini diperiksa Saat nilai 'semua' berarti menonaktifkan semua modul termasuk modul saat ini Saat nilai is'all_but_myself ', berarti menonaktifkan semua modul tetapi modul saat ini Saat nilai adalah jenis array, nama modul input akan dinonaktifkan
memeriksa	Fungsi	Modul Periksa ， Ketika kursor ada dalam daftar, modul daftar disorot, yaitu, modul daftar diperiksa, yang didasarkan pada label UL sebagai basis pengujian Argumen pertama ke fungsi adalah metode bernama Add, yang dipanggil untuk menambahkan dasar inspeksi modul. Saat ada beberapa basis inspeksi, silakan hubungi rantai Parameter pertama dari metode ADD menunjukkan jalur apa yang akan diuji. Opsional adalah 'tag' 'gaya' dan 'atribut' Ketika parameter 1 adalah 'tag', parameter 2 lulus dalam string nama tag Ketika parameter 1 adalah 'gaya', parameter 2 adalah objek dengan stylename sebagai kunci dan stylevalue sebagai nilai. Catatan stylename Gunakan bentuk punuk （ex ： fontsize） ， Saat ada beberapa stylevalue, silakan gunakan bentuk array Ketika parameter 1 adalah 'atribut', parameter 2 adalah objek yang kuncinya adalah nama atribut dan nilai atribut adalah nilai, dan perhatikan bahwa jika ada nilai yang diinginkan, lulus '' （ex ： add ('atribut', {'data-todo': ''})）
pawang	Fungsi	Apa yang Harus Dilakukan Saat Anda Mengklik Modul Parameter 1 adalah instance range-handler, di mana Anda bisa mendapatkan instance vue dari editor saat ini dan metode untuk mengoperasikan rentang Kami tidak merekomendasikan rentang operasi secara langsung di pawang, tetapi harus merangkum tindakan rentang sebagai perintah, memanggil perintah melalui metode ExecCommand di bawah instance editor di pawang
tab	Vue instance	Modul Konvensional Gunakan penangan untuk menangani klik, dan jika Anda ingin menerapkan UI (daftar drop-down modul font) atau logika yang lebih kompleks (switching kiri ke kanan modul Align), gunakan tab
init	Fungsi	Sesuai dengan siklus hidup komponen editor yang dibuat, parameter 1 adalah instance editor. Perhatikan bahwa metode ExecCommand tidak dapat digunakan saat ini
dipasang	Fungsi	Sesuai dengan siklus hidup komponen editor yang dipasang, parameter 1 adalah instance editor.
diperbarui	Fungsi	Sesuai dengan siklus hidup komponen editor diperbarui, parameter 1 adalah instance editor.
hancur	Fungsi	Sesuai dengan siklus hidup komponen editor Beforedestroy, parameter 1 adalah instance editor.