admin管理员组文章数量:1331613
I've written a plugin which adds a RichCombo
box to my CKEditor. I want to be able to update the content in the ListBox
within this RichCombo
Here's my code.
var merge_fields = [];
CKEDITOR.plugins.add('mergefields',
{
requires: ['richbo'], //, 'styles' ],
init: function (editor) {
var config = editor.config,
lang = editor.lang.format;
// Gets the list of tags from the settings.
var tags = merge_fields; //new Array();
// Create style objects for all defined styles.
editor.ui.addRichCombo('tokens',
{
label: "Merge",
title: "title",
voiceLabel: "voiceLabel",
className: 'cke_format',
multiSelect: false,
panel:
{
css: [config.contentsCss, CKEDITOR.getUrl(CKEDITOR.skin.getPath('editor') + 'editor.css')],
voiceLabel: lang.panelVoiceLabel
},
init: function () {
// this.startGroup("mergefields");
for (var this_tag in tags) {
this.add(tags[this_tag], tags[this_tag], tags[this_tag]);
}
},
onClick: function (value) {
editor.focus();
editor.fire('saveSnapshot');
editor.insertText(value);
editor.fire('saveSnapshot');
}
});
}
});
Unfortunately this list is not update when merge_fields
changes. Is there a way to reinitialize the plugin, or failing that remove it and re-add it with updated content?
Note Id prefer NOT to have to remove the entire editor and replace it, as this looks very unpleasant to the user
UPDATE
As requested, here's a jsfiddle to help
/
In this JSFiddle, you'll see that the menu is dynamically created the first time it is accessed. It should should the checkboxes which are selected. However, every subsequent time it is accessed, it keeps the same values and is not updated. The only way to update it is to reinitialise the editor using the reinit button I have provided, but this causes the editor to disappear and reappear, so I don't want to have to do this.
200 points of a bounty to someone who can make the dropdown dynamically update EVERY TIME it is called.
I've written a plugin which adds a RichCombo
box to my CKEditor. I want to be able to update the content in the ListBox
within this RichCombo
Here's my code.
var merge_fields = [];
CKEDITOR.plugins.add('mergefields',
{
requires: ['richbo'], //, 'styles' ],
init: function (editor) {
var config = editor.config,
lang = editor.lang.format;
// Gets the list of tags from the settings.
var tags = merge_fields; //new Array();
// Create style objects for all defined styles.
editor.ui.addRichCombo('tokens',
{
label: "Merge",
title: "title",
voiceLabel: "voiceLabel",
className: 'cke_format',
multiSelect: false,
panel:
{
css: [config.contentsCss, CKEDITOR.getUrl(CKEDITOR.skin.getPath('editor') + 'editor.css')],
voiceLabel: lang.panelVoiceLabel
},
init: function () {
// this.startGroup("mergefields");
for (var this_tag in tags) {
this.add(tags[this_tag], tags[this_tag], tags[this_tag]);
}
},
onClick: function (value) {
editor.focus();
editor.fire('saveSnapshot');
editor.insertText(value);
editor.fire('saveSnapshot');
}
});
}
});
Unfortunately this list is not update when merge_fields
changes. Is there a way to reinitialize the plugin, or failing that remove it and re-add it with updated content?
Note Id prefer NOT to have to remove the entire editor and replace it, as this looks very unpleasant to the user
UPDATE
As requested, here's a jsfiddle to help
http://jsfiddle/q8r0dkc4/
In this JSFiddle, you'll see that the menu is dynamically created the first time it is accessed. It should should the checkboxes which are selected. However, every subsequent time it is accessed, it keeps the same values and is not updated. The only way to update it is to reinitialise the editor using the reinit button I have provided, but this causes the editor to disappear and reappear, so I don't want to have to do this.
200 points of a bounty to someone who can make the dropdown dynamically update EVERY TIME it is called.
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Oct 15, 2014 at 14:17 roryokroryok 9,64519 gold badges81 silver badges139 bronze badges 3- 1 This looks like it might help: stackoverflow./questions/7762810/… – morloch Commented Oct 27, 2014 at 9:02
- that doesn't help for me. Any of the dynamic solutions I've tried only refresh ONCE. I need mine to refresh as many times as necessary – roryok Commented Apr 17, 2015 at 19:50
- Can you add something to jsFiddle so that we have some thing to work with, rather than having to create everything from scratch? – Siva Commented Apr 17, 2015 at 22:26
2 Answers
Reset to default 4 +200How about using CKEditors custom events something like this ?
First get reference to CKEditors instance
var myinstance = CKEDITOR.instances.editor1;
Since the checkboxes are outside the scope of CKEditor add a change handler to checkboxes
$(':checkbox').change(function () {
myinstance.fire('updateList'); // here is where you will fire the custom event
});
Inside plugin definition add a event listener on the editor like this
editor.on("updateList", function () { // this is the checkbox change listener
self.buildList(); // the entire build is created again here
});
Instead of directly attaching events on checkboxes (which are outside the scope of CKEditor) inside the plugin, I am using CKEditor's custom events. Now the editor instance and checkboxes are decoupled.
Here is a DEMO
Hope this helps
Update
Option 2
Plugin's methods can directly be called like this
$(':checkbox').change(function () {
CKEDITOR.instances.editor1.ui.instances.Merge.buildList(); //this method should build the entire list again
});
Even though this seems very straightforward, I don't think it is pletely decoupled. (But still works)
Here is a demo for option 2
I think I've got a fix for you.
In your richCombo
's init
function add this line:
$('input').on('click', rebuildList);
Pretty simple JQuery fix, but every time I click those input boxes it will rebuild the list.
Fiddle for proof: https://jsfiddle/q8r0dkc4/7/
本文标签: javascriptDynamic menu for a RichCombo box in CKEditorStack Overflow
版权声明:本文标题:javascript - Dynamic menu for a RichCombo box in CKEditor - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742217688a2434870.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论