MyBB Community Forums

martec,

in bbcodes_sceditor.js there's this part:

	/********************************************
	 * 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();  <--- Tutorial says code should be added after this.
				$cite.html($cite.text());

Can you confirm if it's really should be added after as thread suggests or new code should be added after cite.text?

(2014-07-06, 06:36 AM)martec Wrote: [ -> ]6 - Now you need add spoiler mycode or plugin of spoiler with description support. I recommend that use plugin because plugin is nestable and mycode is not. I recommend this one http://mods.mybb.com/view/spoiler-advance . Of course you need edit plugin to work with 1.8

I'm using this plugin for some time and only noticing this now :
I have a bug using this plugin when the content of the spoiler has the symbol < with a letter after, for example : "<a".
This breaks the page display for the following messages.

Tried plugin tried tutorial - none adds spoiler button in sceditor =(
Just no changes..

To respond to myself as I was the last in this thread : it was related to the activation of template comment.
Edit : OK, after more than 2 years, someone respond during me answering ^^

New problem :
I want to use this tutorial for the last version of mybb : 1.8.24
For this to work I have already made some modifications :
Up to now, I have made edit only for the file "root/jscripts/bbcodes_sceditor.js" :

First change SAME.

/***********************
* Add Spoiler command *
***********************/
$.sceditor.formats.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 = $elm.data('desc') || $cite.text() ;

$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) {
var data = '';

if (attrs.defaultattr) {
content = '<cite>' + attrs.defaultattr + '</cite>' + content;
data += ' data-desc="' + attrs.defaultattr + '"';
}

return '<blockquote' + data + ' class="spoiler">' + content + '</blockquote>';
},
breakStart: true,
breakEnd: true
});

$.sceditor.command.set("spoiler", {
_dropDown: function (editor, caller, html) {
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 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'
}); 

(
modification of line :
$.sceditor.plugins.bbcode.bbcode.set("spoiler", {
to
$.sceditor.formats.bbcode.set("spoiler", {
)

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

With this file modification and the others in the fisrt post, if I tried to use the spoiler button I have this error in my console :

Uncaught TypeError: e.querySelectorAll is not a function
    jQuery 2
    _dropDown http://ip/jscripts/bbcodes_sceditor.js?ver=1824:613
    exec http://ip/jscripts/bbcodes_sceditor.js?ver=1824:616
    jQuery 16
    <anonymous> http://ip/newreply.php?tid=5642:462
    jQuery 13

The lines 613 and 616 are from the previous additions :

613 : editor.createDropDown(caller, 'insertspoiler', $content);
616 : $.sceditor.command.get('spoiler')._dropDown(this, caller);

In the file we can see this type of line :

editor.createDropDown(caller, 'insertimage', $content.get(0));

I have tried to add the ".get(0)" to line 613.
The button is showing the first step for the description but I can't go further. Pressing enter reload the page with nothing more.

Edit :
In the modifications of the edit in the file "root/jscripts/bbcodes_sceditor.js", it seems that this :

$content.find('.button').click(function (e) {

should be :

$content.find('.button').on('click', function (e) {

Still not working.

Edit 2 :

if ($(element[0]).hasClass('spoiler')) {

change to

if ($(element).hasClass('spoiler')) {

OldDuck, do you even have the button apper in scedit panel?

I have tags working manualy fine but i cant make button appear in sceditor (normal and quick)

Up to now, needs some modifications of what it's in the first post, see my post.
The button appears with the "Insert" possibility in the pop-up window but it's not working.
If I switch to source code, there is nothing and it's posting quote bbcode instead of spoiler bbcode.
The hidden text doesn't show up when I click on the button in the message.
Don't really know much more ^^
We will see how to fix it ^^

---

My last modifications for the steps 4 :

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.formats.bbcode.set('quote', {
 format: function (element, content) {
 var author = '',
 $elm = $(element),
 $cite = $elm.children('cite').first();

4.2 - Add after

/* Addition for spoiler */
 if ($(element).hasClass('spoiler')) {
                var desc = '';
                if($cite.length === 1 || $elm.data('desc')) {
 desc = $elm.data('desc') || $cite.text() ;

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

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

 $elm.prepend($cite);
                }

                return '[spoiler' + desc + ']' + content + '[/spoiler]';
            }
 /* End addition */

4.3 - Find

tooltip: 'Insert a video'
 });

4.4 - Add after

// Add Spoiler command
    $.sceditor.formats.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 = $elm.data('desc') || $cite.text() ;

                $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) {
 var data = '';
            
            if (attrs.defaultattr) {
                content = '<cite>' + attrs.defaultattr + '</cite>' + content;
 data += ' data-desc="' + attrs.defaultattr + '"';
            }
                
            return '<blockquote' + data + ' class="spoiler">' + content + '</blockquote>';
        },
        breakStart: true,
        breakEnd: true
    });
    
    $.sceditor.command.set("spoiler", {
        _dropDown: function (editor, caller, html) {
            var $content;

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

            $content.find('.button').on('click', function (e) {
                var    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.get(0));
        },        
        exec: function (caller) {
            $.sceditor.command.get('spoiler')._dropDown(this, caller);
        },
        txtExec: function (caller) {
            $.sceditor.command.get('spoiler')._dropDown(this, caller);
        },
    tooltip: 'Insert a spoiler'
});

4.5 - Find

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

4.6 - Replace

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

Bug : Can't add a text spoiler.
If in the line :

if ($(element[0]).hasClass('spoiler')) {

- We let the '[0]', it's working but it's using quote bbcode.
- We remove the '[0]', it's using the spoiler bbcode but can't add text, it is not taken in account.

Edit : Seems to work
I am also using this plugin https://community.mybb.com/mods.php?acti...w&pid=1208 instead of spoiler-advance.

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 .