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.