Vue2Editor
HTML Editor using Vue.js and Quilljs.
Install
You can use Yarn or NPM
OR
Usage
Props
Name | Type | Default | Description |
---|---|---|---|
id | String | quill-container | Set the id (necessary if multiple editors in the same view) |
v-model | String | - | Set v-model to the the content or data property you wish to bind it to |
useCustomImageHandler | Boolean | false | Handle image uploading instead of using default conversion to Base64 |
placeholder | String | - | Placeholder text for the editor |
disabled | Boolean | false | Set to true to disable editor |
customModules | Array | - | Declare Quill modules to register |
editorToolbar | Array | ** Too long for table. See toolbar example below | Use a custom toolbar |
editorOptions | Array | - | Offers object for merging into default config (add formats, custom Quill modules, ect) |
Events
Name | Parameters | Description |
---|---|---|
imageAdded | file, Editor, cursorLocation | Emitted when useCustomImageHandler is true and photo is being added to the editor |
Examples
Example - Basic Setup
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 a example repo demonstrating this new feature with an actual server.
Example - Set Contents After Page Load
Example - Using Multiple Editors
Example - Custom Toolbar
Example - Saving The Content
Example - Use a Live Preview
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.
- When importing VueEditor, also import Quill.
- Import your custom modules
- Register the custom modules with Quill
- Add the necessary configuration to the
editorOptions
object
Version 2 - You Import | Vue2Editor Registers
(Recommended way)
- Import your custom modules
- Use the
customModules
prop to declare an array of module(s). - Add the necessary configuration for those modules in the
editorOptions
object under modules as seen below