vue2 editor

Vue2Editor

Editor teks kaya yang mudah digunakan namun kuat dan dapat disesuaikan yang ditenagai oleh quill.js dan vue.js

Lihat dokumen

Catatan Rilis

Memasang

Anda dapat menggunakan benang atau NPM

npm install vue2-editor

ATAU

yarn add vue2-editor

Penggunaan

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ; 

Nuxt.js

Tambahkan vue2-editor/nuxt ke Modul nuxt.config.js

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

Untuk menghindari melihat peringatan dari Vue tentang ketidakcocokan dalam konten, Anda harus membungkus komponen VueEditor dengan komponen client-only yang disediakan Nuxt seperti yang ditunjukkan di sini:

 < client-only >
  < VueEditor />
</ client-only > 

Alat peraga

Nama	Jenis	Bawaan	Keterangan
Customodules	Array	-	Mendeklarasikan modul quill untuk mendaftar
dengan disabilitas	Boolean	PALSU	Diatur ke true untuk menonaktifkan editor
Editoropsi	Obyek	-	Menawarkan Objek Untuk Menggabungkan ke Konfigurasi Default (Tambah Format, Modul Quill Kustom, ECT)
EditorToolBar	Array	** terlalu lama untuk meja. Lihat contoh toolbar di bawah ini	Gunakan bilah alat khusus
pengenal	Rangkaian	quill-container	Atur ID (perlu jika beberapa editor dalam tampilan yang sama)
placeholder	Rangkaian	-	Teks placeholder untuk editor
UsecustomimageHandler	Boolean	PALSU	Menangani pengunggahan gambar alih -alih menggunakan konversi default ke base64
V-model	Rangkaian	-	Atur V-Model ke Properti Konten atau Data yang ingin Anda ikat

Acara

Nama	Parameter	Keterangan
mengaburkan	bulu ayam	Dipancarkan pada acara blur
fokus	bulu ayam	Dipancarkan pada acara focus
Tambahan gambar	File, editor, kursorlokasi	Dipancarkan ketika useCustomImageHandler benar dan foto ditambahkan ke editor
gambar yang dikeluarkan	File, editor, kursorlokasi	Dipancarkan ketika useCustomImageHandler benar dan foto telah dihapus
Pilihan-change	Range, Oldrange, Sumber	Dipancarkan pada acara selection-change Quill
perubahan teks	Delta, Olddelta, Sumber	Dipancarkan pada acara text-change Quill

Contoh

Contoh - Pengaturan Dasar

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

Contoh - penangan gambar kustom

Jika Anda memilih untuk menggunakan penangan gambar khusus, suatu acara dipancarkan saat foto AA dipilih. Anda dapat melihat di bawah bahwa 3 parameter dilewatkan.

1. Ini melewati file yang akan ditangani sesuka Anda
2. Instance editor
3. Posisi kursor pada saat mengunggah sehingga gambar dapat dimasukkan pada posisi yang benar pada keberhasilan

Catatan Selain contoh ini, saya telah membuat contoh repo yang menunjukkan fitur baru ini dengan server yang sebenarnya.

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

Contoh - Setel konten setelah pemuatan halaman

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

Contoh - Menggunakan beberapa editor

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

Contoh - Toolbar Kustom

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

Contoh - Menyimpan Konten

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

Contoh - Gunakan pratinjau langsung

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
    < div v-html = " content " ></ div >
  </ div >
</ template >

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

Cara menggunakan modul quill khusus

Ada dua cara menggunakan modul khusus dengan Vue2Editor. Ini sebagian karena ada kasus di mana kesalahan dilemparkan ketika mengimpor dan mencoba untuk menyatakan modul khusus, dan sebagian karena saya percaya itu benar -benar memisahkan kekhawatiran dengan baik.

Versi 1 - Impor dan Daftarkan Diri Sendiri

VUE2Editor sekarang mengekspor quill untuk membantu dalam proses ini.

1. Saat mengimpor vueEditor, juga impor pena.
2. Impor modul khusus Anda
3. Daftarkan Modul Kustom dengan Quill
4. Tambahkan konfigurasi yang diperlukan ke objek editorOptions

< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

Versi 2 - Anda mengimpor | Register Vue2Editor

(Cara yang disarankan)

1. Impor modul khusus Anda
2. Gunakan Prop customModules untuk mendeklarasikan serangkaian modul.
3. Tambahkan konfigurasi yang diperlukan untuk modul -modul tersebut dalam objek editorOptions di bawah modul seperti yang terlihat di bawah ini

< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

---

Perkembangan

Vue2Editor sekarang menggunakan POI untuk pengembangan

• yarn dev : Jalankan contoh dalam mode pengembangan
• yarn docs : pengembangan untuk dokumen
• yarn build : Bangun Komponen di kedua format
• yarn lint : Jalankan Eslint

Lisensi

Mit