[JavaScript知识库]富文本编辑器summernote的使用

????????summernote是一款轻巧、友好、易于集成、使用方便的富文本编辑器，,基于jQuery?和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。

官网

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

?github地址

GitHub - summernote/summernote: Super simple WYSIWYG editorSuper simple WYSIWYG editor. Contribute to summernote/summernote development by creating an account on GitHub.https://github.com/summernote/summernote

使用

? ? ? ?1.引入js、css

  <link th:href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
  <script th:src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>

? ? ?2.初始化富文本框

<div class="summernote"></div>

? ?js代码

    var preview = function(params){
        layer.open({
            title:"预览",
            content: $(".note-editable").html(),
            area: ['900px', '500px'],
        });
    }
    var previewCallback = function(params){
        //console.info(params);
    }
    var previewButton = function (context) {
        var ui = $.summernote.ui;
        // create button
        var button = ui.button({
            contents: '<i class="fa fa-search"/>',  //按钮样式
            tooltip: '预览',
            click: function (params) {
                preview(params);// 这里是我自己的点出时触发的事件
            },
            callback:function(params){
                previewCallback(params);// 这里的回调函数会在加载页面的时候直接执行
            }
        });
        return button.render();//按钮渲染
    }
    $('.summernote').summernote({
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Georgia2', 'Merriweather'],
        fontNamesIgnoreCheck:['Georgia'],
        height : 400,
        lang : 'zh-CN',
        callbacks: {
            onImageUpload: function (files) {
                sendFile(files[0], this);
            }
        },
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'subscript', 'superscript']],
            ['fontsize',['fontsize']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert', ['table', 'link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help', 'preview']],
        ],
        buttons: {
            preview: previewButton//自已定义的按钮函数
        },
    });

    $('.note-editable').css('font-family','Georgia2');

上传文件js代码

//上传文件
function sendFile(file, obj) {
    var data = new FormData();
    var ctx = [[@{/}]] + "summernote/content";
    data.append("file", file);
    $.ajax({
        type: "POST",
        url: ctx + "/file/upload",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function(result) {
            if (result.code == web_status.SUCCESS) {
                $(obj).summernote('editor.insertImage', result.fileName, result.fileName);
            } else {
                $.modal.alertError(result.msg);
            }
        },
        error: function(error) {
            $.modal.alertWarning("图片上传失败。");
        }
    });
}

3.获取富文本编辑器里的值

var markupHTML = $('.summernote').summernote('code');

效果图

?

?

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖