Die dynamische Aktualisierung ein TinyMCE 4 ListBox

Ich versuche, ändern Sie den TinyMCE 4 "link" - plugin, um Benutzern zu erlauben, wählen Sie Inhalt von ListBox-Elementen, die dynamisch aktualisiert werden, die von AJAX-Anfragen.

Ich erstelle die ListBox-Elemente im Vorfeld der editor.windowManager.open(), so sind Sie zunächst richtig dargestellt. Ich habe eine onselect-handler, führt die AJAX-Anfrage und bekommt eine Antwort im JSON-format.

Was ich tun muss, mit der JSON-Antwort ist, um es ein weiteres update ListBox-element, ersetzt die bestehende Elemente mit den neuen Ergebnissen.

Ich bin verwirrt, und die Dokumentation ist furchtbar unklar. Ich weiß nicht, ob ich Sie ersetzen sollte, die gesamte Steuerung, oder Positionen löschen und dann neue hinzufügen. Ich weiß nicht, ob ich müssen zu instanziieren Sie ein neues ListBox-Steuerelement, oder machen Sie Sie zu HTML, etc.

Grundsätzlich habe ich Zugriff auf die original-gerendert ListBox (name: "Modul"} mit

win.find('#module');

Habe ich die neuen Werte aus der AJAX-Anfrage:

var data = tinymce.util.JSON.parse(text).data;

Und ich habe versucht, erstellen einer neuen Control-Konfiguration-Objekt, wie

newCtrlconfig = {
    type: 'listbox',
    label: 'Class',
    values: data
};

aber ich würde nicht wissen, wie Sie es machen, viel weniger Sie ersetzen die bereits vorhandenen.

Versuchte ich

var newList = tinymce.ui.Factory.create(newCtrlconfig);

dann

newList.renderHtml()

aber selbst dann, das gerenderte HTML nicht jedes markup enthalten das für die Elemente. Und die Prüfung dieser Objekte ist nur frustrierend: es gibt "Einstellungen", "Werte", "_values", "Elemente", die alle gerne auf meine Werte, aber es ist noch nicht einmal klar, welche von Ihnen funktionieren wird.

Da es eine ListBox und nicht ein einfaches SELECT-Menü, ich kann auch nicht leicht zu verwenden, um das DOM zu manipulieren-die Werte.

Hat jemand erobert den TinyMCE ListBox in 4.x?

InformationsquelleAutor spud | 2013-09-14

tinymce tinymce-4

Fand ich diese auf der TinyMCE-forum und ich habe bestätigt, dass es funktioniert:

tinymce.PluginManager.add('myexample', function(editor, url) {
   var self = this, button;

   function getValues() {
      return editor.settings.myKeyValueList;
   }
   //Add a button that opens a window
   editor.addButton('myexample', {
      type: 'listbox',
      text: 'My Example',
      values: getValues(),
      onselect: function() {
         //insert key
         editor.insertContent(this.value());

         //reset selected value
         this.value(null);
      },
      onPostRender: function() {
         //this is a hack to get button refrence.
         //there may be a better way to do this
         button = this;
      },
   });

   self.refresh = function() {
      //remove existing menu if it is already rendered
      if(button.menu){
         button.menu.remove();
         button.menu = null;
      }

      button.settings.values = button.settings.menu = getValues();
   };
});


Call following code block from ajax success method
//Set new values to myKeyValueList 
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'newtext', value: 'newvalue'}];
//Call plugin method to reload the dropdown
tinyMCE.activeEditor.plugins.myexample.refresh();

Der Schlüssel hier ist, müssen Sie Folgendes tun:

Holen Sie sich die 'Taste' Referenz, indem es aus 'diesem' in den onPostRender Methode
Aktualisieren Sie die Taste.Einstellungen.Werte und Knopf.Einstellungen.Menü mit den Werten, die Sie wollen
Zur Aktualisierung der bestehenden Liste, Anruf-Taste.Menü.remove() und-Taste.menu = null

Dank Moeri Im-suchen nach-reset-Möglichkeit! //zurücksetzen ausgewählte Wert dieser.Wert(null);
hey, ich bin versucht, eine Liste Hinzugefügt und Tat, wie Sie sagte, aber nach myexample.refresh() sehe ich 'Mein Vorbild' - Taste, aber es hat keine option ie Liste ist leer. Auch ich kann nicht sehen, diese in menubar und musste toolbar : 'myexample' zu sehen, die Schaltfläche.
Für Tinymce 4.3+ Sie haben zu verwenden: button.settings.values = button.state.data.menu = items;
Bitte erst lernen wie Sie benutzerdefinierte Plug-in nur dann können Sie verstehen, wie Sie Integration in Ihrem code

InformationsquelleAutor Moeri

Habe ich versucht die Lösung von TinyMCE forum, aber ich fand es buggy. Zum Beispiel, wenn ich versuchte, zu ändern, die erste ListBox-mehrere Male, nur das erste mal in Kraft trat. Auch die erste änderung, die box direkt nach dem Dialog aufgetaucht ist, gar keine Wirkung.

Aber auf die Lösung:

Nicht nennen button.menu.remove();

Auch der "hack" für die erste Schaltfläche Verweis ist völlig unnötig. Ihren job getan werden kann, einfach mit:

var button = win.find("#button")[0];

Mit diesen änderungen, meine Listboxen arbeiten, gerade Recht.

Ganze Dialog-Funktion:

function ShowDialog() {
  var val;
  win = editor.windowManager.open({
          title: 'title',
          body: {type: 'form', 
          items: [
          {type: 'listbox', 
          name: 'categorybox', 
          text: 'pick one', 
          value: 0,
          label: 'Section: ', 
          values: categories,
          onselect: setValuebox(this.value())        
          },
          {type: 'listbox', 
          name: 'valuebox', 
          text:'pick one', 
          value: '',
          label: 'Page: ', 
          values: pagelist[0],
            onselect: function(e) {
              val = this.value();
            }
          }
          ]
        },
                onsubmit: function(e) {
                    //do whatever
                }
            });

      var valbox = win.find("#valuebox")[0]; 

      function setValuebox(i){
      //feel free to call ajax
      valbox.value(null);              
      valbox.menu = null;
      valbox.settings.menu = pagelist[i]; 
      //you can also set a value from pagelist[i]["values"][0]
      }
  }

categories und pagelist sind JSONs erzeugt aus DB, bevor TinyMCE laden. pagelist[category] = Daten für Listenfeld für ausgewählte Kategorie. category=0 bedeutet, dass alle.

Hoffe, dass ich jemand geholfen, weil ich habe gekämpft, dieses für Stunden.

InformationsquelleAutor ViteXikora

5

Sieht es aus wie der tinyMCE-version, die enthalten ist in wordpress 4.3 ein paar Dinge geändert, und fügte hinzu, ein state-Objekt speichert das erste Menü, so wechselt das Menü ist nicht mehr genug.

Wird man wohl haben, aktualisieren Sie die Status-Objekt als gut. Hier ist ein Beispiel für die Aktualisierung das Menü mit den Daten aus einem ajax-request:
```
editor.addButton('shortcodes', {
        icon: 'icon_shortcodes',
        tooltip: 'Your tooltip',
        type: 'menubutton',
        onPostRender: function() {
            var ctrl = this;
            $.getJSON( ajaxurl , function( menu) {
                //menu is the array containing your menu items
                ctrl.state.data.menu = ctrl.settings.menu = menu;
            });
        }
    });
```
- Die version von tinyMCE dies wirkt sich auf 4,2 Dank für den Hinweis auf diese änderung.
- Für ein Listenfeld-Schaltfläche diese endete als ctrl.state.data.menu = ctrl.settings.values = menu; für mich anstelle von Einstellungen.Menü. Dies ist für WP 4.5.1 und TinyMCE 4.3.10
- dies ist immer noch aktuell für WP 4.7.2
InformationsquelleAutor Harris Konstantourakis

Soweit ich sagen kann, diese anderen Ansätze sind gebrochen in TinyMCE 4.9.
Nachdem er den Großteil des Tages basteln zu beheben meine eigene Nutzung dieser Ansätze, das ist die Funktionalität die ich gefunden habe:

function updateListbox(win, data) { //win is a tinymce.ui.Window
  listbox = win.find('#listbox'); //Substitute your listbox 'name'
  formItem = listbox.parent();

  listbox.remove();
  formItem.append({
    label: 'Dynamic Listbox',
    type: 'listbox',
    name: 'listbox',
    values: data
  });
}

InformationsquelleAutor Nathan Hazzard

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.