javascript - removebuttons - ckeditor toolbar options list

Menú dinámico para una caja de RichCombo en CKEditor

Question

He escrito un complemento que agrega una caja de RichCombo a mi CKEditor. Quiero poder actualizar el contenido en el ListBox dentro de este RichCombo

Aquí está mi código.

var merge_fields = [];
CKEDITOR.plugins.add(''mergefields'',
{
requires: [''richcombo''], //, ''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'');
}
});
}
});

Desafortunadamente, esta lista no se actualiza cuando cambia merge_fields . ¿Hay alguna forma de reinicializar el complemento, o si falla, elimínelo y vuelva a agregarlo con contenido actualizado?

Nota: prefiero no tener que eliminar todo el editor y reemplazarlo, ya que esto parece muy desagradable para el usuario

ACTUALIZAR

Según lo solicitado, aquí hay un jsfiddle para ayudar

http://jsfiddle.net/q8r0dkc4/

En este JSFiddle, verás que el menú se crea dinámicamente la primera vez que se accede. Deben las casillas de verificación que están seleccionadas. Sin embargo, cada vez que se accede, mantiene los mismos valores y no se actualiza. La única forma de actualizarlo es reinicializar el editor con el botón de reinicio que proporcioné, pero esto hace que el editor desaparezca y reaparezca, por lo que no quiero tener que hacer esto.

200 puntos de una recompensa a alguien que puede hacer que el menú desplegable se actualice dinámicamente CADA VEZ que se llame.

Answer 1

¿Qué hay de usar los eventos personalizados de CKEditors algo como esto?

Primero obtener referencia a la instancia de CKEditors

var myinstance = CKEDITOR.instances.editor1;

Dado que las casillas de verificación están fuera del alcance de CKEditor, agregue un controlador de cambios a las casillas de verificación

$('':checkbox'').change(function () {
myinstance.fire(''updateList''); // here is where you will fire the custom event
});

Dentro de la definición del complemento, agregue un detector de eventos en el editor como este.

editor.on("updateList", function () { // this is the checkbox change listener
self.buildList(); // the entire build is created again here
});

En lugar de adjuntar eventos directamente a las casillas de verificación (que están fuera del alcance de CKEditor) dentro del complemento, estoy usando los eventos personalizados de CKEditor. Ahora la instancia del editor y las casillas de verificación están desacopladas.

Aquí hay una DEMO

Espero que esto ayude

Actualizar

opcion 2

Los métodos de Plugin se pueden llamar directamente así.

$('':checkbox'').change(function () {
CKEDITOR.instances.editor1.ui.instances.Merge.buildList(); //this method should build the entire list again
});

Aunque esto parece muy sencillo, no creo que esté completamente desacoplado. (Pero aun funciona)

Aquí hay una demo para la opción 2

Answer 2

Creo que tengo una solución para ti.

En la función de init richCombo , agregue esta línea: $(''input'').on(''click'', rebuildList);

Solución JQuery bastante simple, pero cada vez que hago clic en esos cuadros de entrada, se reconstruirá la lista.

Fiddle for proof: https://jsfiddle.net/q8r0dkc4/7/