Crear un botón TinyMCE personalizado

[deftmunky]

Hola estoy desarrollando una aplicación online en la que necesitaba un editor de texto con formato para publicar artículos. Me decidí por TinyMCE porque es open source y esta desarrollado completamente en Javascript.

Para la aplicación he creado dos botones: AbrirBocadillo y CerrarBocadillo. Que lo que hacen es insertar <span class="comentario">" y </span> respectivamente.

Código:

tinyMCE.init({
            mode : "textareas",
            theme : "advanced",
            editor_selector : "mceAdvanced",
            theme_advanced_buttons1 : "AbrirBocadillo,CerrarBocadillo,bold,italic,underline,..........",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            plugins : 'inlinepopups',
            
            setup : function(ed) {
                // Add a custom button
                ed.addButton('AbrirBocadillo', {
                    title : 'Abrir Bocadillo',
                    image : 'javaScript/tiny_mce/abrirBocadillo.jpg',
                    onclick : function() {
                                        
                        ed.selection.setContent('<span class="comentario">"');
                    }
                });
                ed.addButton('CerrarBocadillo', {
                    title : 'Cerrar Bocadillo',
                    image : 'javaScript/tiny_mce/cerrarBocadillo.jpg',
                    onclick : function() {
                        ed.selection.setContent('"</span>');
                    }
                });
            }
        });

El problema es que TinyMCE controla los elementos de una forma que no se como funciona y pone la etiqueta de cierre donde quiere, no la coloca donde esta situado el cursor dentro del text area (aunque sí las comillas...). He intentado ver el código para ver como funcionan otros botones para que al tener texto seleccionado y pulsar el botón se añadan las etiquetas antes y después, pero los archivos .js que tengo estan comprimidos y es imposible leer nada así.

Espero que alguien me pueda ayudar...estoy !!!!!!!!!

[deftmunky]

Solucionado

Código:

<script type="text/javascript" src="javaScript/tiny_mce/tiny_mce.js"></script>
    
    
    <script type="text/javascript">
        tinyMCE.init({
	mode : "textareas",
	theme : "simple",
	editor_selector : "mceSimple"
        });
        
        tinyMCE.init({
            mode : "textareas",
            theme : "advanced",
            editor_selector : "mceAdvanced",
            theme_advanced_buttons1 : "BocadilloEsquerra,BocadilloDreta,separator,bold,italic,underline,separator,strikethrough,bullist,numlist,undo,redo,link,unlink,code,removeformat ",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            plugins : 'inlinepopups',
            
            setup : function(ed) {
                // Add a custom button
                ed.addButton('BocadilloEsquerra', {
                    title : 'Bocadillo a la Izquierda',
                    image : 'javaScript/tiny_mce/abrirBocadillo.jpg',
                    onclick : function() {
                        var e= ed.selection.getContent();
                        ed.selection.setContent('<span class="comentarioIzquierda">"'+e+'"</span>');
                    }
                });
                ed.addButton('BocadilloDreta', {
                    title : 'Bocadillo a la Derecha',
                    image : 'javaScript/tiny_mce/cerrarBocadillo.jpg',
                    onclick : function() {
                        var e= ed.selection.getContent();
                        ed.selection.setContent('<span class="comentarioDerecha">"'+e+'"</span>');
                    }
                });
            }
        });
    </script>

Código:

var e= ed.selection.getContent();
ed.selection.setContent('<span class="comentarioIzquierda">"'+e+'"</span>');

En estas dos lineas lo que se hace es cojer el texto selecionado que hay en el textarea e insertarle delante y detras las etiquetas.

[deftmunky]

Solucionado