vue-summernote

A Vue integration summernote rich text plugin

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-summernote
2231.0.35 years ago5 years agoMinified + gzip package size for vue-summernote in KB

Readme

Vue summernote plugin

一个Vue集成summernote富文本插件

Requirements

  • jQuery
  • BootStrap
  • summernote

Installation

npm i vue-summernote -S

Usage

使用须知:

插件目前仅支持vue2.0以上版本

Install plugin

编辑main.js

import VueSummernote from 'vue-summernote'

// 载入bootstrap.js
require('bootstrap')

// 载入bootstrap以及summernote的样式
// 这里需要你的脚手架工具具有加载css的能力
require('bootstrap/dist/css/bootstrap.min.css')
require('summernote/dist/summernote.css')

// 这里设置summernote的初始化选项
// 可参考 http://summernote.org/deep-dive/#initialization-options
Vue.use(VueSummernote, {
  dialogsFade: true
})

编辑webpack.base.conf.js

因为summernote依赖于BootStrap,而Bootstrap严重依赖jQuery,这里需要配置jQuery为全局使用,不然会报错,找不到jQuery

var webpack = require('webpack')
var jquery = require('jquery')

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ]
}

Examples

<template>
<div>
  <el-row :gutter="100">
    <vue-summernote ref="editer"></vue-summernote>
    <vue-summernote ref="editer1"></vue-summernote>
  </el-row>
  <button @click="setVal">初始化</button>
  <button @click="getVal">获取</button>
</div>
</template>

<script>
export default {
  name: 'app',
  mounted () {
    const self = this
    const editer = self.$refs.editer
    const editer1 = self.$refs.editer1
    editer.$on('onImageUpload', function (files) {
      // 这里做上传图片的操作,上传成功之后便可以用到下面这句将图片插入到编辑框中
      editer.run('insertImage', 'http://vuefe.cn/images/logo.png')
    })
    editer.$on('onChange', function (contents) {
      // 当富文本框内容发生变化时做什么事
      console.log('onChange:', contents)
    })
    editer1.$on('onImageUpload', function (files) {
      // 这里做上传图片的操作,上传成功之后便可以用到下面这句将图片插入到编辑框中
      editer1.run('insertImage', 'http://vuefe.cn/images/logo.png')
    })
  },
  methods: {
    setVal () {
      // 设置初始值
      this.$refs.editer.run('code', '这里是富文本的初始值')
    },
    getVal () {
      // 获取初始值
      this.$refs.editer.run('code')
    }
  }
}
</script>

Props

参数 说明 类型 默认值
placeholder 占位符 String '请输入内容'
height 富文本编辑器高度 Number 500
minHeight 富文本编辑器最小高度 Number 200
maxHeight 富文本编辑器最大高度 Number 700
focus 富文本编辑器焦点 Boolean true

Events

事件 参数
onInit
onEnter
onFocus
onBlur
onKeyup event
onKeydown event
onPaste event
onImageUpload files
onChange contents

Mothods

run(code, value)

参数说明:

参数 说明 类型 必需
code 对应summernote API的code String
value 传递的值 String/Number

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.