bootstrap插件summernote 编辑器 的使用

17 篇文章 0 订阅
8 篇文章 0 订阅
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/js/jquery-3.1.1.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="~/lib/summernote/dist/summernote.min.js"></script>
<script src="~/lib/summernote/lang/summernote-zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="~/lib/summernote/dist/summernote.css">
<
<div id="summernote"></div>
<button id="edit" class="btn btn-primary" onclick="edit()" type="button">Edit 1</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Save 2</button>
<script type="text/javascript">
    //加载编辑器  
    $(document).ready(function () {
        $('#summernote').summernote({
            height: 100,
            minHeight: null,
            maxHeight: null,
            focus: true,
            lang: 'zh-CN',
            // 重写图片上传  
            onImageUpload: function (files, editor, $editable) {
                sendFile(files[0], editor, $editable);
            }
        });
        var markupStr = 'hello world';
        $('#summernote').summernote('code', markupStr);// 赋值
    });
    $('.summernote').summernote({
        airPopover: [
          ['color', ['color']],
          ['font', ['bold', 'underline', 'clear']],
          ['para', ['ul', 'paragraph']],
          ['table', ['table']],
          //['insert', ['link', 'picture']]
        ]
    });
    //图片上传  
    function sendFile(file, editor, $editable) {

        var filename = false;
        try {
            filename = file['name'];
        } catch (e) {
            filename = false;
        }
        if (!filename) {
            $(".note-alarm").remove();
        }

        //以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误  
        data = new FormData();
        data.append("file", file);
        data.append("key", filename); //唯一性参数  

        $.ajax({
            data: data,
            type: "POST",
            url: "",
            cache: false,
            contentType: false,
            processData: false,
            success: function (url) {
                if (url == '200') {
                    alert("上传失败!");
                    return;
                } else {
                    alert("上传成功!");
                }
                //alert(url);  
                editor.insertImage($editable, url);
                //setTimeout(function(){$(".note-alarm").remove();},3000);  
            },
            error: function () {
                alert("上传失败!");
                return;
                //setTimeout(function(){$(".note-alarm").remove();},3000);  
            }
        });
    }

    var edit = function () {
        $('#summernote').summernote({ focus: true });
    };

    var save = function () {
        var makrup = $('#summernote').summernote('code');// 取值

        debugger
        $('#summernote').summernote('destroy');// 释放
    };
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值