summernote之用法

蔚落 2022-03-20 05:10 362阅读 0赞

### 一.前言 ###

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

官方文档: [https://summernote.org/getting-started/][https_summernote.org_getting-started]

### 二.相关API ###

##### 1.初始化Summernote #####

$('#summernote').summernote();

##### 2.高度和聚焦 #####

$('#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
    });

##### 3.销毁Summernote #####

$('#summernote').summernote('destroy');

##### 4.语言支持 #####

引入js

设置语言

$(document).ready(function() { 
      $('#summernote').summernote({ 
        lang: 'zh-CN' // default: 'en-US'
      });
    });

##### 5.赋值、取值、置空 #####

赋值

$(".summernote").code(content)

取值

var content=$(".summernote").code()

置空

$(".summernote").code('')

### 三.实例 ###

##### 1.示例代码 #####

<!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.11/summernote.css" rel="stylesheet">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
    </head>
    <body>
    <div style="width: 60%;margin:20px auto" >
        <div id="summernote"></div>
    </div>
    <script>
        $(document).ready(function() { 
            $('#summernote').summernote({ 
                height : '200px',
                placeholder: 'Hello hello hello ...',
                lang : 'zh-CN',
                callbacks: { 
                    onImageUpload: function(files, editor, $editable) { 
                        sendFile(files);
                    }
                }
            });
        });
    
    
        /** * 编辑器新增的ajax上传图片函数 * @param files * @param editor * @param $editable * @returns {boolean} */
        function sendFile(files, editor, $editable) { 
            var size = files[0].size;
            if((size / 1024 / 1024) > 2) { 
                alert("图片大小不能超过2M...");
                return false;
            }
            console.log("size="+size);
            var formData = new FormData();
            formData.append("file", files[0]);
            $.ajax({ 
                data : formData,
                type : "POST",
                url : "/uploadImg",    // 图片上传出来的url，返回的是图片上传后的路径，http格式
                cache : false,
                contentType : false,
                processData : false,
                dataType : "json",
                success: function(data) { //data是返回的hash,key之类的值，key是定义的文件名
                    $('.summernote').summernote('insertImage',"/pic/"+data.stringData);
                    $('#addModal').modal('handleUpdate');
                },
                error:function(){ 
                    alert("上传失败");
                }
            });
        }
    
    </script>
    </body>
    </html>

##### 2.效果图 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]

[https_summernote.org_getting-started]: https://summernote.org/getting-started/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]: /images/20220320/daac624a07c74aac813bbd18da6e96c3.png