vue2.x版本中使用summernote编辑器

summernote的基本属性

  summernote是一款基于jQuery的编辑器，vue社区中关于类似的编辑器也有很多，但是原有的就项目中使用了summernote，为了保持统一，故使用summernote！
显示效果如下，顶部的工具条为自定义配置的，后面讲到。

使用summernote需要先安装依赖：

npm install summernote
npm install jquery
npm install bootstrap
npm install popper.js

安装好依赖以后，还需要在main.js中进行以下设置：

import 'summernote'
// 导入summernote编辑器css样式
import 'summernote/dist/summernote.css'
// 导入bootstrap
import 'bootstrap'
// 导入bootstrapCss样式
import 'bootstrap/dist/css/bootstrap.css'
// 导入popper.js，popper.js是bootstrap下的一个特效
import 'popper.js'

由于summernote需要依赖jQuery，可以在main.js中进行全局引入，也可以在使用的位置局部引入。
具体使用代码：

<template>
  <div id="editor_view">
    <div id="summernote2"></div>
    <el-button type="primary" size="mini" @click="getInputValue">获取输入值</el-button>
  </div>
</template>

<script>
// 在当前页面导入jquery, 也可在全局导入
import $ from 'jquery'
export default {
  data () {
    return {
      // 富文本编辑器输入的内容
      contant: ''
    }
  },
 
  // 在mounted生命周期调用
  mounted () {
    this.summernote()
  },
  methods: {
    // 引用summernote
    summernote () {
      $('#summernote2').summernote({
        toolbar: [
          ['style'],
          ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
          ['name', ['fontname']],
          ['size', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph', 'height']],
          ['table'],
          ['options', ['undo', 'redo', 'fullscreen', 'codeview', 'help']]
        ],
        focus: true, 
        height: 200
      });
    },
   getInputValue () {
   	  // 获取summernote输入的值的方法 $('#summernote2').summernote('code')
      this.contant = $('#summernote2').summernote('code');
      console.log(this.contant)
    }
  }
}

</script>

<style scoped>
#editor_view >>> .btn {
  border-color: darkgrey;
}
#editor_view >>> .dropdown-toggle::after {
  display: none;
}

#editor_view >>> .note-toolbar {
  border-bottom: 1px solid darkgrey;
}
</style>

如何配置（工具栏）

  summernote的工具栏支持自定义配置，具体规则为：

toolbar: [
          ['namescope1',['item1','item2']],
          ['namescope2',['item1','item2']],
           ...
        ]

toolbar是一个数组，里面的每个工具栏按钮可以按命名名称划分为组，即想讲某些按钮编入一个分组显示，只需要按名称添加到组里即可（具体参考上面的完整实现代码）
在此分享一个方法，有点彭运气的成分，在配置toolbar时，由于没有一个完整的文档说明toolbar支持那些功能（按钮），查看源码包时发现有中文包，参照字段的中文配置了一下，除了一些小问题，其他的基本没有问题
注意：配置字体和字号这个两个按钮是，字段名称与其他存在差异

 toolbar: [
          ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
          ['fontname', ['fontname']],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph', 'height']],
          ['table'],
          ['options', ['undo', 'redo', 'fullscreen', 'codeview', 'help']]
        ],

中文包中的对应字段：

细心观察的话就会发现：
像bold、italic、height等，直接写字段名称就可以，而size、name则需要写成fontsize、fontname。

获取数据（HTML内容）

$('#summernote').summernote('code'); //#summernote为初始化时的容器的id