gpt4 book ai didi

javascript - Summernote 自定义按钮传递上​​下文和数据

转载 作者:行者123 更新时间:2023-12-05 04:29:20 34 4
gpt4 key购买 nike

我在 angular 中使用 summernote 我想创建一个自定义按钮。

我想将 customButton 中的 listHit 作为参数传递,如下所示 'testBtn': this.customButton(context, listHit) 但我不确定该怎么做,因为函数看起来像这样 'testBtn': this.customButton如有任何帮助,我们将不胜感激。

我的自定义按钮看起来像这样。

  customButton(context) {    

var listHit = ['One', 'Two', 'Tree'];

const ui = ($ as any).summernote.ui;
var i;
var listHitHtml = "";
for (i = 0; i < listHit.length; i++) {
listHitHtml += "<li>" + listHit[i] + "</li>";
}


var button = ui.buttonGroup([
ui.button({
className: 'dropdown-toggle',
contents: '<i class="fa fa-comments"/><span class="caret"></span>',
tooltip: '@erp_colombia.Lang.Resource.conAvailableComments',
data: {
toggle: 'dropdown'
}
}),
ui.dropdown({
className: 'drop-default summernote-list',
contents: "<div id=\"container-comentario\"><div id=\"dialog\" title=\"Comentarios\" ><h1 class=\"header-comentario\">" + 'Comment' + "</h1><ul id=\"liste-comentarios\"><ul>" + listHitHtml + "</ul></div></div>",
callback: function ($dropdown) {
$dropdown.find('li').each(function () {
$(this).click(function () {
context.invoke("editor.insertText", $(this).html() + "\n");
});
});
}
})
]);

return button.render(); // return button as jquery object
}

这是我的pdfmaker配置

  this.config = {
placeholder: placeholder,
shortcuts: false,
disableDragAndDrop: true,
//tabsize: 2,
hint: {
mentions: this.quoteCommentsForSummerNote,
match: /\b(\w{1,})$/,
search: function (keyword, callback) {
callback($.grep(this.mentions, function (item: any) {
return item.indexOf(keyword) == 0;
}));
},
content: function (item) {
return item;
}
},
height: 200,
toolbar: [
['myotherbutton', ['testBtn']],
],
buttons: {
'testBtn': this.customButton
}
}

这是我的 Angular html

Here you can fiddle with a example 我创建了一个列表,我们假设它来 self 想将此列表传递给 customButton 的服务

  listStringFromDbService = ['one', 'two', 'three'];

https://stackblitz.com/edit/angular-summernote-demo-gdvvbn?file=src%2Fapp%2Fapp.component.ts

最佳答案

我相信我想通了。

您可以将按钮声明更改为返回按钮函数的函数。这样你就可以在构造 Evernote 绑定(bind)到 testBtn 的函数之前将数据传递给它。

更改函数声明(表达式或声明都可以,就像您指出的那样)

function customButtonGenerator(arr) {
return function (context) {
const ui = $.summernote.ui;
const button = ui.button({
contents: '<i class="note-icon-magic"></i> Hello',
tooltip: 'Custom button',
container: '.note-editor',
className: 'note-btn',
click: function () {
context.invoke('editor.insertText', 'Hello from test btn!!! ' + arr);
},
});
return button.render();
};
};

然后当您创建用户界面配置时,您可以改为生成按钮函数:

buttons: {
testBtn: customButtonGenerator(this.listStringFromDbService),
},

Here's an updated stackblitz显示一个工作示例。

关于javascript - Summernote 自定义按钮传递上​​下文和数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72342050/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com