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); 
            }
        });
    }

            };

最終結果