Aggiungere editor di base a elemento elemento anziché selettore

Ho un elemento personalizzato (Aurelia equivelent di un componente Web) che crea un editor di tinima. Non c'è modo di selezionare la textarea usando un selettore (perché può esistere un numero qualsiasi di questi elementi personalizzati in una pagina). Ho bisogno di un modo per inizializzare l'istanza di tinymce passandogli l'oggetto element. C'è una tale possibilità? Non sono stato in grado di trovare questa funzionalità ovunque ...Aggiungere editor di base a elemento elemento anziché selettore

Grazie in anticipo.

fonte

2016-06-08 pQuestions123

Non possiamo iniziare ad aiutarti senza esempi delle strutture DOM con cui stai lavorando. Per favore prendi il [tour], dai un'occhiata in giro e leggi [help], in particolare [* Come faccio a fare una bella domanda? *] (/ Help/how-to-ask) –

* "Non c'è modo di selezionare la textarea usando un selettore (perché su questa pagina può esistere un numero qualsiasi di questi elementi personalizzati) "* Questo è un non sequitur. Avere più istanze di un elemento nella pagina non rende impossibile la selezione tramite un selettore. –

@ T.J.Crowder non più istanze di un elemento, più istanze di questo elemento personalizzato, il che significa che l'elemento personalizzato crea un nuovo stagno ogni volta che viene aggiunto alla pagina. Non ha conoscenza di nulla al di fuori di se stesso (il che significa che non può generare un ID univoco ogni volta che viene istanziato). – pQuestions123

Mi dispiace che sono un po 'in ritardo. Ho avuto lo stesso identico problema. Ho usato una direttiva Angular e volevo inizializzare TinyMCE su $element. Si scopre che si può usare la seguente sintassi:

var element = getYourHTMLElementSomehow(); 

//... 

tinymce.init({ 
    target: element 
});

Quindi non si utilizza selector a tutti, e di utilizzare invece target.

Ho dovuto cercare il codice sorgente per questo, perché non sembra essere esplicitamente documentato da nessuna parte.

fonte

2016-07-12 20:36:21 jens1101

Questo è esattamente quello che stavo cercando. E ho cercato un pezzo di codice per giorni già. È davvero difficile credere che questa risposta risieda qui fondamentalmente inosservata in quanto è quasi un salvavita che dovrebbe essere sicuramente inclusa nei documenti. E essere contrassegnato come una vera risposta per la domanda. Grazie @ jens1101, sei il mio eroe. – Tomalla

@Tomalla Grazie, e il mio piacere :-) – jens1101

Poiché TinyMCE sembra richiedere l'utilizzo di un selettore e non consente semplicemente di passare un'istanza di elemento (e lo sviluppatore non sembra cogliere l'utilità di questo caso d'uso, in base alle risposte del suo forum), la soluzione migliore sarebbe quella di fare qualcosa di simile:

View

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

ViewModel

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); 
    }); 
}

la mia funzione UUID viene da qui: Create GUID/UUID in JavaScript?

fonte

2016-06-08 20:30:13

Nota che ho cambiato 'activate' in' attached' b/c. Ho sempre sbagliato il nome di callback. 'attached' è il callback desiderato. –

Aggiungere editor di base a elemento elemento anziché selettore

risposta

Problemi correlati