我在 bootstrap 上使用带有 Summernote 的自定义按钮,并进行以下操作:
- 点击自定义按钮(完成)
- 使用 ajax 内容打开模式(完成)
- 用户选择了一个项目(完成)
- 模态调用回调按钮参数并关闭(完成)
- 函数回调在文本区域中插入链接(完成)
那么,出了什么问题?
我想在回调函数中获取textarea id,以便动态(请参阅最后一个函数)。
问题:我可以从上下文中获取文本区域 ID 吗?用另一种方式吗? (我在 console.log(context) 中找不到它;)
问题2:如何获取光标位置?我的链接已添加到第一个位置。
var summernote = {
run: function(id, type) {
if(type && type === 'full') {
this.full(id);
} else {
this.simple(id);
}
},
simple: function(id) {
// todo
},
full: function(id) {
var summernote_params = { height:300,
lang: 'fr-FR',
toolbar: [
['misc', ['undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['superscript', 'subscript']],
['para', ['ul', 'ol']],
['mybuttons', ['docimage', 'docdocument']],
],
buttons: {
docimage: summernote.docImage,
docdocument: summernote.docDocument,
},
};
$('#'+id).summernote(summernote_params);
},
docImage: function(context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="fa fa-file-image-o"></i>',
tooltip: 'Insert image',
click: function () {
documents.run({filter:'image', callback:[summernote.docImageCallback, context]});
}
});
return button.render();
},
docImageCallback: function(context, doc) {
context.invoke('editor.insertImage', doc.url);
},
docDocument: function(context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="fa fa-file-o"></i>',
tooltip: 'Insert file',
click: function () {
documents.run({filter:'document', callback:[summernote.docDocumentCallback, context]});
}
});
return button.render();
},
docDocumentCallback: function(context, doc) {
// here i want to get id dynamically
$('#description').summernote('createLink', {
text: doc.name,
url: doc.url,
newWindow: true
});
},
}
还有电话
<textarea id="description"></textarea>
<script>
summernote.run('description', 'full');
</script>
最佳答案
所以我找到了每个问题的解决方案。
init 中的参数是上下文中的 sendend。要在上下文中获取 id,我只需将其添加到 init 中:
var summernote = {
...
full: function(id) {
var summernote_params = { id: id, // <-- set id in context, (cutsom data)
height: 300,
lang: 'fr-FR',
toolbar: [
['misc', ['undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['superscript', 'subscript']],
['para', ['ul', 'ol']],
['mybuttons', ['docimage', 'docdocument']],
],
buttons: {
docimage: summernote.docImage,
docdocument: summernote.docDocument,
},
};
$('#'+id).summernote(summernote_params);
},
...
docDocumentCallback: function(context, doc) {
var id = context.options.id; // <-- get id from context
$('#'+id).summernote('createLink', {
text: doc.name,
url: doc.url,
newWindow: true
});
},
}
为了通过外部调用保持光标位置,只需保存位置,并在回调函数中设置它:
var summernote = {
...
docDocument: function(context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="fa fa-file-o"></i>',
tooltip: app_i18n.summernote_document,
click: function () {
context.invoke('editor.saveRange'); // <-- save position cursor
documents.run({filter:'document', callback:[summernote.docDocumentCallback, context]});
}
});
return button.render();
},
docDocumentCallback: function(context, doc) {
context.invoke('editor.restoreRange'); // <-- set position cursor to the last save
if(context.options.id) {
$('#'+context.options.id).summernote('createLink', {
text: doc.name,
url: doc.url,
newWindow: true
});
}
},
}
关于javascript - Summernote 获取我的 id 文本区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36219199/