LaravelLaravel & VueJsVueJs

A text editor using Vue.js and Quill



<

div>

Vue2Editor

HTML Editor using Vue.js and Quilljs.

Install

You can use Yarn or NPM

$ npm install --save vue2-editor

OR

yarn add vue2-editor

Usage

// 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'

Props

NameTypeDefaultDescription
idStringquill-containerSet the id (necessary if multiple editors in the same view)
v-modelStringSet v-model to the the content or data property you wish to bind it to
useCustomImageHandlerBooleanfalseHandle image uploading instead of using default conversion to Base64
placeholderStringPlaceholder text for the editor
disabledBooleanfalseSet to true to disable editor
customModulesArrayDeclare Quill modules to register
editorToolbarArray** Too long for table. See toolbar example belowUse a custom toolbar
editorOptionsArrayOffers object for merging into default config (add formats, custom Quill modules, ect)

Events

NameParametersDescription
imageAddedfile, Editor, cursorLocationEmitted when useCustomImageHandler is true and photo is being added to the editor

Examples

Example – Basic Setup

<template>
   
</template> import { VueEditor } from 'vue2-editor' export default { components: { VueEditor }, data() { return { content: '

Some initial content

' } } }

Example – Custom Image Handler

If you choose to use the custom image handler, an event is emitted when a a photo is selected.
You can see below that 3 parameters are passed.

  1. It passes the file to be handled however you need
  2. The Editor instance
  3. The cursor position at the time of upload so the image can be inserted at the correct position on success
★ READ ALSO ★  Vue.js Google Adsense Component with InFeed Ads support

NOTE In addition to this example, I have created a example repo demonstrating this new feature with an actual server.

<template>
  
</template> 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) => { let url = result.data.url // Get url from response Editor.insertEmbed(cursorLocation, 'image', url); resetUploader(); }) .catch((err) => { console.log(err); }) } } }

Example – Set Contents After Page Load

<template>
  
</template> import { VueEditor } from 'vue2-editor' export default { components: { VueEditor }, data() { return { htmlForEditor: null } }, methods: { setEditorContent: function() { this.htmlForEditor = '

Html For Editor

' } } }

Example – Using Multiple Editors

<template>
  
</template> import { VueEditor } from 'vue2-editor' export default { components: { VueEditor }, data() { return { editor1Content: '

Editor 1 Starting Content

', editor2Content: '

Editor 2 Starting Content

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

Example – Custom Toolbar

<template>
  
</template> import { VueEditor } from 'vue2-editor' export default { components: { VueEditor }, data() { return { content: '

Html For Editor

', customToolbar: [ ['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['image', 'code-block'] ] } } }

Example – Saving The Content

<template>
  
</template> import { VueEditor } from 'vue2-editor' export default { components: { VueEditor }, data () { return { content: '

Initial Content

' } }, methods: { handleSavingContent: function() { // You have the content to save console.log(this.content) } } }

Example – Use a Live Preview

<template>
  
</div> </template> import { VueEditor } from 'vue2-editor' components: { VueEditor }, export default { data() { return { content: '

Initial Content

' } } }

How To Use Custom Quill Modules

There are 2 ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.

Version 1 – Import and Register Yourself

Vue2Editor now exports Quill to assist in this process.

  1. When importing VueEditor, also import Quill.
  2. Import your custom modules
  3. Register the custom modules with Quill
  4. Add the necessary configuration to the editorOptions object
<template>
  
</template> 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: '

Initial Content

' } }, editorSettings: { modules: { imageDrop: true, imageResize: {} } } }

Version 2 – You Import | Vue2Editor Registers

(Recommended way)

  1. Import your custom modules
  2. Use the customModules prop to declare an array of module(s).
  3. Add the necessary configuration for those modules in the editorOptions object under modules as seen below
<template>
  
</template> 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: '

Initial Content

' } }, customModulesForEditor: [ { alias: 'imageDrop', module: ImageDrop }, { alias: 'imageResize', module: ImageResize } ], editorSettings: { modules: { imageDrop: true, imageResize: {} } } }

GitHub

Source link


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close