Utilizzare TinyMCE con Vue.js

Per usare nel miogliore dei modi TinyMCE con Vue.js, è meglio usare un plugin apposito: tinymce-vue!

Se non volete / potete usarlo con Node.js, dovrete prima installare il pacchetto e poi estrarre il Javascript; io ho fatto così, e poi ho disinstallato il pacchetto.

Per trovare il JS potete usare il cerca del vostro OS.

Una volta incluso nella vostra pagina, dovete impostare Vue.js così:

    new Vue({
        el: '#app',
        data: {
            gruppi: [],
            note: [],
            nota: ''
        },
        created: function () {
            this.getGruppi();
        },
        methods: {
           // VOSTRI METODI
        }
    });

Questo il codice HTML da mettere:

<editor api-key="API-KEY" id="testo" v-model="testo"
 toolbar="undo redo styleselect bold italic alignleft aligncenter alignright alignjustify  
bullist numlist outdent indent link print forecolor backcolor codesample hr"
plugins="wordcount hr lists code anchor textcolor">
</editor>

Come vedete vi ho già fatto messo un esempio di plugin e toolbar.

Inoltre, per poter usare questo componente senza alert, dovete recuperare una API-KEY.

La potete prelevare dal sito ufficiale in modo gratuito, previa registrazione.

Enjoy!