Skip to content

Markdown Editor Guide

Karnando Sepryan edited this page Oct 27, 2019 · 2 revisions
  1. import editor on js: import Editor from '@/components/editor/Editor'
  2. insert Editor component into vue file
<div>
  <input type="hidden"
         v-model="text"
         name="text"
         v-validate.disable="'required'" />
  <Editor label="text"
          v-model="text"
          ref="editor"
          @imgUpload="$imgAdd"
          placeholder="Insert text here">
  </Editor>
  <div v-if="errors.has('text')"><span class="input-invalid-message">{{ errors.first('text') }}</span></div>
</div>
  • to upload image, use this method
$imgAdd ($file) {
      this.uploadingFile = true
      let data = new FormData()
      data.append('file', $file)
      let configuration = { headers: { 'Content-Type': 'multipart/form-data' } }

      this.uploadResource({
        data,
        configuration,
        callback: this.successUploadResource,
        fail: this.failUploadResource
      })
    },
    successUploadResource (response) {
      this.uploadingFile = false
      this.$refs.editor.addImage(response.file.full)
      this.imageIds.push(response.id)
    },
    failUploadResource () {
      this.uploadingFile = false
      this.$toasted.error('Fail to upload image, please delete the image and re-upload')
    }

Clone this wiki locally