Botón TinyMCE personalizado

cancel
Showing results for 
Search instead for 
Did you mean: 
frm85
Member II

Botón TinyMCE personalizado

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.
2 Replies
Highlighted
frm85
Member II

Re: Botón TinyMCE personalizado

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.
frm85
Member II

Re: Botón TinyMCE personalizado

Buenas de nuevo,

He hecho algún progreso más y he conseguido que me cree correctamente el editor TinyMCE en el formulario de Alfresco con mis botones personalizados. Pero que cosas, que todo nunca sale bien a la primera, ni a la segunda…. ahora cuando escribo en el editor TinyMCE no "parsea"/copia lo que escribo en el textarea al que pertenece el editor.

Es decir, el funcionamiento del editor tinymce, para los que no lo sepan, es crear un iframe editor ligado a un textarea normalmente. Entonces lo que hace es ponerle un "display:none" al textarea para ocultarlo y que sólo aparezca el editor. Luego al escribir en el editor se va copiando y parseando al textarea que va a ser lo que finalmente se va a guardar en el formulario de Alfresco.

Pues bien, esto último es lo que me hace mal y no tengo ni idea de cómo solucionarlo.

A ver si a alguien más le ha ocurrido esto y me puede echar una mano.

Un saludo.