Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vueditor with all npm packages installed. Try it out:

var vueditor = require("vueditor")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vueditor v0.3.1

a wysiwyg editor based on Vue.js and Vuex

Vueditor

vueditor vueditor JavaScript Style Guide

中文文档

A wysiwyg editor written in Vue.js and Vuex.js, require Vue.js 2.0.0, Vuex.js 2.0.0 and above.

Browser compatibility: Chrome, Firefox, Safari, IE 9+.

Online DEMO

Screenshot

vueditor

Features

  • Customizable
  • Light weighted, very few dependencies
  • Plugin support

Installation

npm install vueditor

If you prefer to use it via script tag, download the last release package and add vueditor.min.js, vueditor.min.css to your page.

Usage

Vue.use(Vueditor, config)

Use it in the following cases:

  1. Only one editor required
  2. Multiple editors required but shared the same config
import Vue from 'vue'
import Vuex from 'vuex'
import Vueditor from 'vueditor'

import 'vueditor/dist/style/vueditor.min.css'

// your config here
let config = {
  toolbar: [
    'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor'
  ],
  fontName: [
    {val: 'arial black'}, 
    {val: 'times new roman'}, 
    {val: 'Courier New'}
  ],
  fontSize: ['12px', '14px', '16px', '18px', '0.8rem', '1.0rem', '1.2rem', '1.5rem', '2.0rem'],
  uploadUrl: ''
};

Vue.use(Vuex);
Vue.use(Vueditor, config);
// create a root instance
new Vue({
  el: '#editorContainer'
});

Then in your vue template somewhere:

<template>
  <div>
    ...
    <Vueditor></Vueditor>
  </div>
</template>

To get and set content you need to acquire the Vueditor component, you can use $children[index] or ref to do that.

let parent = new Vue({
  el: '#editor1'
});
let editor = parent.$children[0];
editor.setContent('your content here');
editor.getContent();

createEditor(selector, config)

Call createEditor and pass specific config as parameter respectively for multiple editors in a page.


  import Vue from 'vue'
  import Vuex from 'vuex'
  import { createEditor } from 'vueditor'

  import 'vueditor/dist/style/vueditor.min.css'
  
  Vue.use(Vuex);

  createEditor('#editorContainer', {
    toolbar: [
      'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor', 
    ],
    uploadUrl: '',
    id: '',
    classList: []
  });

The initialized element will be replaced in this case, you can add classList or id to the config for adding styles, the rendered element will have these attributes. createEditor returns a vueditor instance, you can set and get content with it:

let inst = createEditor(...);
inst.setContent('your content here');
inst.getContent();

File upload

You can set uploadUrl attribute in config when you initialize an editor, all the upload stuffs will be handled automatically. If you perfer do it yourself or has some authrization to do before uploading, just add a function upload to the instance returned by createEditor. When an upload action triggered, vueditor will call this function instead of the build-in function. The upload function has two arguments: obj refer to the file input element, callback requires the uploaded file url as argument for inserting content to the editor, See the example below:

editor.upload = function (obj, callback) {
  let formData = new FormData();
  let xhr = new XMLHttpRequest();
  formData.append('fieldName', obj.files[0]);
  xhr.open('POST', 'upload/url');
  xhr.send(formData);
  xhr.onload = function () {
    callback(xhr.responseText);
  };
  xhr.onerror = function (err) {
    console.log(err);
  }
}

language setting

The editor's default language is English, to set to other language, you will need to translate for your own. The dist/language folder has an full example inside. Adding a script tag or use import, require to
bring the language object in, then make it an attribute of the config for initialize. See the example below:

Vue.use(Vueditor, {
  ...
  lang: languageObject,
});

Options for configuration:

NameTypeDescription
spellcheckBooleanCheck spell or not, default is false
langObjectInterface language, default is English
toolbarArrayButtons on the toolbar, use `
fontNameArrayThe font-family select's options, val refer to the actual css value, abbr refer to the option's text, abbr is optional when equals to val
fontSizeArrayThe font-size select's options
uploadUrlStringFile upload url, the return result of this must be a string refer to the uploaded file url, leave it empty will end up with local preview
idStringid for the rendered editor element
classListArrayclassName for the rendered editor element
pluginsArrayplugins for editor

Default value of the above fields:

{
  toolbar: [
    'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor', 'divider',
    'bold', 'italic', 'underline', 'strikeThrough', 'links', 'divider', 'subscript', 'superscript',
    'divider', 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', '|', 'indent', 'outdent',
    'insertOrderedList', 'insertUnorderedList', '|', 'picture', 'tables', '|', 'switchView'
  ],
  fontName: [
    {val: 'arial black'}, 
    {val: 'times new roman'}, 
    {val: 'Courier New'}
  ],
  fontSize: [
    '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px'
  ],
  uploadUrl: ''
  id: '',
  classList: []
};

Change log

See change log

Bug confirmed

TODO

  • [x] Markdown support
  • [x] Full screen and fixed toolbar features
  • [x] Popup menu position auto adjust
  • [ ] Advanced table options
  • [ ] Code highlight
  • [ ] Plugin support
  • [ ] XSS prevention
  • [ ] Test

License

MIT

Copyright (c) 2016 hifarer

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free