超好用的富文本编辑器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;
}
将获取到的原始文本，传入，然后返回的就是干净的文本，于是就好统计实际文本的长度了
超好用的富文本编辑器Summernote的使用的更多相关文章
- 富文本编辑器summerNote
载入富文本: $('.summernote').summernote({ height: 220, tabsize: 2, lang: 'zh-CN' }); 富文本获取内容: $('.summern ...
- 富文本编辑器 summernote.js
1.引用js 可在 https://summernote.org/ 官网下载 ,并查看详细的API 引入:summernote.js 和 summernote-zh-CN.js 以及样式文件:su ...
- 富文本编辑器summernote的基本使用
summernote比较突出的优点就是能保持复制过来的东西的原有样式,并且比较流畅. 官方文档地址:https://summernote.org/getting-started 我是用到cdn引入 & ...
- SummerNote 富文本编辑器 - Rails 集成
使用官方提供的CDN服务 将下面一段加入layout文件中 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css ...
- summernote富文本编辑器
下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...
- summernote富文本编辑器的使用
最近在开发一个微信公众号的后台,微信公众号编辑的文章一直没有得到很好地适应,大多数人也是在其他的编辑软件中编辑好之后直接去复制到微信公众平台中,考虑到复制后会排版出现问题,所以给大家推荐一款很不错的W ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- summernote 富文本编辑器限制输入字符长度
项目中需要一个比较简单的富文本编辑器,于是选中了summernote .虽然比较轻量,但是在开发中也遇到了几个问题,在此记录一下. 1:样式和bootstrap冲突,初始化之后显示为: .note-e ...
- summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）
1.上传图片至自己的服务器(这个官方都有例子,重点介绍附件上传)图片上传官方网址 // onChange callback $('#summernote').summernote({ callback ...
随机推荐
- 牛客 109B 好位置 (字符串水题)
大意: 给定字符串$s1,s2$, 对于$s1$中所有与$s2$相等的子序列$t$, $t$在$s1$中的下标定义为好位置. 求$s1$是否所有位置都是好位置. 显然$s1$的前缀要与$s2$相等, ...
- Scalar Queries CodeForces - 1167F (计数,树状数组)
You are given an array $a_1,a_2,…,a_n$. All $a_i$ are pairwise distinct. Let's define function $f(l, ...
- 更改：把redis替换成kafka
之前的流程是:filebeat,redis,logstash,elasticsearch 现在的流程是:filebeat,Kafka(zookeeper),logstash,elasticsearch ...
- supersocket特征
SuperSocket, 可扩展的 Socket 服务器框架 SuperSocket 是一个轻量级, 跨平台而且可扩展的 .Net/Mono Socket 服务器程序框架.你无须了解如何使用 Sock ...
- 怎样创建并使用 vue 组件 (component) ?
组件化开发 需要使用到组件, 围绕组件, Vue 提供了一系列功能方法, 这里仅记录组件的 最简单 的使用方法. 1. 通过 Vue.component(tagName, options) 注册一个 ...
- 2-Perl 环境安装
1.Perl 环境安装在我们开始学习 Perl 语言前,我们需要先安装 Perl 的执行环境.Perl 可以在以下平台下运行:Unix (Solaris, Linux, FreeBSD, AIX, H ...
- eclipse 创建Java web项目 Cannot change version of project facet Dynamic web module to xxx
问题描述: 用Eclipse创建Java web项目时选择的Artifact Id为maven-artchetype-webapp,由于这个archetype比较老,用的servlet还是2.3的. ...
- （四）创建基于maven的javaFX+springboot项目，用户界面与后台逻辑分离方式
下面来介绍创建maven的javaFX+springboot项目,基于用户界面与后天逻辑分离的方式,用户界面使用fxml文件来常见,类似于jsp,可以引入css文件修饰界面 maven依赖 <d ...
- O049、准备 LVM Volume Provider
参考https://www.cnblogs.com/CloudMan6/p/5597790.html Cinder 真正负责volume 管理的组件是 volume provider .Cinde ...
- 快速写个node命令行工具
1.package.json-bin配置 [创建bat文件,把bat路径添加到PATH中]这些固定的工作可以由npm帮我们完成.package.json中有个bin字段配置: bin: { " ...