davidroyer/vue2-editorPublic

NotificationsYou must be signed in to change notification settings
Fork362
Star2.5k

A text editor using Vue.js and Quill

License

MIT license

2.5k stars 362 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 397 Commits
.github/workflows		.github/workflows
.vscode		.vscode
demo		demo
dist		dist
docs		docs
nuxt		nuxt
src		src
.editorconfig		.editorconfig
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
TODO		TODO
babel.config.js		babel.config.js
commitlint.config.js		commitlint.config.js
package.json		package.json
vplugin.config.js		vplugin.config.js
vue.config.js		vue.config.js
yarn-error.log		yarn-error.log
yarn.lock		yarn.lock

Repository files navigation

Vue2Editor

An easy-to-use but yet powerful and customizable rich text editor powered by Quill.js and Vue.js

View Docs

📖Release Notes

Install

You can use Yarn or NPM

npm install vue2-editor

yarn add vue2-editor

Usage

// Basic Use - Covers most scenariosimport{VueEditor}from"vue2-editor";// Advanced Use - Hook into Quill's API for Custom Functionalityimport{VueEditor,Quill}from"vue2-editor";

Nuxt.js

Addvue2-editor/nuxt to modules section ofnuxt.config.js

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

To avoid seeing warnings from Vue about a mismatch in content, you'll need towrap theVueEditor component with theclient-only component Nuxt provides asshown here:

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

Props

Name	Type	Default	Description
customModules	Array	-	Declare Quill modules to register
disabled	Boolean	false	Set to true to disable editor
editorOptions	Object	-	Offers object for merging into default config (add formats, custom Quill modules, ect)
editorToolbar	Array	**Too long for table. See toolbar example below	Use a custom toolbar
id	String	quill-container	Set the id (necessary if multiple editors in the same view)
placeholder	String	-	Placeholder text for the editor
useCustomImageHandler	Boolean	false	Handle image uploading instead of using default conversion to Base64
v-model	String	-	Set v-model to the the content or data property you wish to bind it to

Events

Name	Parameters	Description
blur	quill	Emitted on`blur` event
focus	quill	Emitted on`focus` event
image-added	file, Editor, cursorLocation	Emitted when`useCustomImageHandler` is true and photo is being added to the editor
image-removed	file, Editor, cursorLocation	Emitted when`useCustomImageHandler` is true and photo has been deleted
selection-change	range, oldRange, source	Emitted on Quill's`selection-change` event
text-change	delta, oldDelta, source	Emitted on Quill's`text-change` event

Examples

Example - Basic Setup

<template>  <divid="app">    <vue-editorv-model="content"></vue-editor>  </div></template><script>import {VueEditor }from"vue2-editor";exportdefault {  components: {    VueEditor  },data() {return {      content:"<h1>Some initial content</h1>"    };  }};</script>

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.

It passes the file to be handled however you need
The Editor instance
The cursor position at the time of upload so the image can be inserted at the correct position on success

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

<template>  <divid="app">    <vue-editorid="editor"useCustomImageHandler@image-added="handleImageAdded"v-model="htmlForEditor"    >    </vue-editor>  </div></template><script>import {VueEditor }from"vue2-editor";importaxiosfrom"axios";exportdefault {  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=newFormData();formData.append("image", file);axios({        url:"https://fakeapi.yoursite.com/images",        method:"POST",        data: formData      })        .then(result=> {consturl=result.data.url;// Get url from responseEditor.insertEmbed(cursorLocation,"image", url);resetUploader();        })        .catch(err=> {console.log(err);        });    }  }};</script>

Example - Set Contents After Page Load

<template>  <divid="app">    <button@click="setEditorContent">Set Editor Contents</button>    <vue-editorv-model="htmlForEditor"></vue-editor>  </div></template><script>import {VueEditor }from"vue2-editor";exportdefault {  components: {    VueEditor  },data() {return {      htmlForEditor:null    };  },  methods: {setEditorContent:function() {this.htmlForEditor="<h1>Html For Editor</h1>";    }  }};</script>

Example - Using Multiple Editors

<template>  <divid="app">    <vue-editorid="editor1"v-model="editor1Content"></vue-editor>    <vue-editorid="editor2"v-model="editor2Content"></vue-editor>  </div></template><script>import {VueEditor }from"vue2-editor";exportdefault {  components: {    VueEditor  },data() {return {      editor1Content:"<h1>Editor 1 Starting Content</h1>",      editor2Content:"<h1>Editor 2 Starting Content</h1>"    };  }};</script><style>#editor1,#editor2 {height:350px;}</style>

Example - Custom Toolbar

<template>  <divid="app">    <vue-editorv-model="content":editorToolbar="customToolbar"></vue-editor>  </div></template><script>import {VueEditor }from"vue2-editor";exportdefault {  components: {    VueEditor  },data() {return {      content:"<h1>Html For Editor</h1>",      customToolbar: [        ["bold","italic","underline"],        [{ list:"ordered" }, { list:"bullet" }],        ["image","code-block"]      ]    };  }};</script>

Example - Saving The Content

<template>  <divid="app">    <button@click="saveContent"></button>    <vue-editorv-model="content"></vue-editor>  </div></template><script>import {VueEditor }from"vue2-editor";exportdefault {  components: {    VueEditor  },data() {return {      content:"<h3>Initial Content</h3>"    };  },  methods: {handleSavingContent:function() {// You have the content to saveconsole.log(this.content);    }  }};</script>

Example - Use a Live Preview

<template>  <divid="app">    <vue-editorv-model="content"></vue-editor>    <divv-html="content"></div>  </div></template><script>import {VueEditor }from'vue2-editor'components: {  VueEditor},exportdefault {data() {return {      content:'<h1>Initial Content</h1>'    }  }}</script>

How To Use Custom Quill Modules

There are two 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.

When importing VueEditor, also import Quill.
Import your custom modules
Register the custom modules with Quill
Add the necessary configuration to theeditorOptions object

<template>  <divid="app">    <vue-editor:editorOptions="editorSettings"v-model="content">  </div></template><script>import {VueEditor,Quill }from'vue2-editor'import {ImageDrop }from'quill-image-drop-module'importImageResizefrom'quill-image-resize-module'Quill.register('modules/imageDrop', ImageDrop)Quill.register('modules/imageResize', ImageResize)exportdefault {    components: {      VueEditor    },data() {return {        content:'<h1>Initial Content</h1>',        editorSettings: {          modules: {            imageDrop:true,            imageResize: {}          }        }      }    }  }</script>

Version 2 -You Import | Vue2Editor Registers

(Recommended way)

Import your custom modules
Use thecustomModules prop to declare an array of module(s).
Add the necessary configuration for those modules in theeditorOptions object under modules as seen below

<template>  <divid="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";importImageResizefrom"quill-image-resize-module";exportdefault {  components: {    VueEditor  },data() {return {      content:"<h1>Initial Content</h1>",      customModulesForEditor: [        { alias:"imageDrop", module: ImageDrop },        { alias:"imageResize", module: ImageResize }      ],      editorSettings: {        modules: {          imageDrop:true,          imageResize: {}        }      }    };  }};</script>