超好用的富文本编辑器Summernote的使用
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; }
将获取到的原始文本，传入，然后返回的就是干净的文本，于是就好统计实际文本的长度了
