Summernote 自定义按钮和回调

最新推荐文章于 2025-11-15 08:59:49 发布

原创最新推荐文章于 2025-11-15 08:59:49 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#技术

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

Summernote

1 篇文章

订阅专栏

本文介绍了如何在Summernote富文本编辑器中自定义图片上传按钮，以便调用自己的上传方法。通过这个方法，可以实现与现有图片上传逻辑的无缝集成。

Summernote是一个很简洁的富文本编辑器，因为本来已经封装好的自己的图片上传，又不想用sumernote的上传方法，最后就直接重新定义一个图片上传按钮，然后就可以调用自己之前的上传方法了。
下面是自己重新定义按钮和自己调用自己方法的代码

/**
 * 保存富文本模板
 */
$(document).ready(function () {
    var MyphotoButton = function (context) {
        var ui = $.summernote.ui;

        // create button
        var button = ui.button({
            contents: '<i class="fa fa-child"/>',  //按钮样式
            tooltip: '图片',
            click: function () {
                myfunction(params);//这里是我自己的点出时触发的事件
            },
            callback:function(){
        initfunction(params); //这里的回调函数会在加载页面的时候直接执行
        }
        });

        return button.render();    //按钮渲染
    }
    $(".summernote").summernote({
        lang: "zh-CN",
        height: 300,
        toolbar: [
            ['operate', ['undo','redo']],
            ['magic',['style']],
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['height','fontsize','ul', 'ol', 'paragraph']],
            ['font', ['strikethrough', 'superscript', 'subscript']],
            ['color', ['color']],
            ['insert',['myphoto','video','link','table','hr']],//自定义按钮展示
            ['layout',['codeview']],
        ],
        buttons: {
            myphoto: MyphotoButton      //自已定义的按钮函数
        },
    });
});