Supprimer le menu et les barres d'état dans TinyMCE 4


113

J'essaie de supprimer le menu et les barres d'état de TinyMCE 4 car je souhaite configurer un éditeur très basique. Est-ce possible?

La documentation de TinyMCE 3 ne semble pas pertinente et je ne trouve rien pour la version 4.


bien css vous pouvez le faire facilement!
Shivanshu

12
@ShivanshuSrivastava: vous plaisantez, non? :)
Sk8erPeter

Réponses:


253

J'ai regardé la source et c'était assez évident:

tinyMCE.init({
    menubar:false,
    statusbar: false,
        //etc
})

Cela supprime les deux.

Vous pouvez également personnaliser quelles parties de la barre de menus par défaut sont visibles en spécifiant une chaîne de menus activés - par exemple menubar: 'file edit'

Vous pouvez définir vos propres menus comme ceci:

menu : {    
    test: {title: 'Test Menu', items: 'newdocument'} 
},
menubar: 'test'

4
Petite faute de frappe: menuBar: 'file edit'devrait êtremenubar: 'file edit'
Cory Mawhorter

excellent! une idée comment personnaliser une zone de texte spécifique plutôt que tout?
abbood

"une idée comment personnaliser une zone de texte spécifique plutôt que tout?" tinymce.init({ mode: "exact", elements: "IdOftextAreaEtc", où IdOftextAreaEtc est l'ID du contrôle à utiliser pour tinyMCE
David Bridge

1
@DavidBridge, cette syntaxe est pour la version 3.x. À partir de 4.x, vous pouvez utiliser la tinymce.init({ selector: "textarea#IdOfTextarea"})(un peu comme la syntaxe css).
bvgheluwe

28

Si vous souhaitez supprimer toute la barre de menus du haut

tinymce.init({
    menubar: false,

});

Mais si vous voulez une barre de menus personnalisée avec un sous-menu

tinymce.init({
    menu: {
        file: {title: 'File', items: 'newdocument'},
        edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
        insert: {title: 'Insert', items: 'link media | template hr'},
        view: {title: 'View', items: 'visualaid'},
        format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
        tools: {title: 'Tools', items: 'spellchecker code'}
    }
});

voir TinyMCE pour plus d'aide.


4

Donc, il est clairement indiqué dans leurs documents que de rendre les valeurs fausses.

    tinymce.init({
    menubar: false,
    branding: false,
    statusbar: false,
   })

Dans la dernière mise à jour de la v5, vous pouvez afficher la barre de menus en tant que telle

    tinymce.init({
     menu: {
      edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall searchreplace' },
      insert: { title: 'Insert', items: 'image link charmap pagebreak' },
      format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
      table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
    },
    menubar: 'edit insert format table',
});

voir https://www.tiny.cloud/docs/ pour plus de détails

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.