• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Tutorial Añadir botones CITA, CODE, PHP y HTML en el editor

#1
esta es una manera de visualizar los botones que faltan en el editor, no sé si en la beta 3 esto vendrá corregido o si podría afectar en la actualización, pero dejo la manera de realizarse:

06-11-2010 15-39-54.png

ir a: js/tinymce/themes/xenforo/editor_template.js
.. editar y buscar

Insertar CODE, HTML o PHP:
addButtons : function (theme, tb)
                {
                        var tags = theme.settings.xenforo_custom_bbcode_tags,
                                controlManager = theme.editor.controlManager;

                        if (typeof tags === 'undefined' || tags.length === 0 || tags === {})
                        {
                                return;
                        }

                        tb.add(controlManager.createControl('|'));

                        tinymce.each(tags, function(tag, tagName) {
                                tb.add(controlManager.createButton('xenforo_custom_bbcode_' + tag,
                                        {title : tag[0], image : tag[1], cmd : 'xenForoWrapBbCode', ui : false, value : tagName}
                                ));
                        });
                },
sustituir por:
Insertar CODE, HTML o PHP:
addButtons : function (theme, tb)
                {
                        var tags = theme.settings.xenforo_custom_bbcode_tags,
                                controlManager = theme.editor.controlManager;

                        tb.add(controlManager.createButton('xenforo_quote',
                                { title: 'xenforo.quote', cmd: 'xenForoWrapBbCode', ui: false, value: 'QUOTE' }
                                ,
                        tb.add(controlManager.createButton('xenforo_php',
                                { title: 'xenforo.php', cmd: 'xenForoWrapBbCode', ui: false, value: 'PHP' }
                                ,
                        tb.add(controlManager.createButton('xenforo_html',
                                { title: 'xenforo.html', cmd: 'xenForoWrapBbCode', ui: false, value: 'HTML' }
                                ,
                        tb.add(controlManager.createButton('xenforo_code',
                                { title: 'xenforo.code', cmd: 'xenForoWrapBbCode', ui: false, value: 'CODE' }
                           ))
                        ))
                      ))));

                        if (typeof tags === 'undefined' || tags.length === 0 || tags === {})
                        {
                                return;
                        }
                        tinymce.each(tags, function(tag, tagName) {
                                tb.add(controlManager.createButton('xenforo_custom_bbcode_' + tag,
                                        {title : tag[0], image : tag[1], cmd : 'xenForoWrapBbCode', ui : false, value : tagName}
                                ));
                        });
                },

después en apariencia->plantillas->editor_ui.css

buscar:
PHP:
.xenForoSkin span.mce_xenforo_media {background-position:-320px -20px}
sustituir por:
PHP:
.xenForoSkin span.mce_xenforo_media {background-position:-320px -20px}
.xenForoSkin span.mce_xenforo_quote {background-position:-220px 0}
.xenForoSkin span.mce_xenforo_html {background-position:-260px 0}
.xenForoSkin span.mce_xenforo_php {background: url('@imagePath/xenforo/editor/php.gif') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_code {background: url('@imagePath/xenforo/editor/code.gif') no-repeat left center; padding-left: 20px;}
articulo original

subir archivo con imágenes adjunto, vía ftp
 

Adjuntos

#3
si, ya lo había probado yo también en el foro de pruebas, de donde saqué la captura, el editor está pendiente de revisiones por parte de los desarrolladores de xenForo, ya que hay muchos partes de errores...

poco a poco....;)
 
#4
Muy interesante. ¿Alguna forma de adaptar con los BBCodes que añade el addon BBCode Manager?

Esto frito por meter un botón con el spoiler como tenéis aquí pero no hay manera...
 

lms

Administrador
#5
El spoiler está en complemento en el foro de complementos. Búscalo.

Aún no hay manera de meter directamente las imágenes en el BBCode Manager.

Salud2
 
#6
Y para añadirle el botón, tendría que añadir esto, ¿pero cambiando que exactamente?

Insertar CODE, HTML o PHP:
tb.add(controlManager.createButton('xenforo_quote',
                                { title: 'xenforo.quote', cmd: 'xenForoWrapBbCode', ui: false, value: 'QUOTE' }
Gracias ;)
 
#9
No tengo idea porque no se me ven los botones nuevos, creo que lo he puesto todo correctamente os muestro el código del editor_template.js y después la del css, Saludos y gracias.

HTML:
                addButtons : function (theme, tb)
                {
                        var tags = theme.settings.xenforo_custom_bbcode_tags,
                                controlManager = theme.editor.controlManager;
                               
                        //tb.add(controlManager.createControl('|'));
 
                        tb.add(controlManager.createButton('xenforo_web',
                                { title: 'xenforo.web', cmd: 'xenForoWrapBbCode', ui: false, value: 'WEB' }
                                ,
                        tb.add(controlManager.createButton('xenforo_php',
                                { title: 'xenforo.php', cmd: 'xenForoWrapBbCode', ui: false, value: 'PHP' }
                                ,
                        tb.add(controlManager.createButton('xenforo_html',
                                { title: 'xenforo.html', cmd: 'xenForoWrapBbCode', ui: false, value: 'HTML' }
                                ,
                        tb.add(controlManager.createButton('xenforo_code',
                                { title: 'xenforo.code', cmd: 'xenForoWrapBbCode', ui: false, value: 'CODE' }
                                ,
                        tb.add(controlManager.createButton('xenforo_user',
                                { title: 'xenforo.user', cmd: 'xenForoWrapBbCode', ui: false, value: 'USER' }
                                ,
                        tb.add(controlManager.createButton('xenforo_spoiler',
                                { title: 'xenforo.spoiler', cmd: 'xenForoWrapBbCode', ui: false, value: 'SPOILER' }
                                ,
                        tb.add(controlManager.createButton('xenforo_quote',
                                { title: 'xenforo.quote', cmd: 'xenForoWrapBbCode', ui: false, value: 'QUOTE' }
              ))
              ))
              ))
              ))
              ))
              ))));
         
                        if (typeof tags === 'undefined' || tags.length === 0 || tags === {})
                        {
                                return;
                        }
                        tinymce.each(tags, function(tag, tagName) {
                                tb.add(controlManager.createButton('xenforo_custom_bbcode_' + tag,
                                        {title : tag[0], image : tag[1], cmd : 'xenForoWrapBbCode', ui : false, value : tagName}
                                ));
                        });
                },



HTML:
.xenForoSkin span.mce_xenforo_media {background-position:-320px -20px}
.xenForoSkin span.mce_xenforo_quote {background-position:-220px 0}
.xenForoSkin span.mce_xenforo_html {background-position:-260px 0}
.xenForoSkin span.mce_xenforo_php {background: url('@imagePath/xenforo/editor/php.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_code {background: url('@imagePath/xenforo/editor/code.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_spoiler {background: url('@imagePath/xenforo/editor/spoiler.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_web {background: url('@imagePath/xenforo/editor/web.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_user {background: url('@imagePath/xenforo/editor/user.png') no-repeat left center; padding-left: 20px;}
{
    background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -164px 0px;
}
 

lms

Administrador
#10
No tengo idea porque no se me ven los botones nuevos, creo que lo he puesto todo correctamente os muestro el código del editor_template.js y después la del css, Saludos y gracias.

HTML:
                addButtons : function (theme, tb)
                {
                        var tags = theme.settings.xenforo_custom_bbcode_tags,
                                controlManager = theme.editor.controlManager;
                             
                        //tb.add(controlManager.createControl('|'));
 
                        tb.add(controlManager.createButton('xenforo_web',
                                { title: 'xenforo.web', cmd: 'xenForoWrapBbCode', ui: false, value: 'WEB' }
                                ,
                        tb.add(controlManager.createButton('xenforo_php',
                                { title: 'xenforo.php', cmd: 'xenForoWrapBbCode', ui: false, value: 'PHP' }
                                ,
                        tb.add(controlManager.createButton('xenforo_html',
                                { title: 'xenforo.html', cmd: 'xenForoWrapBbCode', ui: false, value: 'HTML' }
                                ,
                        tb.add(controlManager.createButton('xenforo_code',
                                { title: 'xenforo.code', cmd: 'xenForoWrapBbCode', ui: false, value: 'CODE' }
                                ,
                        tb.add(controlManager.createButton('xenforo_user',
                                { title: 'xenforo.user', cmd: 'xenForoWrapBbCode', ui: false, value: 'USER' }
                                ,
                        tb.add(controlManager.createButton('xenforo_spoiler',
                                { title: 'xenforo.spoiler', cmd: 'xenForoWrapBbCode', ui: false, value: 'SPOILER' }
                                ,
                        tb.add(controlManager.createButton('xenforo_quote',
                                { title: 'xenforo.quote', cmd: 'xenForoWrapBbCode', ui: false, value: 'QUOTE' }
              ))
              ))
              ))
              ))
              ))
              ))));
       
                        if (typeof tags === 'undefined' || tags.length === 0 || tags === {})
                        {
                                return;
                        }
                        tinymce.each(tags, function(tag, tagName) {
                                tb.add(controlManager.createButton('xenforo_custom_bbcode_' + tag,
                                        {title : tag[0], image : tag[1], cmd : 'xenForoWrapBbCode', ui : false, value : tagName}
                                ));
                        });
                },



HTML:
.xenForoSkin span.mce_xenforo_media {background-position:-320px -20px}
.xenForoSkin span.mce_xenforo_quote {background-position:-220px 0}
.xenForoSkin span.mce_xenforo_html {background-position:-260px 0}
.xenForoSkin span.mce_xenforo_php {background: url('@imagePath/xenforo/editor/php.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_code {background: url('@imagePath/xenforo/editor/code.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_spoiler {background: url('@imagePath/xenforo/editor/spoiler.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_web {background: url('@imagePath/xenforo/editor/web.png') no-repeat left center; padding-left: 20px;}
.xenForoSkin span.mce_xenforo_user {background: url('@imagePath/xenforo/editor/user.png') no-repeat left center; padding-left: 20px;}
{
    background: url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -164px 0px;
}
Olvida todo esto. Deshaz los cambios
Pasa por http://www.xenfacil.com/threads/añadir-botones-al-editor-con-imágenes.263/ y sigue ese post.

Salud2
Salud2
 
Arriba