Eliminar barras de menú y estado en TinyMCE 4


113

Estoy tratando de eliminar el menú y las barras de estado de TinyMCE 4 porque quiero configurar un editor muy básico. es posible?

La documentación de TinyMCE 3 no parece ser relevante y no puedo encontrar nada para la versión 4.


bueno css ¡puedes hacerlo fácilmente!
Shivanshu

12
@ShivanshuSrivastava: estás bromeando, ¿verdad? :)
Sk8erPeter

Respuestas:


253

Miré la fuente y fue bastante obvio:

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

Esto elimina ambos.

También puede personalizar qué partes de la barra de menú predeterminada son visibles especificando una cadena de menús habilitados, por ejemplo menubar: 'file edit'

Puede definir sus propios menús como este:

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

4
Pequeño error tipográfico: menuBar: 'file edit'debería sermenubar: 'file edit'
Cory Mawhorter

¡excelente! ¿Alguna idea de cómo personalizar un área de texto específica en lugar de todos?
abbood

"¿Alguna idea de cómo personalizar un área de texto específica en lugar de todas?" tinymce.init({ mode: "exact", elements: "IdOftextAreaEtc", donde IdOftextAreaEtc es la identificación del control que se usará para tinyMCE
David Bridge

1
@DavidBridge, esta sintaxis es para la versión 3.x. Desde 4.x, puede usar la tinymce.init({ selector: "textarea#IdOfTextarea"})(muy similar a la sintaxis CSS).
bvgheluwe

28

Si desea eliminar toda la barra de menú de la parte superior

tinymce.init({
    menubar: false,

});

Pero si quieres una barra de menú personalizada con algún submenú

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

consulte TinyMCE para obtener más ayuda.


4

Por lo tanto, se menciona claramente en sus documentos que hacer que los valores sean falsos.

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

En la última actualización de v5 , puede mostrar la barra de menú como tal

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

consulte https://www.tiny.cloud/docs/ para obtener más detalles

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.