vue+summernote富文本编辑器
最近项目中有新增编辑报告的需求需使用富文本编辑器，在网上找了几篇相关博客，于是选择了summernote ，summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。
参考文章 /davidhzq/article/details/100842866
summernote官网 /
实现效果
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)
