Add Tinymce Editor zu Element-Objekt anstelle von Selektor

Ich habe ein benutzerdefiniertes Element (Aurelia Equivalent einer Web-Komponente), die einen Tinymce-Editor erstellt. Es gibt keine Möglichkeit, den Textbereich mithilfe eines Selektors auszuwählen (da eine beliebige Anzahl dieser benutzerdefinierten Elemente auf einer Seite vorhanden sein kann). Ich brauche eine Möglichkeit, die Tinymce-Instanz zu initialisieren, indem ich ihr das Element-Objekt übergebe. Gibt es eine solche Möglichkeit? Ich konnte diese Funktionalität nirgends finden ...Add Tinymce Editor zu Element-Objekt anstelle von Selektor

Vielen Dank im Voraus.

Quelle

2016-06-08 pQuestions123

Wir können Ihnen ohne Beispiele für die DOM-Strukturen, mit denen Sie arbeiten, nicht helfen. Bitte nimm die [Tour], schau dich um und lies die [Hilfe] durch, insbesondere [* Wie stelle ich eine gute Frage? *] (/ Help/how-to-ask) –

* "Es gibt keine Möglichkeit, den Textbereich mit Hilfe eines Selektors auszuwählen (weil auf einer Seite eine beliebige Anzahl dieser benutzerdefinierten Elemente vorhanden sein kann) "* Das ist kein Zufall. Wenn mehrere Instanzen eines Elements auf der Seite vorhanden sind, ist es nicht unmöglich, über einen Selektor auszuwählen. –

@ T.J.Crowder nicht mehrere Instanzen eines Elements, mehrere Instanzen dieses benutzerdefinierten Elements, was bedeutet, dass das benutzerdefinierte Element jedes Mal, wenn es der Seite hinzugefügt wird, ein neues Symbol erstellt. Es hat keine Kenntnis von irgendetwas außerhalb seiner selbst (was bedeutet, dass es nicht jedes Mal, wenn es instanziiert wird, eine eindeutige ID erzeugen kann). – pQuestions123

Sorry, dass ich ein bisschen spät bin. Ich hatte genau dasselbe Problem. Ich habe eine Angular-Direktive verwendet, und ich wollte TinyMCE unter $element initialisieren. Es stellt sich heraus Sie diese Syntax verwenden:

var element = getYourHTMLElementSomehow(); 

//... 

tinymce.init({ 
    target: element 
});

Also nicht selector Sie verwenden überhaupt, und stattdessen target verwenden.

Ich musste in den Quellcode dafür suchen, weil es nirgendwo explizit dokumentiert zu sein scheint.

Quelle

2016-07-12 20:36:21 jens1101

Genau das habe ich gesucht. Und ich habe schon seit Tagen nach einem solchen Code gesucht. Es ist wirklich schwer zu glauben, dass diese Antwort hier im Wesentlichen unbemerkt bleibt, da es fast ein Lebensretter ist, der definitiv in den Dokumenten enthalten sein sollte. UND als echte Antwort auf die Frage gekennzeichnet werden. Danke @ jens1101, du bist mein Held. – Tomalla

@Tomalla Danke, und mein Vergnügen :-) – jens1101

Da TinyMCE anscheinend erfordert, dass Sie einen Selektor verwenden und Sie nicht einfach eine Elementinstanz übergeben können (und der Entwickler scheint den Nutzen dieses Anwendungsfalles nicht zu verstehen, basierend auf seinen Forumsantworten), Ihre beste Wette wäre, so etwas zu tun:

Ansicht

<template> 
    <textarea id.one-time="uniqueId" ...other bindings go here...></textarea> 
</template>

Ansichtsmodell

export class TinyMceCustomElement { 
    constructor() { 
    this.uniqueId = generateUUID(); 
    } 

    attached() { 
    tinymce.init({ 
     selector: `#${this.uniqueId}`, 
     inline: true, 
     menubar: false, 
     toolbar: 'undo redo' 
    }); 
    } 
} 

function generateUUID() { 
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 
     var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8); 
     return v.toString(16); 
    }); 
}

Meine UUID Funktion kommt von hier: Create GUID/UUID in JavaScript?

Quelle

2016-06-08 20:30:13

Beachten Sie, dass ich 'activate' in' attached' geändert habe. B/c Ich bekomme diesen Callback-Namen immer falsch. 'attached' ist der gewünschte Rückruf. –

Add Tinymce Editor zu Element-Objekt anstelle von Selektor

Antwort

Verwandte Themen