Unduh mavonEditor - Unduh Kode Sumber mavonEditor

Mavoneditor

Vue2
Vue3

Dokumen bahasa Inggris

Demo untuk jsfiddle

contoh (tampilan gambar)

PC

Untuk melihat lebih banyak gambar, klik di sini ...

Instal Mavon-Editor (Instal)

 $ npm install mavon-editor --save

Gunakan (cara memperkenalkan)

index.js :

    // 全局注册
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue . use ( mavonEditor )
    new Vue ( {
        'el' : '#main' ,
        data ( ) {
            return { value : '' }
        }
    } )

index.html

 < div id =" main " >
    < mavon-editor v-model =" value " />
</ div >

Cara menggunakannya di nuxt.js

Pertama, buat vue-mavon-editor.js di plugin direktori proyek

 import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';

Vue.use(mavonEditor);

Kemudian tambahkan konfigurasi plugin di nuxt.config.js

  plugins : [
  ...
    { src : '@/plugins/vue-mavon-editor' , ssr : false }
  ] ,

Langkah terakhir adalah memperkenalkannya di halaman atau komponen

< template >
  < div class = " mavonEditor " >
    < no-ssr >
      < mavon-editor :toolbars = " markdownOption " v-model = " handbook " />
    </ no-ssr >
  </ div >
</ template >
< script >
export default {
  data () {
    return {
      markdownOption : {
        bold : true , // 粗体
        ... // 更多配置
      },
      handbook : " #### how to use mavonEditor in nuxt.js "
    };
  }
};
</ script >

< style scoped>
.mavonEditor {
  width : 100 % ;
  height : 100 % ;
}
</ style >

Untuk metode pengantar lebih lanjut klik di sini ...

Cara mendapatkan dan mengatur objek Markdown-it ...

Dokumentasi API

Alat peraga

Nama Nama	Jenis Jenis	nilai default default	Jelaskan deskripsi
nilai	Rangkaian		Nilai awal
bahasa	Rangkaian	ZH-CN	Seleksi bahasa, sementara mendukung ZH-CN: Cina yang disederhanakan, ZH-TW: oral cina, en: Inggris, fr: Prancis, pt-br: Portugis, RU: Rusia, de: Jerman, JA: Jepang
fontsize	Rangkaian	14px	Edit Ukuran Teks Area
Gulir	Boolean	BENAR	Nyalakan gaya scrollbar (hanya mendukung chrome untuk saat ini)
boxshadow	Boolean	BENAR	Nyalakan Bayangan Perbatasan
BoxshadowStyle	Rangkaian	0 2px 12px 0 RGBA (0, 0, 0, 0.1)	Gaya bayangan perbatasan
Transisi	Boolean	BENAR	Apakah akan mengaktifkan animasi transisi
Toolbarsbackground	Rangkaian	#ffffff	Warna latar belakang bilah alat
Pratinjau kembaliground	Rangkaian	#fbfbfb	Warna Latar Belakang Kotak Pratinjau
subfield	Boolean	BENAR	Benar: Kolom Ganda (Edit Pratinjau Layar yang sama), Salah: Kolom Tunggal (Edit Pratinjau Layar Split)
defaultopen	Rangkaian		Area tampilan default ditampilkan saat dalam satu kolom ( `subfield=false` ). Sunting: Area edit ditampilkan secara default. Pratinjau: Area Pratinjau Tampilan Default Lainnya = Edit
placeholder	Rangkaian	Mulailah mengedit ...	Teks prompt default saat kotak input kosong
dapat diedit	Boolean	BENAR	Apakah akan mengizinkan pengeditan
Codestyle	Rangkaian	kode-gitub	Gaya Markdown: Gitub Default, Skema Warna Opsional
toolbarsflag	Boolean	BENAR	Apakah bilah alat ditampilkan
navigasi	Boolean	PALSU	Direktori Tampilan Default
jalan pintas	Boolean	BENAR	Apakah akan mengaktifkan kunci pintasan
fokus otomatis	Boolean	BENAR	Fokus otomatis ke kotak teks
ishljs	Boolean	BENAR	Kode disorot
imagefilter	fungsi	batal	Fungsi pemfilteran gambar memiliki parameter `File Object` , yang membutuhkan `Boolean` untuk dikembalikan. `true` berarti file itu legal, dan `false` berarti file itu ilegal.
Imageclick	fungsi	batal	Acara klik gambar, default adalah pratinjau, dapat diganti
Tabsize	Nomor	T	Standarnya adalah t
html	Boolean	BENAR	Aktifkan tag HTML. Tag ini selalu default ke true karena alasan historis, tetapi disarankan untuk menutupnya tanpa menggunakan tag HTML. Ini sepenuhnya dapat menghilangkan masalah keamanan.
xssoptions	Obyek	{}	Konfigurasi Aturan XSS, diaktifkan secara default, setel false untuk mematikan. Setelah diaktifkan, tag HTML akan difilter, dan semua atribut tag HTML akan difilter secara default. Disarankan untuk mengkonfigurasi whitelist sesuai permintaan untuk mengurangi kemungkinan diserang. - Referensi Aturan Kustom: https://jsxss.com/zh/options.html - Demo referensi: dev-demo
Toolbars	Obyek	Contoh berikut	Toolbar

Toolbars

Semua tombol toolbar default diaktifkan, dan objek khusus dilewatkan. Anda dapat memilih untuk mengaktifkan beberapa tombol.

 /*
  例如: {
      bold: true, // 粗体
      italic: true,// 斜体
      header: true,// 标题
  }
  此时, 仅仅显示此三个功能键
*/
toolbars: {
    bold : true , // 粗体
    italic : true , // 斜体
    header : true , // 标题
    underline : true , // 下划线
    strikethrough : true , // 中划线
    mark : true , // 标记
    superscript : true , // 上角标
    subscript : true , // 下角标
    quote : true , // 引用
    ol : true , // 有序列表
    ul : true , // 无序列表
    link : true , // 链接
    imagelink : true , // 图片链接
    code : true , // code
    table : true , // 表格
    fullscreen : true , // 全屏编辑
    readmodel : true , // 沉浸式阅读
    htmlcode : true , // 展示html源码
    help : true , // 帮助
    /* 1.3.5 */
    undo : true , // 上一步
    redo : true , // 下一步
    trash : true , // 清空
    save : true , // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation : true , // 导航目录
    /* 2.1.8 */
    alignleft : true , // 左对齐
    aligncenter : true , // 居中
    alignright : true , // 右对齐
    /* 2.2.1 */
    subfield : true , // 单双栏模式
    preview : true , // 预览
}

Jika Anda perlu menyesuaikan tombol Tambah Toolbar, Anda dapat menggunakan metode berikut

 < mavon-editor >
  <!-- 左工具栏前加入自定义按钮 -->
  < template slot = "left-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 左工具栏后加入自定义按钮  -->
  < template slot = "left-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏前加入自定义按钮  -->
  < template slot = "right-toolbar-before" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
  <!-- 右工具栏后加入自定义按钮  -->
  < template slot = "right-toolbar-after" >
    < button
      type = "button"
      @ click = "$click('test')"
      class = "op-icon fa fa-mavon-align-left"
      aria-hidden = "true"
      title = "自定义"
    > </ button >
  </ template >
</ mavon-editor >

Acara mengikat acara

Nama Metode Nama	Parameter Params	Jelaskan deskripsi
Mengubah	String: Value, String: Render	Acara Callback yang berubah di area Edit (Reender: Nilai Hasilnya Setelah Parsing dengan Markdown)
menyimpan	String: Value, String: Render	Acara Callback Ctrl + S (Simpan Kunci dan Picu Callback juga)
layar penuh	Boolean: Status, String: Nilai	Toggle acara panggilan balik untuk pengeditan layar penuh (boolean: layar penuh di negara bagian)
Model kembali	Boolean: Status, String: Nilai	Toggle Acara Callback Bacaan Immersive (Boolean: Reading diaktifkan)
HTMLCode	Boolean: Status, String: Nilai	Periksa acara panggilan balik dari kode sumber HTML (boolean: kode sumber diaktifkan)
subfieldtoggle	Boolean: Status, String: Nilai	Ganti acara panggilan balik dari pengeditan kolom tunggal dan ganda (boolean: status terbuka kolom ganda)
PreviewToggle	Boolean: Status, String: Nilai	Toggle Pratinjau Acara Callback yang Diedit (Boolean: Pratinjau Status Terbuka)
Helptoggle	Boolean: Status, String: Nilai	Lihat Acara Callback Bantuan (Boolean: Bantuan diaktifkan)
NavigationToggle	Boolean: Status, String: Nilai	Ganti acara panggilan balik dari direktori navigasi (boolean: navigasi diaktifkan)
Imgadd	Nomor: pos, file: imgfile	Tambahkan Acara Callback ke File Gambar (POS: Lokasi gambar dalam daftar, File: File Objek)
Imgdel	Array (2): [Nomor: Pos, File: Imgfile]	Event Callback Penghapusan File Gambar (Array (2): Array dari dua elemen, posisi pertama adalah posisi gambar dalam daftar, dan posisi kedua adalah objek file)

Kode disorot

Jika Anda tidak perlu menyorot kode highlight, Anda harus mengatur ishljs ke false

Nyalakan Kode Sorot Alat Peraga Kode

<! -- ishljs默认为true -->
<mavon-editor :ishljs="true"></mavon-editor>

Untuk mengoptimalkan volume plugin, file -file berikut akan menggunakan tautan eksternal cdnjs secara default dari v2.4.2 :

highlight.js
github-markdown-css
katex ( v2.4.7 )

Kode Menyoroti File Parsing Bahasa di highlight.js dan Gaya Menyoroti Kode akan dimuat sesuai permintaan saat digunakan. github-markdown-css dan katex hanya akan dimuat saat mounted

PEMBERITAHUAN : Skema warna opsional dan bahasa yang didukung diekspor dari sorotan.js/9.12.0

Tanpa menggunakan CDN, pemuatan lokal sesuai permintaan klik di sini ...

Unggahan gambar

< template >
    < mavon-editor ref = md @imgAdd = " $imgAdd " @imgDel = " $imgDel " ></ mavon-editor >
</ template >
< script >
export default {
    methods : {
        // 绑定@imgAdd event
        $imgAdd (pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData ();
           formdata . append ( ' image ' , $file);
           axios ({
               url : ' server url ' ,
               method : ' post ' ,
               data : formdata,
               headers : { ' Content-Type ' : ' multipart/form-data ' },
           }). then (( url ) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm . $img2Url (pos, url);
           })
        }
    }
}
</ script >

Untuk detail tentang mengunggah gambar, klik di sini ...

Catatan

Gaya ukuran default adalah Min-Height: 300px, Min-Width: 300px, yang dapat ditimpa dengan sendirinya.
BASIC Z-INDEX: 1500
Hanya digunakan sebagai tampilan dapat diatur Props: ToolBarsFlag: False, Subfield: False, Defaultopen: "Pratinjau"

Kunci Pintasan

kunci	kode kunci	Fungsi
F8	119	Nyalakan/Mati Navigasi
F9	120	Pratinjau/Edit Toggle
F10	121	Nyalakan/Mati Layar Lengkap
F11	122	Nyalakan/Mati Mode Bacaan
F12	123	Switching kolom tunggal/kolom ganda
Tab	9	lekukan
Ctrl + s	17 + 83	Pemicu simpan
Ctrl + d	17 + 68	Hapus baris yang dipilih
Ctrl + z	17 + 90	Sebelumnya
Ctrl + y	17 + 89	Langkah selanjutnya
Ctrl + Breakspace	17 + 8	Edit jelas
Ctrl + b	17 + 66	Berani
Ctrl + i	17 + 73	Huruf miring
Ctrl + H.	17 + 72	#Judul
Ctrl + 1	17 + 97 atau 49	#Judul
Ctrl + 2	17 + 98 atau 50	## Judul
Ctrl + 3	17 + 99 atau 51	### Judul
Ctrl + 4	17 + 100 atau 52	#### Judul
Ctrl + 5	17 + 101 atau 53	##### Judul
Ctrl + 6	17 + 102 atau 54	###### Judul
Ctrl + u	17 + 85	++ unscore ++
Ctrl + m	17 + 77	== tag ==
Ctrl + q	17 + 81	> Kutipan
Ctrl + o	17 + 79	1. Daftar yang dipesan
Ctrl + l	17 + 76	[Judul Tautan] (Alamat Tautan)
Ctrl + alt + s	17 + 18 + 83	^Tanda sudut atas^
Ctrl + alt + u	17 + 18 + 85	- Daftar yang tidak dipesan
Ctrl + alt + c	17 + 18 + 67	`` `Blok kode
Ctrl + alt + l	17 + 18 + 76	! [Judul gambar] (tautan gambar)
Ctrl + alt + t	17 + 18 + 84	lembaran
Ctrl + shift + s	17 + 16 + 83	~~Tanda sudut bawah~~
Ctrl + shift + d	17 + 16 + 68	~~ Tengah Tanda ~~
Ctrl + shift + c	17 + 16 + 67	Tengah
Ctrl + shift + l	17 + 16 + 76	Di sebelah kiri
Ctrl + Shift + R	17 + 16 + 82	Di sebelah kanan
Shift + tab	16 + 9	Batalkan indentasi

Dependensi

Markdown-it
Auto-TextAre

Ekspansi Sintaks Markdown

emoji
Subskrip
Superscript
wadah
Daftar Definisi
singkatan
Catatan Kaki
menyisipkan
tanda
Daftar TODO
Menyorot
Katex
Pratinjau gambar
toc

Plugin sintaks lainnya dapat diperkenalkan dengan mendapatkan objek Markdown-IT. Plugin sintaks lainnya dapat diperkenalkan dengan mendapatkan objek Markdown-IT.

Perbarui (Perbarui Konten)

Perbarui log

Kolaborator

Chenxchen
ygj6
Yukaige

Lisensi (Sertifikat)

Mavoneditor adalah open source dan dirilis di bawah lisensi MIT.

Memperluas

mavonEditor

Mavoneditor

Dokumen bahasa Inggris

contoh (tampilan gambar)

PC

Instal Mavon-Editor (Instal)

Gunakan (cara memperkenalkan)

Cara menggunakannya di nuxt.js

Dokumentasi API

Alat peraga

Toolbars

Acara mengikat acara

Kode disorot

Unggahan gambar

Catatan

Kunci Pintasan

Dependensi

Ekspansi Sintaks Markdown

Perbarui (Perbarui Konten)

Kolaborator

Lisensi (Sertifikat)

blocksuite

Editor online HTML KindEditor

Editor HTML Daring Asai

Sistem manajemen konten ExmayCMS

Kode sumber obrolan video asing

Mi Create

chat.petals.dev

GPT Prompt Templates

GPTyped

blocksuite

Editor online HTML KindEditor

Editor HTML Daring Asai

Google Dorks

shepherd

mongo express