入门
获取 Summernote
安装
基础API
i18n 支持
集成
深入研究
初始化选项
自定义工具栏、弹出窗口
块引号断开级别
自定义样式
自定义字体名称
自定义字体大小单位
自定义行高
自定义占位符
对话框
禁用拖放
禁用快捷键
禁用 TAB
代码视图的 XSS 保护
基础API
字体样式 API
段落 API
插入 API
范围和选择 API
回调
自定义按钮
自定义图标
模块系统
模块
实例
空气模式
带 Bootswatch 的主题
多个编辑器
点击编辑
在线代码编辑器视图
自定义 SVG 图标
提示
插件
自定义按钮 - summernote文档 - 笔下光年
网站首页
自定义按钮
Summernote 还支持自定义按钮。如果你想创建自己的按钮，只需定义并使用选项即可。 ### 定义按钮 您可以使用 $.summernote.ui 创建一个按钮对象。该按钮对象具有以下属性。 - contents: 按钮上要显示的内容 - tooltip: 鼠标悬停时提示文本 - click: 鼠标点击时调用的回调函数 下面的代码是关于插入文本 "hello" 的简单按钮。 ```javascript var HelloButton = function (context) { var ui = $.summernote.ui; // create button var button = ui.button({ contents: '<i class="fa fa-child"/> Hello', tooltip: 'hello', click: function () { // invoke insertText method with 'hello' on editor module. context.invoke('editor.insertText', 'hello'); } }); return button.render(); // return button as jquery object } ``` 您可以看到 `render()` 将 jquery 对象作为按钮返回。 ### 使用带选项的按钮 让我们来学习如何使用工具栏上的按钮。 首先，你可以使用名为 `buttons` 的选项定义按钮，这是一组键值。你可以在工具栏选项中定义自定义按钮。 ```javascript $('.summernote').summernote({ toolbar: [ ['mybutton', ['hello']] ], buttons: { hello: HelloButton } }); ``` You can also use custom button on popover in the same way.
上一篇：
回调
下一篇：
自定义图标
