summernote之用法

一.前言

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

官方文档: 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

<script src="static/js/summernote/summernote.js"></script>
<script src="static/js/summernote/summernote-zh-CN.js"></script>

设置语言

$(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.效果图

summernote之用法_第1张图片

你可能感兴趣的:(#,javascript)