1.0.11 • Published 7 years ago

my-vue-editor v1.0.11

Weekly downloads
6
License
ISC
Repository
github
Last release
7 years ago

my-vue-editor

Travis Packagist Plugin on redmine.org

A rich text editor based on Vue2.x 中文文档

Demo

click here to see demo More demo please refer to the example directory

Introduction

Our editor is based on vue-html5-editor secondary development. Thanks to its author PeakTai for providing a concise rich text editor plug-in, on the basis of which we have rewritten the native method and extended the functionality.

Install

npm install my-vue-editor

Introduced as a plug-in

import Vue from 'vue'
import myVueEditor from 'my-vue-editor'
Vue.use(myVueEditor, options)

Global introduction

<script src="serverpath/vue.js"></script>
<script src="serverpath/dist/my-vue-editor.js"></script>

Installed by the global variable myVueEditor

Vue.use(myVueEditor, options)

Use

<my-vue-editor :content="content" @change='ctnChange' @imageUpload='imageUpload'></my-vue-editor>

Configuration

Items      Type          Description
name    StringCustom component name, the default is my-vue-editor
modules    ArrayModules need to use
icons  Object    Covering the specified module's icon
commandsObject    Custom command
shortcutObject    Custom shortcut
extendModulesArray    Custom module
Any built-in module nameObject    Overwrite the properties of the corresponding built-in module

example

Vue.use(myVueEditor, {
  // Overlay built-in module's icon
  icons: {
    image: 'iui-icon iui-icon-pic',
    indent: 'iui-icon iui-icon-insert'
  },
  // Modules in use
  modules: [
    'font',
    'bold',
    'italic',
    'underline',
    'linethrough',
    'ul',
    'indent',
    'align',
    'image',
    'quote',
    'todo',
    // This is a custom module
    'customSave'
  ],
  // Overlay image module's configuration
  image: {
    maxSize: 5120 * 1024,
    imgOccupyNewRow: true,
    compress: {
      width: 1600,
      height: 1600,
      quality: 0.8
    }
  },
  // Overlay font module's configuration
  font: {
    config: {
      'xx-large': {
        fontSize: 6,
        name: 'H1'
      },
      'medium': {
        fontSize: 3,
        name: 'H2'
      },
      'small': {
        fontSize: 2,
        name: 'H3'
      },
      default: 'medium'
    },
    // Modify the font module's module inspect mechanism to inspect via style and tag name
    inspect (add) {
      add('style', {
        fontSize: ['xx-large', 'x-large', 'large', 'medium', 'small']
      }).add('tag', 'font')
    }
  },
  // Overlay ul module's configuration
  ul: {
    // When the ul module is inspected, disabled all but itself
    exclude: 'ALL_BUT_MYSELF',
    // When the ul module is clicked, execute the following method
    handler (rh) {
     console.log('i am ul!')
     rh.editor.execCommand('insertUnorderedList')  
    }
  },
  // When the ul module is inspected, disabled image, todo and ul module
  quote: {
    exclude: ['image', 'todo', 'ul']
  },
  // Customize an command named getAllTexts that prints out all the text nodes under the current range object
  commands: {
    getAllTexts (rh, arg) {
      console.log(rh.getAllTextNodeInRange())
    }
  },
  shortcut: {
    // Custom a shortcut key, when you press the command + s, execute the save function
    saveNote: {
      metaKey: true,
      keyCode: 83,
      handler (editor) {
        save()
      }
    }
  },
  // Customize a module, a alert pops up when you click on the module icon
  extendModules: [{
     name: 'smile',
     icon: 'iui iui-icon-smile'
     handler (rh) {
      alert('smile~~')
     }
  }]
})

Event

Event name      Description         
change    Trigger when editor content changes, parameter is up-to-date content data
imageUploadTrigger when uploading images, parameters include the corresponding data of the image,replaceSrcAfterUploadFinish:Used to replace the src attribute of img from the base64 format to the url returned by the server when the upload is successful)deleteImgWhenUploadFail:Used to delete the current picture when the upload fails

Modify the built-in module

Add a parameter with a built-in module's name as it's key, will cover the built-in module's original properties(See all built-in modules and their configuration items in src/modules directory)

Take the image module as an example

Vue.user(myVueEditor, {
  image: {
    // Modify the image module's icon
    icon: 'iui-pic',
    // Cover the original compression parameters, so that the image is not compressed when uploaded
    compress: null,
    // Can not upload the same image repeatedly
    canUploadSameImage: false
  }
})

Cutom module

Extend the module with the extendModules configuration item We provide some common module configuration items

Item      Type          Description  
name    Stringmodule's name
icon    Stringmodule icon's className,The fontAwesome icon is used by default
exclude    String Arraydisabled modules When current module is inspectedWhen value is 'ALL' means disable all modules include current moduleWhen value is'ALL_BUT_MYSELF', means disabled all modules but current moduleWhen value is type of Array, Input module name to be disabled
inspect    Functionmodule inspect,When the cursor is in the list, the list module is highlighted, that is, the list module is inspected, which is based on its UL label as a test basisThe first argument to the function is a method named add, which called to add the module's inspection basis. When there are multiple inspection bases, please call chainingThe first parameter of the add method indicates what path to test. The optional is 'tag' 'style' and 'attribute'When parameter 1 is 'tag', parameter 2 passes in a tag name stringWhen parameter 1 is 'style', parameter 2 is an object with styleName as key and styleValue as value. Note styleName use the hump form(ex:fontSize),When there are multiple styleValue please use the form of ArrayWhen parameter 1 is 'attribute', parameter 2 is an object whose key is attribute name and attribute value is value, and note that if any value is desired, pass in ''(ex:add('attribute', {'data-todo': ''}))
handler    FunctionWhat to do when you click the moduleParameter 1 is range-handler instance, through which can you get the Vue instance of the current editor and the method to operate rangeWe do not recommend operating range directly in the handler, but should encapsulate the range action as a command, calling the command via the execCommand method under the editor instance in the handler
tab    Vue instanceConventional modules use handlers for handling clicks, and if you want to implement UI (drop-down list of font modules) or more complex logic (left-to-right switching of align modules), use tab
init    FunctionCorresponds to the editor component life cycle created, the parameter 1 is the editor instance. Note that the execCommand method can not be used at this time
mounted    FunctionCorresponds to the editor component life cycle mounted, the parameter 1 is the editor instance.
updated    FunctionCorresponds to the editor component life cycle updated, the parameter 1 is the editor instance.
destroyed    FunctionCorresponds to the editor component life cycle beforeDestroy, the parameter 1 is the editor instance.
1.0.11

7 years ago

1.0.10

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago