BootStrap富文本编辑器Summernote_bootstrap文本编辑器-CSDN博客

本文介绍Summernote富文本编辑器的使用方法，包括如何引入样式文件、渲染富文本编辑器、自定义工具栏及实现图片上传功能。

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器，基于JQuery 和 Bootstrap 构建，支持快捷键操作，提供大量可定制的选项。

官方API和插件下载

官网地址：http://summernote.org/getting-started/

下载地址：https://github.com/summernote/summernote/

效果图

上传图片

调整图片大小，对齐方式

文本输入与显示

Summernote基本使用

引入对应的样式文件

<link href="/https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> 
<link href="/https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet"> 
<script src="/https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="/https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="/https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

页面只需要给一个textarea标签，之后用JS渲染富文本编辑器，可以在textarea标签中设置默认内容。

<textarea id="summernote" class="summernote"></textarea>

通过JS渲染及设置富文本编辑器的属性。

$(function() {
    $('#summernote').summernote({
        height: 400,    //设置高度
        toolbar: [      //自定义工具栏
            ['style',['style']],
            ['font',['bold','underline','clear']],
            ['fontname',['fontname']],
            ['color',['