阅读 10099

Vue.js 富文本编辑器

原文链接: github.com

A wysiwyg editor written in Vue.js and Vuex.js, only support Vue.js 2.x.x

No jQuery or Bootstrap needed.

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

Online demo

vueditor

How to use

  import Vue from 'vue'
  import Vuex from 'vuex'
  import Vueditor, {createEditor} from 'path/to/vueditor.min.js';

  // your config here
  let config = {
    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', '|', 'emoji', 'picture', 'tables', '|', 'switchView'
    ],
    lang: 'en', // default is Chinese, to set to English, fill this with 'en'
    mode: 'default', // options: default | iframe
    iframePath: '',    // fill this if 'mode: iframe'
    fileuploadUrl: '' // your file upload url, the return result must be a string refer to the uploaded image, leave it empty will end up with local preview
  };复制代码

1. Only one editor required or multiple editors required but shared the same config, use it like this:

  Vue.use(Vuex);
  Vue.use(Vueditor, config);
  // create a root instance
  new Vue({
      el: '#editor1'
  });复制代码

Then in your vue template somewhere:

  <template>
    <div>
      ...
      <Vueditor></Vueditor>
    </div>
  </template>复制代码

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

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

2. Multiple editors required, call createEditor and pass specific config as parameter respectively:

  createEditor('#editor2', {
    toolbar: [
        'removeFormat', 'undo', '|', 'elements', 'fontName', 'fontSize', 'foreColor', 'backColor', 
    ],
    lang: 'en',
    mode: 'default',
    iframePath: '',
    fileuploadUrl: '',
    classList: [],
    id: ''
  });复制代码

Note that the second usage will replace the element been initial with, 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();复制代码
文章分类
前端
文章标签