[For 1.8] [1.8] How add spoiler tag button with description supoort
#51
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?
Reply
#52
(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.
Reply
#53
Tried plugin tried tutorial - none adds spoiler button in sceditor =(
Just no changes..
Reply
#54
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')) {
Reply
#55
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)
Reply
#56
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 Smile
I am also using this plugin https://community.mybb.com/mods.php?acti...w&pid=1208 instead of spoiler-advance.
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)