一个Vue集成summernote富文本插件
- jQuery
- BootStrap
- summernote
npm i vue-summernote -S使用须知：
插件目前仅支持vue2.0以上版本
编辑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"
})
]
}<template>
<div>
<vue-summernote ref="editer"></vue-summernote>
<button @click="setVal">初始化</button>
<button @click="getVal">获取</button>
</div>
</template>
<script>
export default {
name: 'app',
created () {
this.$on('onImageUpload', function (files) {
// 这里做上传图片的操作，上传成功之后便可以用到下面这句将图片插入到编辑框中
this.$refs.editer.run('insertImage', 'http://vuefe.cn/images/logo.png')
})
this.$on('onChange', function (contents) {
// 当富文本框内容发生变化时做什么事
console.log('onChange:', contents)
})
},
methods: {
setVal () {
// 设置初始值
this.$refs.editer.run('code', '这里是富文本的初始值')
},
getVal () {
// 获取初始值
this.$refs.editer.run('code')
}
}
}
</script>
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| placeholder | 占位符 | String | '请输入内容' |
| height | 富文本编辑器高度 | Number | 500 |
| minHeight | 富文本编辑器最小高度 | Number | 200 |
| maxHeight | 富文本编辑器最大高度 | Number | 700 |
| focus | 富文本编辑器焦点 | Boolean | true |
events 选项在vue2.0版本被弃用。事件处理器现在在 created 钩子中被注册。
| 事件 | 参数 |
|---|---|
| onInit | 无 |
| onEnter | 无 |
| onFocus | 无 |
| onBlur | 无 |
| onKeyup | event |
| onKeydown | event |
| onPaste | event |
| onImageUpload | files |
| onChange | contents |
参数说明：
| 参数 | 说明 | 类型 | 必需 |
|---|---|---|---|
| code | 对应summernote API的code | String | 是 |
| value | 传递的值 | String/Number | 否 |