vue+summernote富文本编辑器

vue+summernote富文本编辑器

最近项目中有新增编辑报告的需求需使用富文本编辑器，在网上找了几篇相关博客，于是选择了summernote ，summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。

参考文章 https://blog.csdn.net/davidhzq/article/details/100842866
summernote官网 https://summernote.org/

实现效果

1.安装所需的依赖
npm install --save jquery
npm install --save bootstrap
npm install --save codemirror
npm install --save summernote
npm install --save font-awesome
npm install --save jquery popper.js

2.vue.config.js中配置jquery

resolve: {
    alias: {
      '@': resolve('src'),
      'jquery': path.resolve(__dirname, './node_modules/jquery/src/jquery'),
    },
  }

3.main.js中引入所需文件

 import 'bootstrap/dist/js/bootstrap.min.js'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'font-awesome/css/font-awesome.css'
 import 'summernote'
 import 'summernote/dist/lang/summernote-zh-CN'
 import 'summernote/dist/summernote.css'
 import 'popper.js'

4.页面中使用

 <div id="summernote" ></div>

 import $ from 'jquery'

 $('#summernote').summernote({
      focus: true,
      lang: 'zh-CN',
      // 工具栏
      // toolbar: [
      //   // [groupName, [list of button]]
      //   ['style', ['bold', 'italic', 'underline', 'clear']],
      //   ['font', ['strikethrough', 'superscript', 'subscript']],
      //   ['fontsize', ['fontsize']],
      //   ['color', ['color']],
      //   ['para', ['ul', 'ol', 'paragraph']],
      //   ['height', ['height']],
      // ],
      // 可自定义图标
      icons: {
        align: 'fa fa-align',
        alignCenter: 'fa fa-align-center',
        alignJustify: 'fa fa-align-justify',
        alignLeft: 'fa fa-align-left',
        alignRight: 'fa fa-align-right',
        indent: 'fa fa-indent-right',
        outdent: 'fa fa-indent-left',
        arrowsAlt: 'fa fa-arrows-alt',
        bold: 'fa fa-bold',
        caret: 'fa fa-caret-down',
        circle: 'fa fa-circle',
        close: 'fa fa-close',
        code: 'fa fa-code',
        eraser: 'fa fa-eraser',
        font: 'fa fa-font',
        frame: 'fa fa-frame',
        italic: 'fa fa-italic',
        link: 'fa fa-link',
        unlink: 'fa fa-chain-broken',
        magic: 'fa fa-magic',
        menuCheck: 'fa fa-check',
        minus: 'fa fa-minus',
        orderedlist: 'fa fa-list-ol',
        pencil: 'fa fa-pencil',
        picture: 'fa fa-picture-o',
        question: 'fa fa-question',
        redo: 'fa fa-redo',
        square: 'fa fa-square',
        strikethrough: 'fa fa-strikethrough',
        subscript: 'fa fa-subscript',
        superscript: 'fa fa-superscript',
        table: 'fa fa-table',
        textHeight: 'fa fa-text-height',
        trash: 'fa fa-trash',
        underline: 'fa fa-underline',
        undo: 'fa fa-undo',
        unorderedlist: 'fa fa-list-ul',
        video: 'fa fa-video-camera',
      },
  });

  取值：$('#summernote').summernote('code')
  赋值：$('#summernote').summernote('code', this.richText)