Summernote依赖于jquery和bootstrap3/4 所以用时记得引入这俩依赖
奉上引入方法（官网说的很清楚，api也很详细）：
<!-- include libraries(jQuery, bootstrap) --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <!-- include summernote css/js --> <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
简单的例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>summernote</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script> </head> <body> <div id="summernote" style="width:100px;height:100px;"><p>Hello Summernote</p></div> <script> $(document).ready(function() { $(\'#summernote\').summernote(); }); </script> </body> </html>
牛逼人物的使用笔记（里面有上传图片和视频的方法）
需要安装的依赖包：
"bootstrap": "^4.1.1",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"codemirror": "^5.37.0",
"summernote": "^0.8.10",
在main.js中引入
import \'bootstrap/dist/js/bootstrap.bundle.min\'
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\'
view
<div id="summernote" v-model="richContent"></div>
mounted中
$(\'#summernote\').summernote({
lang: \'zh-CN\',//语言
placeholder: \'请输入内容\',//提示语
height: 300,//高度
width: \'auto\',//宽度 也可以指定固定宽度 比如600
htmlMode: true,
toolbar: [//工具栏配置
[\'style\', [\'bold\', \'italic\', \'underline\', \'clear\']],
[\'fontsize\', [\'fontsize\']],
[\'fontname\', [\'fontname\']],
[\'color\', [\'color\']],
[\'para\', [\'ul\', \'ol\', \'paragraph\']],
[\'insert\', [\'link\', \'picture\']],
[\'mybutton\', [\'myVideo\']]
],
fontSizes: [\'8\', \'9\', \'10\', \'11\', \'12\', \'14\', \'18\', \'24\', \'36\'],//字体大小配置
fontNames: [//字体类型配置
\'Arial\', \'Arial Black\', \'Comic Sans MS\', \'Courier New\',
\'Helvetica Neue\', \'Helvetica\', \'Impact\', \'Lucida Grande\',
\'Tahoma\', \'Times New Roman\', \'Verdana\',\'宋体\',\'微软雅黑\',\'楷体\',\'黑体\',\'隶书\'
],
buttons: {
myVideo: myVideoBtn
},
callbacks: {//回调函数
onSubmit: function() {
vm.richContent = $(\'#summernote\').summernote(\'code\')
}
}
});
summernote取值和赋值
取值：$(\'#summernote\').summernote(\'code\')
赋值：$(\'#summernote\').summernote(\'code\', this.richContent)
把附录也偷过来。。。
默认配置项概览：
options: {
modules: {
\'editor\': Editor,
\'clipboard\': Clipboard,
\'dropzone\': Dropzone,
\'codeview\': Codeview,
\'statusbar\': Statusbar,
\'fullscreen\': Fullscreen,
\'handle\': Handle,
// FIXME: HintPopover must be front of autolink
// - Script error about range when Enter key is pressed on hint popover
\'hintPopover\': HintPopover,
\'autoLink\': AutoLink,
\'autoSync\': AutoSync,
\'placeholder\': Placeholder,
\'buttons\': Buttons,
\'toolbar\': Toolbar,
\'linkDialog\': LinkDialog,
\'linkPopover\': LinkPopover,
\'imageDialog\': ImageDialog,
\'imagePopover\': ImagePopover,
\'videoDialog\': VideoDialog,
\'helpDialog\': HelpDialog,
\'airPopover\': AirPopover
},
buttons: {},
lang: \'zh-CN\',
// toolbar工具栏默认
toolbar: [
[\'style\', [\'style\']],
[\'font\', [\'bold\', \'underline\', \'clear\']],
[\'fontname\', [\'fontname\']],
[\'font\',[\'strikethrough\',\'superscript\',\'subscript\']],//加脚标功能
[\'color\', [\'color\']],
[\'para\', [\'ul\', \'ol\', \'paragraph\']],
[\'table\', [\'table\']],
[\'insert\', [\'link\', \'picture\', \'video\']],
[\'view\', [\'fullscreen\', \'codeview\', \'help\']]
],
// popover
popover: {
image: [
[\'imagesize\', [\'imageSize100\', \'imageSize50\', \'imageSize25\']],
[\'float\', [\'floatLeft\', \'floatRight\', \'floatNone\']],
[\'remove\', [\'removeMedia\']]
],
link: [
[\'link\', [\'linkDialogShow\', \'unlink\']]
],
air: [
[\'color\', [\'color\']],
[\'font\', [\'bold\', \'underline\', \'clear\']],
[\'para\', [\'ul\', \'paragraph\']],
[\'table\', [\'table\']],
[\'insert\', [\'link\', \'picture\']]
]
},
// air mode: inline editor
airMode: false,
width: null,
height: null,
focus: false,
tabSize: 4,
styleWithSpan: false,
shortcuts: true,
textareaAutoSync: true,
direction: null,
styleTags: [\'p\', \'blockquote\', \'pre\', \'h1\', \'h2\', \'h3\', \'h4\', \'h5\', \'h6\'],
fontNames: [
\'Arial\', \'Arial Black\', \'Comic Sans MS\', \'Courier New\',
\'Helvetica Neue\', \'Helvetica\', \'Impact\', \'Lucida Grande\',
\'Tahoma\', \'Times New Roman\', \'Verdana\'
],
fontSizes: [\'8\', \'9\', \'10\', \'11\', \'12\', \'14\', \'18\', \'24\', \'36\'],
// pallete colors(n x n)
colors: [
[\'#000000\', \'#424242\', \'#636363\', \'#9C9C94\', \'#CEC6CE\', \'#EFEFEF\', \'#F7F7F7\', \'#FFFFFF\'],
[\'#FF0000\', \'#FF9C00\', \'#FFFF00\', \'#00FF00\', \'#00FFFF\', \'#0000FF\', \'#9C00FF\', \'#FF00FF\'],
[\'#F7C6CE\', \'#FFE7CE\', \'#FFEFC6\', \'#D6EFD6\', \'#CEDEE7\', \'#CEE7F7\', \'#D6D6E7\', \'#E7D6DE\'],
[\'#E79C9C\', \'#FFC69C\', \'#FFE79C\', \'#B5D6A5\', \'#A5C6CE\', \'#9CC6EF\', \'#B5A5D6\', \'#D6A5BD\'],
[\'#E76363\', \'#F7AD6B\', \'#FFD663\', \'#94BD7B\', \'#73A5AD\', \'#6BADDE\', \'#8C7BC6\', \'#C67BA5\'],
[\'#CE0000\', \'#E79439\', \'#EFC631\', \'#6BA54A\', \'#4A7B8C\', \'#3984C6\', \'#634AA5\', \'#A54A7B\'],
[\'#9C0000\', \'#B56308\', \'#BD9400\', \'#397B21\', \'#104A5A\', \'#085294\', \'#311873\', \'#731842\'],
[\'#630000\', \'#7B3900\', \'#846300\', \'#295218\', \'#083139\', \'#003163\', \'#21104A\', \'#4A1031\']
],
lineHeights: [\'1.0\', \'1.2\', \'1.4\', \'1.5\', \'1.6\', \'1.8\', \'2.0\', \'3.0\'],
tableClassName: \'table table-bordered\',
insertTableMaxSize: {
col: 10,
row: 10
},
dialogsInBody: false,
dialogsFade: false,
maximumImageFileSize: null,
callbacks: {
onInit: null,//初始化回调函数
onFocus: null,//聚集
onBlur: null,//失去焦点
onEnter: null,//回车键的回调函数
onKeyup: null,
onKeydown: null,
onSubmit: null,//提交时回调函数
onImageUpload: null,//这就是上传图片的回调函数
onImageUploadError: null//上传图片出错
},
codemirror: {
mode: \'text/html\',
htmlMode: true,
lineNumbers: true
},
keyMap: {
pc: {
\'ENTER\': \'insertParagraph\',
\'CTRL+Z\': \'undo\',
\'CTRL+Y\': \'redo\',
\'TAB\': \'tab\',
\'SHIFT+TAB\': \'untab\',
\'CTRL+B\': \'bold\',
\'CTRL+I\': \'italic\',
\'CTRL+U\': \'underline\',
\'CTRL+SHIFT+S\': \'strikethrough\',
\'CTRL+BACKSLASH\': \'removeFormat\',
\'CTRL+SHIFT+L\': \'justifyLeft\',
\'CTRL+SHIFT+E\': \'justifyCenter\',
\'CTRL+SHIFT+R\': \'justifyRight\',
\'CTRL+SHIFT+J\': \'justifyFull\',
\'CTRL+SHIFT+NUM7\': \'insertUnorderedList\',
\'CTRL+SHIFT+NUM8\': \'insertOrderedList\',
\'CTRL+LEFTBRACKET\': \'outdent\',
\'CTRL+RIGHTBRACKET\': \'indent\',
\'CTRL+NUM0\': \'formatPara\',
\'CTRL+NUM1\': \'formatH1\',
\'CTRL+NUM2\': \'formatH2\',
\'CTRL+NUM3\': \'formatH3\',
\'CTRL+NUM4\': \'formatH4\',
\'CTRL+NUM5\': \'formatH5\',
\'CTRL+NUM6\': \'formatH6\',
\'CTRL+ENTER\': \'insertHorizontalRule\',
\'CTRL+K\': \'linkDialog.show\'
},
mac: {
\'ENTER\': \'insertParagraph\',
\'CMD+Z\': \'undo\',
\'CMD+SHIFT+Z\': \'redo\',
\'TAB\': \'tab\',
\'SHIFT+TAB\': \'untab\',
\'CMD+B\': \'bold\',
\'CMD+I\': \'italic\',
\'CMD+U\': \'underline\',
\'CMD+SHIFT+S\': \'strikethrough\',
\'CMD+BACKSLASH\': \'removeFormat\',
\'CMD+SHIFT+L\': \'justifyLeft\',
\'CMD+SHIFT+E\': \'justifyCenter\',
\'CMD+SHIFT+R\': \'justifyRight\',
\'CMD+SHIFT+J\': \'justifyFull\',
\'CMD+SHIFT+NUM7\': \'insertUnorderedList\',
\'CMD+SHIFT+NUM8\': \'insertOrderedList\',
\'CMD+LEFTBRACKET\': \'outdent\',
\'CMD+RIGHTBRACKET\': \'indent\',
\'CMD+NUM0\': \'formatPara\',
\'CMD+NUM1\': \'formatH1\',
\'CMD+NUM2\': \'formatH2\',
\'CMD+NUM3\': \'formatH3\',
\'CMD+NUM4\': \'formatH4\',
\'CMD+NUM5\': \'formatH5\',
\'CMD+NUM6\': \'formatH6\',
\'CMD+ENTER\': \'insertHorizontalRule\',
\'CMD+K\': \'linkDialog.show\'
}
},
icons: {
\'align\': \'icon-align\',
\'alignCenter\': \'icon-align-center\',
\'alignJustify\': \'icon-align-justify\',
\'alignLeft\': \'icon-align-left\',
\'alignRight\': \'icon-align-right\',
\'indent\': \'icon-indent-right\',
\'outdent\': \'icon-indent-left\',
\'arrowsAlt\': \'icon-resize-full\',
\'bold\': \'icon-bold\',
\'caret\': \'icon-caret-down\',
\'circle\': \'icon-circle\',
\'close\': \'icon-close\',
\'code\': \'icon-code\',
\'eraser\': \'icon-eraser\',
\'font\': \'icon-font\',
\'frame\': \'icon-frame\',
\'italic\': \'icon-italic\',
\'link\': \'icon-link\',
\'unlink\': \'icon-chain-broken\',
\'magic\': \'icon-magic\',
\'menuCheck\': \'icon-check\',
\'minus\': \'icon-minus\',
\'orderedlist\': \'icon-list-ol\',
\'pencil\': \'icon-pencil\',
\'picture\': \'icon-picture\',
\'question\': \'icon-question\',
\'redo\': \'icon-redo\',
\'square\': \'icon-square\',
\'strikethrough\': \'icon-strikethrough\',
\'subscript\': \'icon-subscript\',
\'superscript\': \'icon-superscript\',
\'table\': \'icon-table\',
\'textHeight\': \'icon-text-height\',
\'trash\': \'icon-trash\',
\'underline\': \'icon-underline\',
\'undo\': \'icon-undo\',
\'unorderedlist\': \'icon-list-ul\',
\'video\': \'icon-facetime-video\'
}
}
今天想做个富文本编辑器器的字数提示功能，
但是我用
var text=$(\'#summernote\').summernote(\'code\');
拿到的值，里面带p标签，还有空格，换行标签什么的，很难统计出富文本的实际文本的长度，于是查了一篇文章
summernote文本编辑器使用（含概要内容提取）
这篇文章，提供了如何将原始文本，转化成干净的文本（不含各种标签，空格符什么的），下面单独将这块代码沾出来
function getNoMarkupStr(markupStr) { /* markupStr 源码</> */ //console.log(markupStr); var noMarkupStr=$("<div>").html(markupStr).text();/* 得到可视文本(不含图片),将 <>转为空字符串和<和>显示,同时去掉了换行,文本单行显示 */ //console.log("1--S" + noMarkupStr + "E--"); noMarkupStr=noMarkupStr.replace(/(\r\n|\n|\r)/gm,"");/* 去掉可视文本中的换行,(没有用,上一步已经自动处理) */ //console.log("2--S" + noMarkupStr + "E--"); noMarkupStr=noMarkupStr.replace(/^\s+/g,"");/* 替换开始位置一个或多个空格为一个空字符串 */ //console.log("3--S" + noMarkupStr + "E--"); noMarkupStr=noMarkupStr.replace(/\s+$/g,"");/* 替换结束位置一个或多个空格为一个空字符串 */ //console.log("4--S" + noMarkupStr + "E--"); noMarkupStr=noMarkupStr.replace(/\s+/g," ");/* 替换中间位置一个或多个空格为一个空格 */ //console.log("5--S" + noMarkupStr + "E--"); return noMarkupStr; }
将获取到的原始文本，传入，然后返回的就是干净的文本，于是就好统计实际文本的长度了