基于jQuery和bootstrap的富文本编辑插件—summernote

最新推荐文章于 2025-07-08 12:44:20 发布

原创最新推荐文章于 2025-07-08 12:44:20 发布 · 5.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#富文本编辑器 #summernote #插件 #bootstrap #jquery

插件123 专栏收录该内容

0 篇文章

订阅专栏

这篇博客介绍了如何集成和使用基于jQuery和bootstrap的富文本编辑器Summernote，包括设置HTML5 doctype，引入必需的库文件，创建编辑器容器，初始化脚本，调整编辑器的高度、语言和工具栏，以及实现图片上传功能。通过详细的步骤和示例，帮助读者掌握Summernote的配置和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、使用HTML5 doctype

2、引入jQuery、bootstrap、font-awesome文件

<!-- 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/2.1.4/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.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>

3、添加div到body，设置ID=”summernote”; 此目标元素将稍后呈现为summernote编辑工具。

<div id="summernote"></div>

4、文档准备就绪后运行以下脚本！

// 初始化插件
$(function () {
    $("#summernote").summernote();
})

5、基本设置

高度和焦点

$('#summernote').summernote({
  height: 300,                 // set editor height
  minHeight: null,             // set minimum height of editor
  maxHeight: null,             // set maximum height of editor
  focus: true                  // set focus to editable area after initializing summernote
});

语言

lang:'zh-CN',

自定义工具栏

toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]

6、图片上传

多图上传demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>summernote</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/summernote.css">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/summernote.min.js"></script>
    <script type="text/javascript" src="js/summernote-zh-CN.js"></script>
</head>
<body>

    <div class="summernote"></div>
    <div class="summernote"></div>
    <div class="summernote"></div>

    <script type="text/javascript"> 
        // 初始化插件
        $(function () {
            $(".summernote").summernote();
        })

        var $s = $(".summernote")
        $s.summernote({
            // 语言
            lang:'zh-CN',
            // 高度与焦点
            height:200,
            width:200,
            // 对话框显示在body而非summernote
            dialogsInBody: true,
            dialogsFade:true,
            // 自定义工具栏
            toolbar:[
                ['picture',['picture']]
            ],
            // 图片上传
            callbacks: {
                // summernote提供的API：onImageUpload
                onImageUpload:function (files) {
                    img = sendFile(files[0])
                }
            }
        })

        function sendFile(file) {
                var formData = new FormData()
                formData.append('file',file[0])
                $.ajax({
                    url:'upload',   //后台文件上传接口
                    type:'POST',
                    data:formData,
                    processData:false,//告诉jQuery不要加工数据
                    contentType:false,//告诉jQuery,在request head里不要设置Content-Type
                    success:function (data) {
                        $("#summernote").summernote('insertImage',data,function ($image) {
                            $image.css('width','200px')
                            $image.css('height','200px')
                        })  //调用内部api——insertImage以路径的形式插入图片到文本编辑区
                            // 传递回调函数来修改图像——没用！！
                    },
                    error:function () {
                        alert("上传失败")
                    }
                })
            }


    </script>
</body>
</html>

官方文档猛戳这里呀 U•ェ•*U