效果图
安装所需依赖
cnpm i summernote
cnpm i jquery
cnpm i bootstrap
cnpm i popper.js
在main.js引入
// 导入summernote编辑器
import 'summernote'
// 导入summernote编辑器css样式
import 'summernote/dist/summernote.css'
// 导入summernote编辑器中文语言包
import 'summernote/lang/summernote-zh-CN.js'
// 导入bootstrap
import 'bootstrap'
// 导入bootstrapCss样式
import 'bootstrap/dist/css/bootstrap.css'
// 导入popper.js,popper.js是bootstrap下的一个特效
import 'popper.js'
HTML部分
<el-form-item label="富文本编辑器" prop="answer">
<div id="summernote"></div>
</el-form-item>
js部分
// 在当前页面导入jquery, 也可在全局导入
import $ from 'jquery'
data() {
return {
// 富文本编辑器输入的内容
contant: '',
}
},
// 在mounted生命周期调用
mounted() {
this.summernote()
},
methods: {
// 引用summernote
summernote() {
var that = this
$('#summernote').summernote({
// 设置高度
height: 300,
// 设置语言
lang: 'zh-CN',
// 将富文本编辑器中输入的内容保存到data数据中
callbacks: {
onChange: function(contents, $editable) {
// contents: 输入的内容
that.content = contents
},
// 上传图片到服务器并在编辑器中显示出来
onImageUpload: function(files) {
// 上传图片到服务器,使用了formData对象,至于兼容性...据说对低版本IE不太友好
var formData = new FormData()
formData.append('file', files[0])
formData.append('userId', 'root')
$.ajax({
url: 'http://localhost:8080/', // 填写后台文件上传接口
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
console.log(data)
$('#summernote').summernote('insertImage', data.data, 'img')
}
})
}
}
})
}
}
注意事项
导入summernote编辑器中文语言包 会报错 jQuery is not defined
解决方案
找到 node_modules/summernote/lang/summernote-zh-CN.js 这个包 将原有引入jquery方式删掉
将以下代码复制 如需引入其他语言包 方法如下
import $ from 'jquery';
$.summernote = $.summernote || {
lang: {
},
};