summernote的plugin问题
最近一个项目用到可编辑div,公司使用的是bootstrap作为主要框架,故选用了summernote插件
现需要实现自定义按钮功能,类似点击插入表情(我这是要点击插入一条预设规则、运算符等)
summernote给出了plugin,链接在此summernote。
也给出了实例,链接在此自定义plugin:hello
但是当我将代码原封不动搬下来的时候,得到的结果是报错:如图
那个renderer到底是什么?
我在这行前面加了一个console,这个summernote对象的具体情况如图所示
我的代码结构是这样的:
//先引入
$(document).ready(function() {
setSummernote();
});
//初始化
function setSummernote(){
$("#summernote").summernote({
lang: 'zh-CN',
height:300,
focus:true,
toolbar:[
['group', ['hello']]
]
});
//此行报错,我不知道这个renderer是什么。
var tmpl = $.summernote.renderer.getTemplate();
var editor = $.summernote.eventHandler.getEditor();
// add hello plugin
$.summernote.addPlugin({
// plugin's name
name: 'hello',
init : function(layoutInfo) { // run init method when summernote was initialized
// layoutInfo.holder() is current summernote's jquery instance.
var $note = layoutInfo.holder();
// you can use jquery custom event.
$note.on('summernote.update', function(customEvent, nativeEvent) {
var $boldButton = $(this).summernote('toolbar.get', 'bold');
$boldButton.toggleClass('active').css({
color : 'red'
});
});
$note.on('summernote.blur', function(customEvent, nativeEvent) {
var $boldButton = $(this).summernote('toolbar.get', 'bold');
$boldButton.removeClass('active').css({
color : 'inherit'
});
});
$note.summernote('insertText', 'plugin start.');
},
buttons: { // define button that be added in the toolbar
// "hello" button (key is a button's name)
hello: function () {
// create button template
return tmpl.iconButton('fa fa-header', {
// set event's name to used as callback when this button is clicked
// add data-event='hello' in button element
event : 'hello',
title: 'hello',
hide: true
});
}
},
events: { // events
// run callback when hello button is clicked
hello: function (event, editor, layoutInfo, value) {
// Get current editable node
var $editable = layoutInfo.editable();
// Call insertText with 'hello'
editor.insertText($editable, 'hello ');
// or
layoutInfo.holder().summernote("insertText", "Hello");
}
}
});
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
答案是:0.5.8这个版本不支持renderer
此贴终结