javascript - TinyMCE personalizar la barra de menú "archivo"

css

Question

¿Hay alguna forma de personalizar (agregar y eliminar opciones, etc.) la barra de menú en TinyMCE 4.0? No puedo encontrar ninguna documentación sobre esa parte específica del editor. La imagen de abajo muestra la parte de la que estoy hablando.

Answer 1

En la versión TinyMCE 4.x , el complemento " código " se usa para mostrar / editar el código HTML del contenido del editor.

Para control la barra de herramientas, hasta la versión theme_advanced_button<1-n> , se usó la opción theme_advanced_button<1-n> , pero por encima de la versión 4.0.6, la toolbar o la opción de la toolbar toolbar<1-N> .

Al agregar el complemento " code " a las opciones de la barra de herramientas, el menú "Herramientas" se agregará con el submenú "Código fuente" (como el botón " <> " (icono)).

tinyMCE.init({
    // ......
    // ......
    plugins: "searchreplace code",

    toolbar1: "separator forecolor backcolor code",
    toolbar2: "<<<some buttons list>>>",
    toolbar3: "<<<some buttons list>>>",
    toolbar4: "<<<some buttons list>>>",
});

Answer 2

La versión 4 es una reescritura importante y los documentos estuvieron desincronizados por un tiempo.

A través de la experimentación, descubrí que es posible habilitar / deshabilitar los menús desplegables individualmente o deshabilitar toda la barra de menú.

Habilitar solo desplegables específicos:

tinymce.init({
    selector: "textarea",
    menubar: "edit format"
});

Desactivar la barra de menú:

tinymce.init({
    selector: "textarea",
    menubar: false
});

Los documentos de configuración de la barra de menú ahora se han agregado al sitio TinyMCE.

Además, si desea personalizar completamente todo el menú, consulte los documentos de configuración del menú .

Answer 3

Terminé de personalizar tanto la barra de menú como la barra de herramientas al ajustar las propiedades del menu y la toolbar en el objeto de configuración pasado a tinymce.init() :

// ...
  menu : {
    edit: { title: ''Edit'', items: ''undo redo  | cut copy paste selectall | searchreplace'' },
    insert: { title: ''Insert'', items: ''link charmap'' },
    format: { title: ''Format'', items: ''bold italic underline strikethrough superscript subscript | removeformat'' },
    table: { title: ''Table'', items: ''inserttable tableprops deletetable | cell row column'' }
  },
  toolbar: ''undo redo | bold italic underline | link hr | alignleft aligncenter alignright | blockquote bullist numlist outdent indent | code'',
// ...

Encontré los términos para cada menú / botón buscando en el código fuente buscando .addMenuItem( y .addButton( .