Summernote 自定义按钮教程：添加自定义功能

要在Summernote中自定义按钮，你需要定义一个新的插件。\n\n首先，在你的HTML文件中引入Summernote和你自定义按钮的JavaScript文件：\nhtml\n<script src="summernote.js"></script>\n<script src="custom-button.js"></script>\n\n\n然后，在custom-button.js文件中定义你的自定义按钮：\njavascript\n(function ($) {\n $.extend($.summernote.plugins, {\n 'customButton': function (context) {\n var ui = $.summernote.ui;\n\n // 创建按钮\n var button = ui.button({\n contents: '<i class="fa fa-star"/>',\n tooltip: 'Custom Button',\n click: function () {\n // 按钮点击事件\n // 在这里可以执行你想要的操作\n }\n });\n\n // 添加按钮到工具栏\n context.memo('button.customButton', function () {\n return button.render();\n });\n }\n });\n})(jQuery);\n\n\n接下来，在初始化Summernote时，使用你的自定义按钮插件：\njavascript\n$(document).ready(function () {\n $('#summernote').summernote({\n toolbar: [\n ['style', ['bold', 'italic', 'underline', 'clear']],\n ['custom', ['customButton']],\n ],\n plugins: {\n customButton: true\n }\n });\n});\n\n\n这样，你就可以在Summernote的工具栏中看到你的自定义按钮了。当点击按钮时，会执行你在custom-button.js文件中定义的点击事件。你可以在这里编写你希望的操作逻辑。