summernote與validation

版本

• 頁面框架 bootstrap4
• summernote v0.8.16
• jquery-validation v1.19.1
  

封裝

sumernotex.js

//ignore:".note-editor *",

function editSummerNote(editorName) {
    validatorSummerNote();
    summerNote(editorName);
}
function initSummerNote(editorName) {
    validatorSummerNote();
    summerNote(editorName);
    $(editorName).summernote("code","");
}

function setSummerNote(editorName,codeHtml) {
    $(editorName).summernote("code",codeHtml == "" || codeHtml == "<p><br></p>"?"":codeHtml);
}

function validatorSummerNote() {
    $.validator.addMethod("summernote", function (value, element) {
        var html = $(element).summernote('code');
        return html != "" || html == "<p><br></p>";
    }, "富文本不能爲空");
}

function summerNote(editorName) {
    //初始化富文本框https://github.com/jquery-validation/jquery-validation/issues/2212
    $(editorName).summernote({
        toolbar: [['style', ['style']], ['font', ['bold', 'underline', 'clear']], ['fontname', ['fontname']],
            ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['table', ['table']],
            ['insert', ['link', 'picture']], ['view', ['fullscreen']]],
        lang: "zh-CN",
        height: 200,
        minHeight: 200,
        //focus: true,
        callbacks: {
            onImageUpload: function(files) {
                uploadSummerPic(files[0], editorName);
            }
        }
    });
}

function uploadSummerPic(file, editorName) {
    var fd = new FormData();
    fd.append("file", file);
    $.ajax({
        type: "POST",
        url: "/attachment/uploads",
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            if (result.success == true) {
                var size = result.data.length;
                if (size > 0) {
                    $(editorName).summernote('insertImage',result.data[0]);
                } else {
                    toastr.error("上傳文件失敗");
                }
            } else {
                toastr.error("上傳文件失敗");
            }
        }
    });
}

定製表單驗證，這個的看你頁面的佈局，一般bootstrap4表單例子就夠了，其它看着微調吧

/**
 * 表單驗證
 * @param $form
 * @param options
 */
function formValidate($form, options) {
    $($form).validate($.extend(true, {
            errorElement: "div",
            errorClass: "invalid-feedback",
            validClass: "",
            errorPlacement: function (error, element) {
                // Add the `invalid-feedback` class to the error element
                if ($(element).prop("type") === "textarea") {
                    error.appendTo(element.parent());
                } else if ($(element).prop("type") === "select-multiple") {
                    error.appendTo(element.parent().parent());
                } else if ($(element).prop("type") === "select-one") {
                    error.appendTo(element.parent().parent());
                } else if ($(element).prop("type") === "checkbox") {
                    error.appendTo(element.parent().parent());
                } else if ($(element).prop("type") === "radio") {
                    error.appendTo(element.parent().parent());
                } else if ($(element).prop("type") === "file") {
                    error.appendTo(element.parent().parent().parent().parent().parent());
                } else {
                    error.appendTo(element.parent());
                }
            },
            highlight: function (element, errorClass, validClass) {
                if ($(element).prop("type") === "textarea") {
                    $(element).addClass("is-invalid").removeClass("is-valid");
                } else if ($(element).prop("type") === "select-multiple") {
                    $(element).parent().addClass("is-invalid").removeClass("is-valid");
                } else if ($(element).prop("type") === "select-one") {
                    $(element).parent().addClass("is-invalid").removeClass("is-valid");
                } else if ($(element).prop("type") === "radio") {
                    $(element).parent().parent().children().filter(".custom-radio").children("input").addClass("is-invalid").removeClass("is-valid");
                } else if ($(element).prop("type") === "file") {
                    $(element).parent().parent().parent().parent().addClass("is-invalid").removeClass("is-valid");
                } else {
                    $(element).addClass("is-invalid").removeClass("is-valid");
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                if ($(element).prop("type") === "textarea") {
                    $(element).addClass("is-valid").removeClass("is-invalid");
                } else if ($(element).prop("type") === "select-one") {
                    $(element).parent().addClass("is-valid").removeClass("is-invalid");
                } else if ($(element).attr("type") === "radio") {
                    $(element).parent().parent().children().filter(".custom-radio").children("input").addClass("is-valid").removeClass("is-invalid");
                } else if ($(element).prop("type") === "file") {
                    $(element).parent().parent().parent().parent().addClass("is-valid").removeClass("is-invalid");
                } else {
                    $(element).addClass("is-valid").removeClass("is-invalid");
                }
            }
        }, options)
    );
}

使用

-  initSummerNote("#textarea_id");
-  formValidate($('#biaodanForm'), {
        ignore:".note-editor *",
        rules: {
            textarea_name: {
                summernote: true
            }
        },
        messages: {
            description: {
                summernote: "筆記描述不能爲空"
            }
        }
    });
 -  保存時候這樣校驗
    if (!$('#biaodanForm').valid()) {
        return;
    }
    。。。。。。