[For 1.8] [1.8] How add spoiler tag button with description supoort

[martec]

Removed for security reasons.

If you want to continue using this, keep in mind that you will have to make modifications to make it safe as Mybb did in the 1.8.24 update https://github.com/mybb/mybb/commit/37ad...dd0823e3c5 .

[OMID_HXC]

thanks. nice.

---

Edit:
i think there is a small problem:

if we use spoiler for styled text that return to HTML code:
see picture:

---

And can you offer a code for non description please.

[martec]

thanks. nice.

---

Edit:
i think there is a small problem:

if we use spoiler for styled text that return to HTML code:
see picture:

---

And can you offer a code for non description please.

return HTML code?
but why?
you using xhtml plugin?

[OMID_HXC]

return HTML code?
but why?
you using xhtml plugin?

yes any bb style tag return to html tag in the editor. see picture on past reply.

no have any plugin installed.
maybe my installation corrupted.
wait sec.... i installing new one now ....
ok i tested on full new installation from:
(https://github.com/mybb/mybb/archive/feature.zip).
so ... test again ... NO the problem still present !

i think the problem come from one of this codes:

            if ($(element[0]).hasClass('spoiler')) {
                var desc = '';
                if($cite.length === 1 || $elm.data('desc')) {
                    desc = $cite.text() || $elm.data('desc');

                    $elm.data('desc', desc);
                    $cite.remove();

                    content    = this.elementToBbcode($(element));
                    desc  = '=' + desc;

                    $elm.prepend($cite);
                }

                return '[spoiler' + desc + ']' + content + '[/spoiler]';
            }

or

    /***********************
     * Add Spoiler command *
     ***********************/
    $.sceditor.plugins.bbcode.bbcode.set("spoiler", {
        allowsEmpty: true,
        isInline: false,    
        format: function(element, content) {
            var    desc = '',
                $elm = $(element),
                $cite = $elm.children('cite').first();

            if($cite.length === 1 || $elm.data('desc')) {
                desc = $cite.text() || $elm.data('desc');

                $elm.data('desc', desc);
                $cite.remove();

                content    = this.elementToBbcode($(element));
                desc  = '=' + desc;

                $elm.prepend($cite);
            }

            return '[spoiler' + desc + ']' + content + '[/spoiler]';
        },
        html: function (token, attrs, content) {
            
            if (attrs.defaultattr) {
                content = '<cite>' + attrs.defaultattr + '</cite>' + content;
            }
                
            return '<blockquote class="spoiler">' + content + '</blockquote>';
        },
        breakStart: true,
        breakEnd: true
    });
    
    $.sceditor.command.set("spoiler", {
        _dropDown: function (editor, caller) {
            var $content;

            $content = $(
                '<div>' +
                    '<label for="des">' + editor._('Description (optional):') + '</label> ' +
                    '<input type="text" id="des" />' +
                '</div>' +
                '<div><input type="button" class="button" value="' + editor._('Insert') + '" /></div>'
            );

            $content.find('.button').click(function (e) {
                var    html = editor.getRangeHelper().selectedHtml(),
                    description = $content.find('#des').val(),
                    descriptionAttr = '',
                    before = '[spoiler]',
                    end = '[/spoiler]';
                
                if (description) {
                   descriptionAttr = '=' + description + '';
                   before = '[spoiler'+ descriptionAttr +']';
                }
                
                if (html) {
                    before = before + html + end;
                    end    = null;
                }
                
                editor.insert(before, end);
                editor.closeDropDown(true);
                e.preventDefault();
            });

            editor.createDropDown(caller, 'insertspoiler', $content);
        },        
        exec: function (caller) {
            $.sceditor.command.get('spoiler')._dropDown(this, caller);
        },
        txtExec: function (caller) {
            $.sceditor.command.get('spoiler')._dropDown(this, caller);
        },
    tooltip: 'Insert a spoiler'
});

EDIT:
my test was with firefox
now i test it on chrome ... on chrome are fine !

[martec]

@OMID_HXC

thanks fixed...
you need replace 4.2 and 4.4

[OMID_HXC]

@OMID_HXC

thanks fixed...
you need replace 4.2 and 4.4

thanks.
now in firefox all ok.
but in chrome after use spoiler tag on styled text, all styles just removed from text.

and can you offer a code without description for anyone that are use spoiler MYCode?

[martec]

but in chrome after use spoiler tag on styled text, all styles just removed from text.

this i can´t make anything...
you can check here http://www.sceditor.com/ with quote tag, has same issue...
you can push ticket in https://github.com/samclarke/SCEditor/issues?state=open saying that has issue with quote tag in chrome...

tt

[martec]

and can you offer a code without description for anyone that are use spoiler MYCode?

but you can add too spoiler tag with description in mycode...
you need two mycode, with and without description...
anyway later'll add the button without description in this topic

---

OMID_HXC below spoiler button without description. I don´t tested code below. If code below work, plz tell me to put in the original post.

1 - Edit root/jscripts/sceditor/jquery.sceditor.mybb.css (this used to style spoiler tag in WYSIWYG mode)

1.1 - Find

blockquote cite {
	font-weight: bold;
	font-style: normal;
	display: block;
	font-size: 1em;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
	padding-bottom: 3px;
}

1.2 - Add after

blockquote.spoiler:before {
	position: absolute;
	content: 'SPOILER:';
	top: -1.35em;
	left: 0;
	font-size: 0.8em;
	display: block;
	text-align: left;
	font-weight: bold;
}
blockquote.spoiler {
	margin-top: 1.5em;
	background-color: #F5F5F5;	
}

2 - Edit root/jscripts/sceditor/editor_themes/mybb.css

2.1 - Add after all

.sceditor-button-spoiler div {

  background-image:url(s.png);

}

3 - Copy s.png [attachment=31902] in root/jscripts/sceditor/editor_themes/ (you can use any image in 16x16 or use attached file)

4 - Edit root/jscripts/bbcodes_sceditor.js (this used to add new command in sceditor)

4.1 - Find

	/********************************************
	 * Update quote to support pid and dateline *
	 ********************************************/
	$.sceditor.plugins.bbcode.bbcode.set('quote', {
		format: function(element, content) {
			var	author = '',
				$elm  = $(element),
				$cite = $elm.children('cite').first();

4.2 - Add after

			if ($(element[0]).hasClass('spoiler')) {
                return '[spoiler]' + content + '[/spoiler]';
            } 

4.3 - Find

		tooltip: 'Insert a video'
	});

4.4 - Add after

	/***********************
     * Add Spoiler command *
     ***********************/
    $.sceditor.plugins.bbcode.bbcode.set("spoiler", {
        allowsEmpty: true,
        isInline: false,    
        format: '[spoiler]{0}[/spoiler]'
        html: '<blockquote class="spoiler">{0}</blockquote>',
        breakStart: true,
        breakEnd: true
    });
    
    $.sceditor.command.set("spoiler", {
        exec: function () {
            this.wysiwygEditorInsertHtml('<blockquote class="spoiler">', '</blockquote>');
        },
        txtExec: ['[spoiler]', '[/spoiler]'],
    tooltip: 'Insert a spoiler'
});

4.5 - Find

$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img');

4.6 - Replace

$.sceditor.plugins.bbcode.bbcode.remove('code').remove('php').remove('quote').remove('video').remove('img').remove('spoiler');

5 - Go to codebuttons template in ACP


5.1 - Find

{$code}quote|

5.2 - Replace

{$code}quote,spoiler|

[martec]

03/09 - Tutorial updated to final version of Mybb 1.8

[ThePanda]

Hi martec, do you have any plans to roll out this tutorial as a mod/plugin?