Botón TinyMCE personalizado

frm85 — Sun, 07 Oct 2012 13:09:40 GMT

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

Re: Botón TinyMCE personalizado

frm85 — Wed, 10 Oct 2012 08:25:35 GMT

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.

Re: Botón TinyMCE personalizado

frm85 — Thu, 11 Oct 2012 15:31:19 GMT

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.

topic Re: Botón TinyMCE personalizado in Alfresco Archive

Botón TinyMCE personalizado

Re: Botón TinyMCE personalizado

Re: Botón TinyMCE personalizado