summernote 富文本编辑器 简单实例

summernote 富文本编辑器

简介

Summernote 是一个简单，灵活，所见即所得（WYSIWYG）的编辑器，基于 jQuery 和 Bootstrap 构建。Summernote 所有主要的操作都支持快捷键，有一个功能强大的 API，它提供了大量的自定义选项的设计（宽，高，有效的项目等等）和功能。对于主要的脚本语言或框架（PHP，Ruby，Django，NodeJS），该项目有提供了集成示例。

应用实例

引入相应js css

<link href="css/plugins/summernote/summernote.css" rel="stylesheet">
<link href="css/plugins/summernote/summernote-bs3.css" rel="stylesheet">
<script src="js/plugins/summernote/summernote.min.js"></script>

创建div

<div class="summernote" id="content" class="form-control"></div>

初始化代码

$('.summernote').summernote({
    height: 1000, 
    toolbar: [  
              ['style', ['style']],
              ['style', ['bold', 'italic', 'underline', 'clear']],  
              ['fontsize', ['fontsize']],  
              ['fontname',['fontname']],
              ['color', ['color']],  
              ['para', ['ul', 'ol', 'paragraph']],  
              ['height', ['height']],  
              ['table',['table']],
              ['insert', ['picture','link']] ,
              ['help',['help']]
            ], 
    onImageUpload: function(files, editor, $editable) {
         sendFile(files,editor,$editable);
        },
    onblur: function(e) {
        //$('.summernote').html("");
        //$('#content').html($(this).code());
        validateContent();
    },
    onfocus:function(e){
        validateContent();
    },
    onChange: function(contents, $editable) {
        validateContent();
    },
    bFullscreen:false,

});
function sendFile(file, editor, $editable) {
    for(var i = 0;i < file.length;i++){
        data = new FormData();
        data.append("file", file[i]);
        url = ctx+"/x'x'x/imgUploads";
        $.ajax({
            data: data,
            type: "POST",
            url: url,
            cache: false,
            contentType: false,
            processData: false,
            success: function (msg) {
                if(1 == msg.code){
//                              editor.insertImage($editable, imagePrefix+encodeURIComponent(msg.data));
                    editor.insertImage($editable, imagePrefix+msg.data);
                }
                else{
                    bootbox.alert(msg.message);
                }
//                          $('.summernote').summernote('editor.insertImage', "product/downloadFile?filePath="+msg.data); 
            }
        });
    }

            };

最终结果