下面是这个Bootstrap富文本编辑器summernote的完整攻略。
下面是这个Bootstrap富文本编辑器summernote的完整攻略。
介绍
Summernote是一款基于Bootstrap的富文本编辑器,功能强大、轻量级、简单易用,支持文本、图片等多种格式的编辑,同时也有插件系统可供扩展。它支持Markdown语法,可在WYSIWYG和编码之间自由切换,也支持响应式布局和多种主题样式。
下载和安装
下载summernote
文件的最新版本,将其包括在HTML文件中
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
</head>
<body>
<textarea id="summernote"></textarea>
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>
</body>
常用功能
增加工具栏按钮
可以通过配置来增加工具栏按钮,例如,我们需要增加插入代码功能:
$('#summernote').summernote({
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['picture', 'link', 'video', 'codeview']],
['view', ['fullscreen', 'help']]
],
onInit: function () {
$('.note-codeview').addClass('language-markup');
}
});
插入图片
Summernote可以轻松地插入和上传图片。
$('#summernote').summernote({
height: 500,
tabsize: 2,
lang: 'zh-CN',
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen', 'codeview', 'help']]
],
callbacks: {
onImageUpload: function(files, editor, $editable) {
uploadImage(files[0], editor, $editable);
}
}
});
function uploadImage(file, editor, $editable) {
var url = URL.createObjectURL(file);
editor.insertImage($editable, url);
}
上述代码会打开插入图片界面,可以选择本地的图片并上传,上传成功后可在编辑器中看到图片。
总结
在今天的攻略中,我们介绍了Summernote编辑器的基本用法,包括如何下载和安装,如何增加工具栏按钮,如何插入图片等。除此之外,Summernote还提供了更多的功能,如Markdown语法支持、响应式布局、多主题样式等。如果您对这个编辑器感兴趣,可以查看其官网详细了解。
沃梦达教程
本文标题为:超漂亮的Bootstrap 富文本编辑器summernote


基础教程推荐
猜你喜欢
- SpringBoot嵌入式Web容器原理与使用介绍 2023-06-17
- 详解http请求中的Content-Type 2023-07-31
- springboot中request和response的加解密实现代码 2022-12-08
- Spring MVC数据绑定方式 2023-06-30
- 用javascript制作qq注册动态页面 2023-12-16
- JSP servlet实现文件上传下载和删除 2023-07-30
- java 解决Eclipse挂掉问题的方法 2024-01-10
- jsp hibernate的分页代码第3/3页 2024-01-11
- SpringBoot 2.5.5整合轻量级的分布式日志标记追踪神器TLog的详细过程 2023-06-17
- 关于@MapperScan包扫描的坑及解决 2023-04-16