Botón TinyMCE personalizado

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

frm85

Buenas,

Tengo también la duda de como crear un botón personalizado de TinyMCE para mis formularios.

He conseguido que salgan, de momento, los botones que quiero editando el fichero share-config-custom.xml, pero lo que no consigo es crearme un botón customizado (todo esto siempre desde el extesion/web-extension para no tocar el war de Alfresco).

He buscado en el foro de inglés, español, google, etc… y no pone como crearlo para Alfresco, ni que fichero hay que extender.

Si alguien pudiese dar un poco de luz a este asunto se lo agradecería.

Un saludo.

frm85

Buenas,

He conseguido insertar los nuevos botones en mi Alfresco local:

1.- He copiado la carpeta tinymce a la siguiente ruta en extension:

C:\Alfresco\tomcat\shared\classes\alfresco\web-extension\site-webscripts\org\alfresco\components\form\controls

Luego me he creado un ftl (control) llamado probando.ftl y lo he dejado en la misma ruta anterior:

probando.ftl

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.ExamplePlugin', {
        createControl: function(n, cm) {
                switch (n) {
                        case 'secciones':
                                var c = cm.createMenuButton('secciones', {
                                        title : 'Secciones',
                                        image : 'img/example.gif',
                                        icons : false
                                });

                                c.onRenderMenu.add(function(c, m) {
                                        var sub;

                                        m.add({title : 'Seccion 1', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion1"><u>seccion1</u></div>');
                                        }});

                                        m.add({title : 'Seccion 2', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion2"><u>seccion2</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 3', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion3"><u>seccion3</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 4', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion4"><u>seccion4</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 5', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion5"><u>seccion5</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 6', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion6"><u>seccion6</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 7', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion7"><u>seccion7</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 8', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion8"><u>seccion8</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 9', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion9"><u>seccion9</u></div>');
                                        }});
                              
                              m.add({title : 'Seccion 10', onclick : function() {
                                                tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="seccion10"><u>seccion10</u></div>');
                                        }});
                                });

                                // Return the new menu button instance
                                return c;
                }

                return null;
        }
});

// Register plugin with a short name
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
 
tinyMCE.init({
   plugins : '-example',
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,code,removeformat ",
    theme_advanced_buttons2 : "googleMaps,streetView,separator,secciones",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    
    setup : function(ed) {
        // Add a custom button
        ed.addButton('googleMaps', {
            title : 'Google Maps',
            image : 'javaScript/tiny_mce/googleMaps.jpg',
            onclick : function() {
                var e= ed.selection.getContent();
                ed.selection.setContent('<div id="gmaps"><u>gmaps</u></div>');
            }
        });
      ed.addButton('streetView', {
            title : 'Street View',
            image : 'javaScript/tiny_mce/streetView.jpg',
            onclick : function() {
                var e= ed.selection.getContent();
                ed.selection.setContent('<div id="streetview"><u>streetview</u></div>');
            }
        });
    }
});
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Luego he modificado el fichero share-config-custom.xml para que me salga en el formulario de creación y modificación mis nuevos botones, insertando esta línea (por ejemplo lo he puesto para que salga el textarea-tinymce en el contenido):

share-config-custom.xml

<field id="cm:content" label="Contenido" mandatory="true" set="GEN">
   <control template="/org/alfresco/components/form/controls/probando.ftl" />
</field>
‍‍‍‍

Me salen los botones y me lo hace correctamente pero me sigue fallando algo. Cuando miré atentamente el formulario, ya no me aparece el label de Contenido si no que me sale Título y es como si se comiese el textarea el input del título. Para clarificar este churro dejo imagen:

[img]http://imageshack.us/a/img716/2782/imagen1nr.jpg[/img]

Cómo podeis ver en la imagen, no se ve ni el input del título ni el label de contenido.

Un saludo y gracias.