VUE配置Summernote富文本编辑器

效果图

安装所需依赖

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: {},
};

未更改

已更改