Deprecated: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated in /var/www/mybb-es.com/html/inc/class_language.php on line 201
[Tutorial] Agregar botones al editor de texto
Páginas (2): 1 2   
abdonroda   12 Aug, 2010, 6:53 am
#1
Hago este tutorial para los que quieran aprender a agregar botones al editor de texto en MyBB.

Si el código es por ejemplo: [descarga]lo que yo quiera poner[/descarga].
Para ponerle un botón a ese MyCode lo que tendrías que hacer sería esto:


1. Agregar en el URLdelforo/jscripts/editor.js lo siguiente:

Cita:{type: 'button', name: 'descarga', sprite: 'descarga', insert: 'descarga', title: 'Envuelve la descarga en una caja'},


2. Agregar en el URLdelforo/jscripts/editor_themes/Office_2007/stylesheet.css lo siguiente:

Cita:.messageEditor .toolbar_button .toolbar_sprite_descarga {
background: url(images/descarga.gif) no-repeat;
}


3. Agregar en URLdelforo/jscripts/editor_themes/Office_2007/images/ una imagen llamada "descarga.gif".


Créditos
abdonroda de www.comuvir.com
Gunner10   17 Aug, 2010, 6:52 am
#2
Yo podría agregar que en el editor.js viene esto:

Código PHP:
<?php 
this
.createToolbarContainer('top');

this.createToolbar('closetags', {
container: 'top',
alignment: 'right',
items: [
{
type: 'button', name: 'close_tags', insert: 'zzzz', sprite: 'close_tags', width: 80, style: {visibility: 'hidden'}}
]
});
this.createToolbar('topformatting', {
container: 'top',
items: [
{
type: 'dropdown', name: 'font', insert: 'font', title: this.options.lang.font, options: this.fonts},
{
type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},
{
type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}
]
});

Si se copia y pegan secciones luego de esas líneas de código, algo asi como:

Código PHP:
<?php 
this
.createToolbarContainer('tercera');

this.createToolbar('mycodes', {
container: 'tercera',
alignment: 'right',
items: [
{
type: 'button', name: 'download', sprite: 'download', insert: 'download', title: 'Encierra el texto en un cuadro de descarga'},
{
type: 'button', name: 'attention', sprite: 'attention', insert: 'attention', title: 'Encierra el texto en un cuadro de atencion'},
{
type: 'button', name: 'approbed', sprite: 'approbed', insert: 'approbed', title: 'Encierra el texto en un cuadro de aprobado'},
{
type: 'button', name: 'doc', sprite: 'doc', insert: 'doc', title: 'Encierra el texto en un cuadro de documentacion'},
{
type: 'button', name: 'alert', sprite: 'alert', insert: 'alert', title: 'Encierra el texto en un cuadro de alerta'},
]
});

Puedes tener tu propia fila de botones en el editor, para crear botones a tus mycodes personalizados, tal como lo hice yo. Por ahí anda dando vueltas un tutorial para agregar esto, pero luego de leerlo me di cuenta que no es compatible con el editor de la v.1.6, éste si lo es.

Aeroz   19 Nov, 2010, 12:58 am
#3
Tengo un problema para que muestre la la imagen .gif que subi.
Que estaré haciendo mal?
DarkEternity   7 Mar, 2011, 11:09 am
#4
verifica si en el codigo colocaste bien la extension de la imagen y si esta correctamente en el directorio donde se encuentra
Deadnorth   20 Apr, 2011, 11:50 am
#5
Hey si yo quiero agregar el bbcode youtube yo ya agregue el plugin pero no se en que parte iria exactamente el codigo y para que se vea la imagen.

alguien me ayuda Y gracias :thumbsup:
pes style   26 Feb, 2012, 11:37 am
#6
Sirve de mucho ojala que pueda poner mi boton de spoiler jejeje.
Gracias por la Tuto, Saludos.
lestat_shifo   20 Jan, 2014, 12:11 pm
#7
exelente recien acabo de agregar 4 botones a mi editor de texto, muchas gracias dejo una imajen de mi editor con los 4 nuevos botones

[Imagen: USYubbL.jpg]
roberto_25   20 Nov, 2014, 6:58 pm
#8
Alguien me puede ayudar a mi...?  quiero que aparezca el botón de " hide " de hecho ya logre instalar el pluguin de hide de hecho funciona pero tengo que hacer la instrucción manualmente porque no me aparece el botón estaré muy agradecido quien me ayude.
jscripts/editor.js

Aquí mi plantilla
Código:
var messageEditor = Class.create();

messageEditor.prototype = {
    openTags: new Array(),
    toolbarHeight: 0,
    currentTheme: '',
    themePath: '',
    openDropDownMenu: null,

    setTheme: function(theme)
    {
        if(this.currentTheme != '' || $('editorTheme')) {
            $('editorTheme').remove();
        }

        var stylesheet = document.createElement('link');
        stylesheet.setAttribute('rel', 'stylesheet');
        stylesheet.setAttribute('type', 'text/css');
        stylesheet.setAttribute('href', this.baseURL + 'editor_themes/'+theme+'/stylesheet.css');
        document.getElementsByTagName('head')[0].appendChild(stylesheet);
        this.currentTheme = theme;
        this.themePath = this.baseURL + 'editor_themes/'+theme;
    },

    initialize: function(textarea, options)
    {
        // Sorry Konqueror, but due to a browser bug out of control with textarea values
        // you do not get to use the fancy editor.

        if(MyBB.browser == "konqueror" || (typeof(mybb_editor_disabled) != "undefined" && mybb_editor_disabled == true))
        {
            return false;
        }

        // Establish the base path to this javascript file
        $$('script').each(function(script) {
            if(script.src && script.src.indexOf('editor.js') != -1) {
                this.baseURL = script.src.replace(/editor\.js(.*?)$/, '');
            }
        }, this);

        this.options = options;

        if(this.options)
        {
            if(!this.options.lang)
            {
                return false;
            }

            if(!this.options.rtl)
            {
                this.options.rtl = 0;
            }
        }

        if(this.options && this.options.theme)
        {
            this.setTheme(this.options.theme);
        }
        else
        {
            this.setTheme('default');
        }

        // Defines an array of fonts to be shown in the font drop down.
        this.fonts = new Object();
        this.fonts["Arial"] = "Arial";
        this.fonts["Courier"] = "Courier";
        this.fonts["Impact"] = "Impact";
        this.fonts["Tahoma"] = "Tahoma";
        this.fonts["Times New Roman"] = "Times New Roman";
        this.fonts["Trebuchet MS"] = "Trebuchet MS";
        this.fonts["Verdana"] = "Verdana";

        // An array of font sizes to be shown.
        this.sizes = new Object();
        this.sizes["xx-small"] = this.options.lang.size_xx_small;
        this.sizes["x-small"] = this.options.lang.size_x_small;
        this.sizes["small"] = this.options.lang.size_small;
        this.sizes["medium"] = this.options.lang.size_medium;
        this.sizes["large"] = this.options.lang.size_large;
        this.sizes["x-large"] = this.options.lang.size_x_large;
        this.sizes["xx-large"] = this.options.lang.size_xx_large;

        // An array of colours to be shown.
        this.colors = new Object();
        this.colors[1] = "#800000";
        this.colors[2] = "#8B4513";
        this.colors[3] = "#006400";
        this.colors[4] = "#2F4F4F";
        this.colors[5] = "#000080";
        this.colors[6] = "#4B0082";
        this.colors[7] = "#800080";
        this.colors[8] = "#000000";
        this.colors[9] = "#FF0000";
        this.colors[10] = "#DAA520";
        this.colors[11] = "#6B8E23";
        this.colors[12] = "#708090";
        this.colors[13] = "#0000CD";
        this.colors[14] = "#483D8B";
        this.colors[15] = "#C71585";
        this.colors[16] = "#696969";
        this.colors[17] = "#FF4500";
        this.colors[18] = "#FFA500";
        this.colors[19] = "#808000";
        this.colors[20] = "#4682B4";
        this.colors[21] = "#1E90FF";
        this.colors[22] = "#9400D3";
        this.colors[23] = "#FF1493";
        this.colors[24] = "#A9A9A9";
        this.colors[25] = "#FF6347";
        this.colors[26] = "#FFD700";
        this.colors[27] = "#32CD32";
        this.colors[28] = "#87CEEB";
        this.colors[29] = "#00BFFF";
        this.colors[30] = "#9370DB";
        this.colors[31] = "#FF69B4";
        this.colors[32] = "#DCDCDC";
        this.colors[33] = "#FFDAB9";
        this.colors[34] = "#FFFFE0";
        this.colors[35] = "#98FB98";
        this.colors[36] = "#E0FFFF";
        this.colors[37] = "#87CEFA";
        this.colors[38] = "#E6E6FA";
        this.colors[39] = "#DDA0DD";
        this.colors[40] = "#FFFFFF";

        // An array of video services to be shown (youtube, vimeo, etc)
        this.videos = new Object();
        this.videos["dailymotion"] = this.options.lang.video_dailymotion;
        this.videos["metacafe"] = this.options.lang.video_metacafe;
        this.videos["myspacetv"] = this.options.lang.video_myspacetv;
        this.videos["vimeo"] = this.options.lang.video_vimeo;
        this.videos["yahoo"] = this.options.lang.video_yahoo;
        this.videos["youtube"] = this.options.lang.video_youtube;

        // Here we get the ID of the textarea we're replacing and store it.
        this.textarea = textarea;

        // Only swap it over once the page has loaded (add event)
        if(MyBB.page_loaded == 1)
        {
            this.showEditor();
        }
        else
        {
            Event.observe(document, "dom:loaded", this.showEditor.bindAsEventListener(this));
        }
    },

    showEditor: function()
    {
        // Assign the old textarea to a variable for later use.
        oldTextarea = $(this.textarea);

        // Now this.textarea becomes the new textarea ID
        this.textarea += "_new";

        // Begin the creation of our new editor.

        this.editor = document.createElement("div");
        this.editor.style.position = "relative";
        this.editor.style.display = "none";
        this.editor.className = "messageEditor";

        // Append the new editor
        oldTextarea.parentNode.insertBefore(this.editor, oldTextarea);

        // Determine the overall height and width - messy, but works
        w = oldTextarea.getDimensions().width+"px";
        if(!w || parseInt(w) < 400)
        {
            w = "400px";
        }
        if(this.options && this.options.height)
        {
            h = this.options.height;
        }
        else if(oldTextarea.offsetHeight)
        {
            h = oldTextarea.offsetHeight+"px";
        }
        else if(oldTextarea.clientHeight)
        {
            h = oldTextarea.clientHeight+"px";
        }
        else if(oldTextarea.style.height)
        {
            h = oldTextarea.style.height;
        }
        else
        {
            h = "400px";
        }
        this.editor.style.width = w;
        this.editor.style.height = h;

        this.createToolbarContainer('top');

        this.createToolbar('closetags', {
            container: 'top',
            alignment: 'right',
            items: [
                {type: 'button', name: 'close_tags', insert: 'zzzz', sprite: 'close_tags', width: 80, style: {visibility: 'hidden'}}
            ]
        });
        this.createToolbar('topformatting', {
            container: 'top',
            items: [
                {type: 'dropdown', name: 'font', insert: 'font', title: this.options.lang.font, options: this.fonts},
                {type: 'dropdown', name: 'size', insert: 'size', title: this.options.lang.size, options: this.sizes},
                {type: 'button', name: 'color', insert: 'color', dropdown: true, color_select: true, image: 'color.gif', draw_option: this.drawColorOption, options: this.colors}
            ]
        });

        this.createToolbarContainer('bottom');

        this.createToolbar('insertables', {
            container: 'bottom',
            alignment: 'right',
            items: [
                {type: 'button', name: 'list_num', sprite: 'list_num', insert: 'list', extra: 1, title: this.options.lang.title_numlist},
                {type: 'button', name: 'list_bullet', sprite: 'list_bullet', insert: 'list', title: this.options.lang.title_bulletlist},
                {type: 'separator'},
                {type: 'button', name: 'img', sprite: 'image', insert: 'image', extra: 1, title: this.options.lang.title_image},
                {type: 'button', name: 'url', sprite: 'link', insert: 'url', title: this.options.lang.title_hyperlink},
                {type: 'button', name: 'email', sprite: 'email', insert: 'email', extra: 1, title: this.options.lang.title_email},
                {type: 'separator'},
                {type: 'button', name: 'quote', sprite: 'quote', insert: 'quote', title: this.options.lang.title_quote},
                {type: 'button', name: 'code', sprite: 'code', insert: 'code', title: this.options.lang.title_code},
                {type: 'button', name: 'php', sprite: 'php', insert: 'php', title: this.options.lang.title_php},
                {type: 'button', name: 'video', insert: 'video', image: 'television.gif', dropdown: true, title: this.options.lang.title_video, options: this.videos}
            ]
        });
        this.createToolbar('formatting', {
            container: 'bottom',
            items: [
                {type: 'button', name: 'b', sprite: 'bold', insert: 'b', title: this.options.lang.title_bold},
                {type: 'button', name: 'i', sprite: 'italic', insert: 'i', title: this.options.lang.title_italic},
                {type: 'button', name: 'u', sprite: 'underline', insert: 'u', title: this.options.lang.title_underline},
                {type: 'separator'},
                {type: 'button', name: 'align_left', sprite: 'align_left', insert: 'align', extra: 'left', title: this.options.lang.title_left},
                {type: 'button', name: 'align_center', sprite: 'align_center', insert: 'align', extra: 'center', title: this.options.lang.title_center},
                {type: 'button', name: 'align_right', sprite: 'align_right', insert: 'align', extra: 'right', title: this.options.lang.title_right},
                {type: 'button', name: 'align_justify', sprite: 'align_justify', insert: 'align', extra: 'justify', title: this.options.lang.title_justify}
            ]
        });

        // Create our new text area
        areaContainer = document.createElement("div");
        areaContainer.style.clear = "both";

        // Set the width/height of the area
        subtract = 20;
        subtract2 = 8;
        areaContainer.style.height = parseInt(Element.getDimensions(this.editor).height)-this.toolbarHeight-subtract+"px";
        areaContainer.style.width = parseInt(Element.getDimensions(this.editor).width)-subtract2+"px";

        // Create text area
        textInput = document.createElement("textarea");
        textInput.setAttribute("cols", oldTextarea.getAttribute("cols"));
        textInput.setAttribute("rows", oldTextarea.getAttribute("rows"));
        textInput.id = this.textarea;
        textInput.name = oldTextarea.name+"_new";
        textInput.style.height = parseInt(areaContainer.style.height)+"px";
        textInput.style.width = parseInt(areaContainer.style.width)+"px";

        if(oldTextarea.value != '')
        {
            textInput.value = oldTextarea.value;
        }

        if(oldTextarea.tabIndex)
        {
            textInput.tabIndex = oldTextarea.tabIndex;
        }

        areaContainer.appendChild(textInput);
        this.editor.appendChild(areaContainer);

        if(oldTextarea.form)
        {
            Event.observe(oldTextarea.form, "submit", this.closeTags.bindAsEventListener(this));
            Event.observe(oldTextarea.form, "submit", this.updateOldArea.bindAsEventListener(this));
        }

        // Hide the old editor
        oldTextarea.style.visibility = "hidden";
        oldTextarea.style.position = "absolute";
        oldTextarea.style.top = "-1000px";
        oldTextarea.id += "_old";
        this.oldTextarea = oldTextarea;

        this.editor.style.display = "";
        Event.observe(textInput, "keyup", this.updateOldArea.bindAsEventListener(this));

        if(MyBB.browser == 'ie') {
            Event.observe($(this.textarea), 'focus', function() {
                this.trackingCaret = true;
            }.bindAsEventListener(this));
            Event.observe($(this.textarea), 'blur', function() {
                this.trackingCaret = false;
            }.bindAsEventListener(this));
            Event.observe($(this.textarea), 'mousedown', function() {
                this.trackingCaret = true;
                this.storeCaret();
            }.bindAsEventListener(this));
        }

        Event.observe(textInput, "blur", this.updateOldArea.bindAsEventListener(this));
    },

    drawColorOption: function(option)
    {
        var item = document.createElement('li');
        item.extra = option.value;
        item.className = 'editor_dropdown_color_item';
        item.innerHTML = '<a style="background-color: '+option.value+'"></a>';
        return item;
    },

    createToolbarContainer: function(name)
    {
        if($('editor_toolbar_container_'+name)) return;

        var container = document.createElement("div");
        container.id = 'editor_toolbar_container_'+name;
        container.className = 'toolbar_container';

        this.editor.appendChild(container);

        this.toolbarHeight += 28;

        return container;
    },

    createToolbar: function(name, options)
    {
        if(typeof(options.container) == 'undefined')
        {
            options.container = this.createToolbarContainer('auto_'+name);
        }
        else {
            options.container = $('editor_toolbar_container_'+options.container);
            if(!options.container) return;
        }

        if($('editor_toolbar_'+name)) return;

        var toolbar = document.createElement('div');
        toolbar.id = 'editor_toolbar_'+name;
        toolbar.className = 'toolbar';

        var clear = document.createElement('br');
        clear.style.clear = 'both';
        toolbar.appendChild(clear);

        if(options.alignment && options.alignment == 'right') {
            toolbar.className += ' float_right';
        }
        options.container.appendChild(toolbar);
        if(typeof(options.items) == 'object') {
            for(var i = 0; i < options.items.length; ++i) {
                this.addToolbarItem(toolbar, options.items[i]);
            }
        }
        // add closing item
        if(toolbar.lastChild.previousSibling)
            toolbar.lastChild.previousSibling.className += ' toolbar_button_group_last';
    },

    setElementState: function(element, state) {
        element.addClassName('toolbar_'+state);

        if(element.hasClassName('toolbar_button_group_first')) {
            if(state == 'clicked') {
                append = 'toolbar_clicked';
            }
            else if(state == 'hover') {
                append = 'toolbar_hover';
            }
            append += '_button_group_first';
            element.addClassName(append);
        }

        if(element.hasClassName('toolbar_button_group_last')) {
            if(state == 'clicked') {
                append = 'toolbar_clicked';
            }
            else if(state == 'hover') {
                append = 'toolbar_hover';
            }
            append += '_button_group_last';
            element.addClassName(append);
        }
    },

    removeElementState: function(element, state)
    {
        element.removeClassName('toolbar_'+state);

        if(element.hasClassName('toolbar_button_group_first')) {
            if(state == 'clicked') {
                append = 'toolbar_clicked';
            }
            else if(state == 'hover') {
                append = 'toolbar_hover';
            }
            append += '_button_group_first';
            element.removeClassName(append);
        }

        if(element.hasClassName('toolbar_button_group_last')) {
            if(state == 'clicked') {
                append = 'toolbar_clicked';
            }
            else if(state == 'hover') {
                append = 'toolbar_hover';
            }
            append += '_button_group_last';
            element.removeClassName(append);
        }
    },

    dropDownMenuItemClick: function(e)
    {
        this.restartEditorSelection();
        element = Event.element(e);

        if(!element)
            return;

        if(!element.extra)
            element = element.up('li');

        var mnu = element.up('ul');
        var dropdown = this.getElementToolbarItem(mnu);
        var label = dropdown.down('.editor_dropdown_label');

        if(!dropdown.insertText || (dropdown.insertText != "video" && mnu.activeItem && mnu.activeItem == element))
            return;

        mnu.lastItemValue = element.extra;

        if(this.getSelectedText($(this.textarea)))
        {
            this.setDropDownMenuActiveItem(dropdown, 0);
        }
        else
        {
            if(label)
            {
                label.innerHTML = element.innerHTML;
                label.style.overflow = 'hidden';
            }
            var sel_color = dropdown.down('.editor_button_color_selected')
            if(sel_color)
            {
                sel_color.style.backgroundColor = element.extra;
                var use_default = dropdown.down('.editor_dropdown_color_item_default');
                if(use_default) use_default.style.display = '';
            }
            mnu.activeItem = element;
            element.addClassName('editor_dropdown_menu_item_active');
        }

        this.insertMyCode(dropdown.insertText, element.extra);
        this.hideOpenDropDownMenu();
        Event.stop(e);
    },

    setDropDownMenuActiveItem: function(element, index)
    {
        if(element == null)
        {
            return;
        }
        var mnu = element.down('ul');
        var label = element.down('.editor_dropdown_label');

        if(mnu.activeItem)
        {
            mnu.activeItem.removeClassName('editor_dropdown_menu_item_active');
            mnu.activeItem = null;
        }

        if(index > 0)
        {
            var item = mnu.childNodes[index];
            if(!item) return;
            mnu.activeItem = item;
            if(label)
            {
                label.innerHTML = item.innerHTML;
            }

            var sel_color = element.down('.editor_dropdown_color_selected')
            if(sel_color)
            {
                sel_color.style.backgroundColor = item.style.backgroundColor;
                mnu.lastItemValue = item.insertExtra;
                var use_default = element.down('.editor_dropdown_color_item_default');
                if(use_default) use_default.style.display = '';
            }
            item.addClassName('editor_dropdown_menu_item_active');
        }
        else
        {
            if(label)
            {
                label.innerHTML = mnu.childNodes[0].innerHTML;
            }

            var sel_color = element.down('.editor_button_color_selected')
            if(sel_color)
            {
                //sel_color.style.backgroundColor = '';
                var use_default = element.down('.editor_dropdown_color_item_default');
                if(use_default) use_default.style.display = 'none';
            }
            this.removeElementState(element, 'clicked');
        }
    },

    createDropDownMenu: function(options)
    {
        var dropdown = document.createElement('div');
        dropdown.elementType = options.type;
        if(options.image || options.sprite)
            dropdown.className = 'toolbar_dropdown_image';
        else
            dropdown.className = 'toolbar_dropdown';

        dropdown.className += ' editor_dropdown toolbar_dropdown_'+options.name;
        dropdown.id = 'editor_item_'+options.name;

        Event.observe(dropdown, 'mouseover', function()
        {
            this.storeCaret();
            dropdown.addClassName('toolbar_dropdown_over');
        }.bindAsEventListener(this));
        Event.observe(dropdown, 'mouseout', function()
        {
            this.storeCaret();
            dropdown.removeClassName('toolbar_dropdown_over');
        }.bindAsEventListener(this));
        dropdown.insertText = options.insert;

        // create the dropdown label container
        var label = document.createElement('div');
        label.className = 'editor_dropdown_label';
        if(options.title)
        {
            label.innerHTML = options.title;
        }
        else
        {
            label.innerHTML = '&nbsp;';
        }
        dropdown.appendChild(label)

        // create the arrow
        var arrow = document.createElement('div');
        arrow.className = 'editor_dropdown_arrow';
        dropdown.appendChild(arrow);

        // create the menu item container
        var mnu = this.buildDropDownMenu(options);

        Event.observe(dropdown, 'click', this.toggleDropDownMenu.bindAsEventListener(this));
        dropdown.appendChild(mnu);
        return dropdown;
    },

    buildDropDownMenu: function(options)
    {
        var mnu = document.createElement('ul');
        mnu.className = 'editor_dropdown_menu';
        mnu.style.display = 'none';

        // create the first item
        if(options.title)
        {
            var item = document.createElement('li');
            item.className = 'editor_dropdown_menu_title';
            item.innerHTML = options.title;
            mnu.appendChild(item);
            Event.observe(item, 'click', function()
            {
                if(mnu.activeItem)
                {
                    this.restartEditorSelection();
                    this.insertMyCode(dropdown.insertText, '-');
                }
                this.setDropDownMenuActiveItem(dropdown, 0);
            }.bindAsEventListener(this));
        }

        $H(options.options).each(function(option)
        {
            if(options.draw_option)
            {
                item = options.draw_option(option)
            }
            else
            {
                var item = document.createElement('li');
                item.innerHTML = option.value;

                var content = document.createElement('span');
                item.appendChild(content);
                item.extra = option.key;
            }
            Event.observe(item, 'click', this.dropDownMenuItemClick.bindAsEventListener(this));
            Event.observe(item, 'mouseover', function()
            {
                item.addClassName('editor_dropdown_menu_item_over');
            });
            Event.observe(item, 'mouseout', function()
            {
                item.removeClassName('editor_dropdown_menu_item_over');
            });
            mnu.appendChild(item);
        }, this);
        return mnu;
    },

    toggleDropDownMenu: function(e)
    {
        element = Event.element(e);
        if(!element)
            return;
        if(!element.elementType)
            element = this.getElementToolbarItem(element);

        var mnu = $(element).down('ul');

        // This menu is already open, close it
        if(mnu.style.display != 'none')
        {
            mnu.style.display = 'none';
            element.removeClassName('editor_dropdown_menu_open');
            this.removeElementState(element, 'clicked');
            this.openDropDownMenu = null;
            Event.stopObserving(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));
        }
        // Opening this menu
        else
        {
            // If a menu is already open, close it first
            this.showDropDownMenu(mnu);
        }
        this.removeElementState(element, 'clicked');
        Event.stop(e);
    },

    showDropDownMenu: function(mnu)
    {
        this.hideOpenDropDownMenu();
        mnu.style.display = '';
        element = this.getElementToolbarItem(mnu);
        element.addClassName('editor_dropdown_menu_open');
        this.setElementState(element, 'clicked');
        this.openDropDownMenu = mnu;
        Event.observe(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));
    },

    hideOpenDropDownMenu: function()
    {
        if(!this.openDropDownMenu) return;
        this.openDropDownMenu.style.display = 'none';
        this.getElementToolbarItem(this.openDropDownMenu).removeClassName('editor_dropdown_menu_open');
        var dropDown = this.getElementToolbarItem(this.openDropDownMenu);
        this.removeElementState(this.openDropDownMenu.parentNode, 'clicked');
        this.removeElementState(element, 'clicked');
        this.openDropDownMenu = null;
        Event.stopObserving(document, 'click', this.hideOpenDropDownMenu.bindAsEventListener(this));
    },

    getElementToolbarItem: function(elem)
    {
        var parent = elem;
        do {
            if(parent.insertText) return parent;
            parent = parent.parentNode;
        } while($(parent));

        return false;
    },

    storeCaret: function()
    {
        if(MyBB.browser != 'ie' || !this.trackingCaret)
        {
            return;
        }

        // Internet explorer errors if you try and select an element... so just handle that by try catch
        try {
            var range = document.selection.createRange();
            var range_all = document.body.createTextRange();
            range_all.moveToElementText($(this.textarea));
            for(var sel_start = 0; range_all.compareEndPoints('StartToStart', range) < 0; sel_start++)
                range_all.moveStart('character', 1);

            var range_all = document.body.createTextRange();
            range_all.moveToElementText($(this.textarea));
            for(var sel_end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; sel_end++)
                range_all.moveStart('character', 1);

            this.lastCaretS = sel_start;
            this.lastCaretE = sel_end;
        } catch(e) { }
    },

    restartEditorSelection: function()
    {
        if(MyBB.browser != 'ie')
        {
            return;
        }

        var range = $(this.textarea).createTextRange();
        range.collapse(true);
        range.moveStart('character', this.lastCaretS);
        range.moveEnd('character', this.lastCaretE - this.lastCaretS);
        range.select();
    },

    addToolbarItem: function(toolbar, options)
    {
        if(typeof(toolbar) == 'string')
        {
            toolbar = $('editor_toolbar_'+toolbar);
        }

        if(!$(toolbar)) return;

        // Does this item already exist?
        if($('editor_item_'+options.name)) return;

        insert_first_class = false;

        // Is this the first item? childnodes = 1 (closing br) or lastchild.previousSibling = sep
        if(toolbar.childNodes.length == 1 || (toolbar.lastChild.previousSibling && toolbar.lastChild.previousSibling.className.indexOf('toolbar_sep') > -1 || (toolbar.lastChild.previousSibling.className.indexOf('editor_dropdown') > -1 && options.type != 'dropdown')))
        {
            insert_first_class = true;
        }

        if(options.type == "dropdown")
        {
            var dropdown = this.createDropDownMenu(options);
            if(dropdown)
                toolbar.insertBefore(dropdown, toolbar.lastChild);

            if(insert_first_class == true)
                dropdown.className += ' toolbar_dropdown_group_first';
        }
        else if(options.type == 'button')
        {
            var button = this.createToolbarButton(options)
            toolbar.insertBefore(button, toolbar.lastChild);

            if(insert_first_class == true)
                button.className += ' toolbar_button_group_first';
        }
        else if(options.type == 'separator')
        {
            if(toolbar.lastChild.previousSibling && !$(toolbar.lastChild.previousSibling).hasClassName('toolbar_dropdown'))
            {
                toolbar.lastChild.previousSibling.className += ' toolbar_button_group_last';
            }
            var separator = document.createElement("span");
            separator.elementType = options.type;
            separator.className = "toolbar_sep";
            toolbar.insertBefore(separator, toolbar.lastChild);
        }
    },

    createToolbarButton: function(options)
    {
        var button = document.createElement('span');
        button.elementType = options.type;
        button.id = 'editor_item_'+options.name;
        if(typeof(options.title) != 'undefined')
        {
            button.title = options.title;
        }
        button.className = 'toolbar_button toolbar_normal toolbar_button_'+options.name;

        if(typeof(options.style) == 'object')
        {
            $H(options.style).each(function(item) {
                eval('button.style.'+item.key+' = "'+item.value+'";');
            });
        }
        button.insertText = options.insert;
        button.insertExtra = '';
        if(typeof(options.extra) != 'undefined')
            button.insertExtra = options.extra;

        if(typeof(options.sprite) != 'undefined')
        {
            var img = document.createElement('span');
            img.className = 'toolbar_sprite toolbar_sprite_'+options.sprite;
        }
        else
        {
            var img = document.createElement('img');
            img.src = this.themePath + "/images/" + options.image;
        }
        button.appendChild(img);

        if(options.dropdown)
        {
            if(options.color_select == true)
            {
                var sel = document.createElement('em');
                sel.className = 'editor_button_color_selected';
                button.appendChild(sel);
            }
            // create the arrow
            var arrow = document.createElement('u');
            arrow.className = 'toolbar_button_arrow';
            button.appendChild(arrow);
            button.className += ' toolbar_button_with_arrow';
        }

        var end = document.createElement('strong');
        button.appendChild(end);

        // Create the actual drop down menu
        if(options.dropdown)
        {
            // create the menu item container
            var mnu = this.buildDropDownMenu(options);

            Event.observe(arrow, 'click', this.toggleDropDownMenu.bindAsEventListener(this));
            Event.observe(button, 'click', this.toggleDropDownMenu.bindAsEventListener(this));
            Event.observe(arrow, 'mouseover', function(e)
            {
                elem = Event.element(e);
                if(!elem) return;
                elem.parentNode.addClassName('toolbar_button_over_arrow');
            });
            Event.observe(arrow, 'mouseout', function(e)
            {
                elem = Event.element(e);
                if(!elem) return;
                elem.parentNode.removeClassName('toolbar_button_over_arrow');
            });
            button.appendChild(mnu);
            button.dropdown = true;
            button.menu = mnu;
        }

        // Does this button have enabled/disabled states?
        if(options.disabled_img || options.disabled_sprite)
        {
            button.disable = function()
            {
                if(button.disabled == true) return;

                if(options.disabled_sprite)
                {
                    img.removeClassName('toolbar_sprite_'+options.sprite);
                    img.addClassName('toolbar_sprite_disabled_'+options.disabled_sprite);
                }
                else
                    img.src = this.themePath + '/images/' + options.disabled_img;

                button.disabled = true;
            };

            button.enable = function()
            {
                if(!button.disabled) return;

                if(options.disabled_sprite)
                {
                    img.removeClassName('toolbar_sprite_disabled_'+options.disabled_sprite);
                    img.addClassName('toolbar_sprite_'+options.sprite);
                }
                else
                    img.src = this.themePath + '/images/' + options.image;

                button.enabled = true;
            };

            if(options.disabled && options.disabled == true)
            {
                button.disable();
                button.disabled = true;
            }
            else
                button.disabled = false;
        }

        Event.observe(button, "mouseover", this.toolbarItemHover.bindAsEventListener(this));
        Event.observe(button, "mouseout", this.toolbarItemOut.bindAsEventListener(this));

        if(!options.dropdown)
        {
            // Dropdown event listener is above...
            Event.observe(button, "click", this.toolbarItemClick.bindAsEventListener(this));
        }
        return button;
    },

    updateOldArea: function(e)
    {
        this.oldTextarea.value = $(this.textarea).value;
    },

    toolbarItemOut: function(e)
    {
        this.storeCaret();
        element = Event.element(e);

        if(!element)
            return false;

        if(!element.elementType)
            element =     this.getElementToolbarItem(element);

        if(element.disabled)
            return;

        if(typeof(element.insertText) != 'undefined')
        {
            if(element.insertExtra)
            {
                insertCode = element.insertText+"_"+element.insertExtra;
            }
            else
            {
                insertCode = element.insertText;
            }

            if(this.openTags.indexOf(insertCode) != -1 || element.className.indexOf('editor_dropdown_menu_open') > -1)
            {
                this.setElementState(element, 'clicked');
            }
        }
        this.removeElementState(element, 'hover');
    },

    toolbarItemHover: function(e)
    {
        this.storeCaret();
        element = Event.element(e);
        if(!element)
            return false;

        if(!element.elementType)
            element = this.getElementToolbarItem(element);

        if(element.disabled)
            return;

        if(!element.className || element.className.indexOf('toolbar_clicked') == -1)
            this.setElementState(element, 'hover');
    },

    toolbarItemClick: function(e)
    {
        element = Event.element(e);

        if(!element)
            return false;

        if(!element.elementType)
            element = this.getElementToolbarItem(element);

        if(element.disabled)
            return;

        if(element.dropdown && element.menu)
        {
            if(typeof(element.menu.activeItem) != "undefined")
            {
                Event.stop(e);
                if(!element.menu.lastItemValue)
                {
                    this.showDropDownMenu(element.menu);
                }
                else
                {
                    this.insertMyCode(element.insertText, element.menu.lastItemValue);
                }

                return;
            }
        }

        if(element.id == "editor_item_close_tags")
        {
            this.closeTags();
        }
        else
        {
            if(typeof(element.insertExtra) != 'undefined')
                this.insertMyCode(element.insertText, element.insertExtra);
            else
                this.insertMyCode(element.insertText);
        }
    },

    insertList: function(type)
    {
        list = "";

        do
        {
            listItem = prompt(this.options.lang.enter_list_item, "");

            if(listItem != "" && listItem != null)
            {
                list = list+"[*]"+listItem+"\n";
            }
        }
        while(listItem != "" && listItem != null);

        if(list == "")
        {
            return false;
        }

        if(type)
        {
            list = "[list="+type+"]\n"+list;
        }
        else
        {
            list = "[list]\n"+list;
        }

        list = list+"[/list]\n";
        this.performInsert(list, "", true, false);
    },

    insertURL: function()
    {
        selectedText = this.getSelectedText($(this.textarea));
        url = prompt(this.options.lang.enter_url, "http://");

        if(url)
        {
            if(!selectedText)
            {
                title = prompt(this.options.lang.enter_url_title, "");
            }
            else
            {
                title = selectedText;
            }

            if(title)
            {
                this.performInsert("[url="+url+"]"+title+"[/url]", "", true, false);
            }
            else
            {
                this.performInsert("[url]"+url+"[/url]", "", true, false);
            }
        }
    },

    insertEmail: function()
    {
        selectedText = this.getSelectedText($(this.textarea));
        email = prompt(this.options.lang.enter_email, "");

        if(email)
        {
            if(!selectedText)
            {
                title = prompt(this.options.lang.enter_email_title, "");
            }
            else
            {
                title = selectedText;
            }

            if(title)
            {
                this.performInsert("[email="+email+"]"+title+"[/email]", "", true, false);
            }
            else
            {
                this.performInsert("[email]"+email+"[/email]", "", true, false);
            }
        }
    },

    insertIMG: function()
    {
        image = prompt(this.options.lang.enter_image, "http://");

        if(image)
        {
            this.performInsert("[img]"+image+"[/img]", "", true);
        }
    },

    insertVideo: function(type)
    {
        selectedText = this.getSelectedText($(this.textarea));

        if(!selectedText)
        {
            url = prompt(this.options.lang.enter_video_url, "http://");
        }
        else
        {
            url = selectedText;
        }

        if(url)
        {
            this.performInsert("[video="+type+"]"+url+"[/video]", "", true, false);
        }
        this.setDropDownMenuActiveItem($('editor_item_video'), 0);
    },

    insertMyCode: function(code, extra)
    {
        this.restartEditorSelection();

        switch(code)
        {
            case "list":
                this.insertList(extra);
                break;
            case "url":
                this.insertURL();
                break;
            case "image":
                this.insertIMG();
                break;
            case "email":
                this.insertEmail();
                break;
            case "video":
                this.insertVideo(extra);
                break;
            default:
                var already_open = false;
                var no_insert = false;
                if(extra)
                {
                    var full_tag = code+"_"+extra;
                }
                else
                {
                    var full_tag = code;
                }

                var newTags = new Array();
                this.openTags.each(function(tag)
                {
                    exploded_tag = tag.split("_");
                    if(exploded_tag[0] == code)
                    {
                        already_open = true;
                        this.performInsert("[/"+exploded_tag[0]+"]", "", false);
                        var elem = $('editor_item_'+exploded_tag[0]);

                        if(elem)
                        {
                            this.removeElementState(elem, 'clicked');
                        }

                        if(elem && (elem.elementType == "dropdown" || elem.dropdown || elem.menu))
                        {
                            this.setDropDownMenuActiveItem(elem, 0);
                        }

                        if(tag == full_tag)
                        {
                            no_insert = true;
                        }
                    }
                    else
                    {
                        newTags[newTags.length] = tag;
                    }
                }.bind(this));

                this.openTags = newTags;
                var do_insert = false;

                if(extra != "" && extra != "-" && no_insert == false)
                {
                    start_tag = "["+code+"="+extra+"]";
                    end_tag = "[/"+code+"]";
                    do_insert = true;
                }
                else if(!extra && already_open == false)
                {
                    start_tag = "["+code+"]";
                    end_tag = "[/"+code+"]";
                    do_insert = true;
                }

                if(do_insert == true)
                {
                    if(!this.performInsert(start_tag, end_tag, true))
                    {
                        this.openTags.push(full_tag);
                        $('editor_item_close_tags').style.visibility = '';
                    }
                    else if($('editor_item_'+full_tag))
                    {
                        this.removeElementState($('editor_item_'+full_tag), 'clicked');
                    }
                    else if($('editor_item_'+code))
                    {
                        elem = $('editor_item_'+code);
                        if(elem.type == "dropdown" || elem.dropdown || elem.menu)
                            this.setDropDownMenuActiveItem($('editor_item_'+start_tag), 0);
                    }
                }
        }

        if(this.openTags.length == 0)
        {
            $('editor_item_close_tags').style.visibility = 'hidden';
        }
    },

    getSelectedText: function(element)
    {
        element.focus();
        if(document.selection)
        {
            var selection = document.selection;
            var range = selection.createRange();

            if((selection.type == "Text" || selection.type == "None") && range != null)
            {
                return range.text;
            }
        }
        else if(element.selectionEnd)
        {
            var select_start = element.selectionStart;
            var select_end = element.selectionEnd;
            if(select_end <= 0)
            {
                select_end = element.textLength;
            }
            var start = element.value.substring(0, select_start);
            var middle = element.value.substring(select_start, select_end);
            return middle;
        }
    },

    performInsert: function(open_tag, close_tag, is_single, ignore_selection)
    {
        var is_closed = true;

        if(!ignore_selection)
        {
            var ignore_selection = false;
        }

        if(!close_tag)
        {
            var close_tag = "";
        }
        var textarea = $(this.textarea);
        textarea.focus();

        if(document.selection)
        {
            var selection = document.selection;
            var range = selection.createRange();

            if(ignore_selection != false)
            {
                selection.collapse;
            }

            if((selection.type == "Text" || selection.type == "None") && range != null && ignore_selection != true)
            {
                if(close_tag != "" && range.text.length > 0)
                {
                    var keep_selected = true;
                    range.text = open_tag+range.text+close_tag;
                }
                else
                {
                    var keep_selected = false;

                    if(is_single)
                    {
                        is_closed = false;
                    }
                    range.text = open_tag;
                }
                range.select();
            }
            else
            {
                textarea.value += open_tag;
            }
        }
        else if(typeof(textarea.selectionEnd) != 'undefined')
        {
            var select_start = textarea.selectionStart;
            var select_end = textarea.selectionEnd;
            var scroll_top = textarea.scrollTop;

            var start = textarea.value.substring(0, select_start);
            var middle = textarea.value.substring(select_start, select_end);
            var end = textarea.value.substring(select_end, textarea.textLength);

            if(select_end - select_start > 0 && ignore_selection != true && close_tag != "")
            {
                var keep_selected = true;
                middle = open_tag+middle+close_tag;
            }
            else
            {
                var keep_selected = false;
                if(is_single)
                {
                    is_closed = false;
                }
                middle = open_tag;
            }

            textarea.value = start+middle+end;

            if(keep_selected == true && ignore_selection != true)
            {
                textarea.selectionStart = select_start;
                textarea.selectionEnd = select_start + middle.length;
            }
            else if(ignore_selection != true)
            {
                textarea.selectionStart = select_start + middle.length;
                textarea.selectionEnd = textarea.selectionStart;
            }
            textarea.scrollTop = scroll_top;
        }
        else
        {
            textarea.value += open_tag;

            if(is_single)
            {
                is_closed = false;
            }
        }
        this.updateOldArea();
        textarea.focus();
        this.trackingCaret = true;
        this.storeCaret();
        this.trackingCaret = false;
        return is_closed;
    },

    closeTags: function()
    {
        if(this.openTags[0])
        {
            while(this.openTags[0])
            {
                tag = this.openTags.pop();
                exploded_tag = tag.split("_");
                this.performInsert("[/"+exploded_tag[0]+"]", "", false);

                if($('editor_item_'+exploded_tag[0]))
                {
                    tag = $('editor_item_'+exploded_tag[0]);
                }
                else
                {
                    tag = $('editor_item_'+tag);
                }
                if(tag)
                {
                    if(tag.elementType == "dropdown" || tag.dropdown || tag.menu)
                    {
                        this.setDropDownMenuActiveItem(tag, 0);
                    }
                    else
                    {
                        this.removeElementState(tag, 'clicked');
                    }
                }
            }
        }
        $(this.textarea).focus();
        $('editor_item_close_tags').style.visibility = 'hidden';
        this.openTags = new Array();
    },

    bindSmilieInserter: function(id)
    {
        if(!$(id))
        {
            return false;
        }

        var smilies = $(id).select('.smilie');

        if(smilies.length > 0)
        {
            smilies.each(function(smilie)
            {
                smilie.onclick = this.insertSmilie.bindAsEventListener(this);
                smilie.style.cursor = "pointer";
            }.bind(this));
        }
    },

    openGetMoreSmilies: function(editor)
    {
        MyBB.popupWindow('misc.php?action=smilies&popup=true&editor='+editor, 'sminsert', 240, 280);
    },

    insertSmilie: function(e)
    {
        element = Event.element(e);

        if(!element || !element.alt)
        {
            return false;
        }
        this.performInsert(element.alt, "", true, false);
    },

    insertAttachment: function(aid)
    {
        this.performInsert("[attachment="+aid+"]", "", true, false);
    }
};
XEDE   21 Nov, 2014, 9:11 am
#9
(20 Nov, 2014, 6:58 pm)roberto_25 escribió: Alguien me puede ayudar a mi...?  quiero que aparezca el botón de " hide " de hecho ya logre instalar el pluguin de hide de hecho funciona pero tengo que hacer la instrucción manualmente porque no me aparece el botón estaré muy agradecido quien me ayude.
jscripts/editor.js

Aquí mi plantilla

Solamente tenes que seguir el tutorial, si el mismo no te es claro este es lo mismo pero con mas detalle http://www.mybb-es.com/hilo-tutorial-agr...rle-mycode de todas formas estos tutoriales te aviso que son para Mybb 1.6.x y no funcionan en Mybb 1.8.x

Para la versión 1.8.x tenes como ejemplo este tutorial http://www.mybb-es.com/hilo-1-8-agregar-...tor--12481
Última modificación: 21 Nov, 2014, 9:13 am por XEDE.
garubostar   21 Nov, 2014, 1:30 pm
#10
yo agregue el boton de imgur facilemnte, lo que necesitaria es agregarl el boton de spoiler eso seria salvaje
Páginas (2): 1 2   
  
Powered By MyBB, © 2002-2024 MyBB Group.
Made with by Curves UI.