MyBB Community Forums

Full Version: Trying to add BBCode to SCEditor
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
So I'm trying to add a BBCode button on the SCEditor in MyBB that will embed a soundcloud track. I tried following this tutorial. When I add this to my codebuttons template where it told me to put it, the editor disappear.

Soundcloud BBCode
   $.sceditor.command.set ('soundcloud', {
	 exec: function () {
		 . this wysiwygEditorInsertHtml ('<object height="81" width="100%"><param name="movie" value="http://player.soundcloud.com/player.swf?url=', '&amp;g=bb"></param></object>');
	 },
	 txtExec: ['[soundcloud]', '[/ soundcloud]'],
	 tooltip: "Insert Soundcloud"
 });

 $.sceditor.plugins.bbcode.bbcode.set ('soundcloud', {
	 tags: {
		 'object': {
			 'Class': ['soundcloud']
		 }
	 },
	 format: '[soundcloud] {0} [/ soundcloud]',
	 html: '<object height="81" width="100%"><param name="movie" value="http://player.soundcloud.com/player.swf?url={0}&amp;g=bb"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url={0}&amp;g=bb" type="application/x-shockwave-flash" width="100%"></embed></object>'
 }); 

CodeButtons template
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/editor_themes/{$theme['editortheme']}" type="text/css" media="all" />
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/myinsertcommand/myinsertcommand.css" type="text/css" media="all" />
<style type="text/css">
.sceditor-button-mycode div  {
	background: url(images/soundcloud.png);
}
</style>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/jquery.sceditor.bbcode.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/bbcodes_sceditor.js"></script>
{$insert_func}
<script type="text/javascript">
var partialmode = {$mybb->settings['partialmode']},
opt_editor = {
	plugins: "bbcode",
	style: "{$mybb->asset_url}/jscripts/sceditor/textarea_styles/jquery.sceditor.{$theme['editortheme']}",
	rtl: {$lang->settings['rtl']},
	locale: "mybblang",
	enablePasteFiltering: true,
	emoticonsEnabled: {$emoticons_enabled},
	emoticons: {
		// Emoticons to be included in the dropdown
		dropdown: {
			{$dropdownsmilies}
		},
		// Emoticons to be included in the more section
		more: {
			{$moresmilies}
		},
		// Emoticons that are not shown in the dropdown but will still be converted. Can be used for things like aliases
		hidden: {
			{$hiddensmilies}
		}
	},
	emoticonsCompat: true,
	 toolbar : "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,imgur,{$email}{$link}|video,soundcloud,{$emoticon}|{$list}{$code}quote,spoiler,|maximize,source", 
};
{$editor_language}
$(function() {
	
	$.sceditor.command.set ('soundcloud', {
	 exec: function () {
		 . this wysiwygEditorInsertHtml ('<object height="81" width="100%"><param name="movie" value="http://player.soundcloud.com/player.swf?url=', '&amp;g=bb"></param></object>');
	 },
	 txtExec: ['[soundcloud]', '[/ soundcloud]'],
	 tooltip: "Insert Soundcloud"
 });

 $.sceditor.plugins.bbcode.bbcode.set ('soundcloud', {
	 tags: {
		 'object': {
			 'Class': ['soundcloud']
		 }
	 },
	 format: '[soundcloud] {0} [/ soundcloud]',
	 html: '<object height="81" width="100%"><param name="movie" value="http://player.soundcloud.com/player.swf?url={0}&amp;g=bb"></param><param name="allowscriptaccess" value="always"></param><embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url={0}&amp;g=bb" type="application/x-shockwave-flash" width="100%"></embed></object>'
 });
  
	$("#{$bind}").sceditor(opt_editor);

	MyBBEditor = $("#{$bind}").sceditor("instance");
	{$sourcemode}
});
	
function qae_as() {
    if (MyBBEditor) {
        sc_asd = JSON.parse(localStorage.getItem('sc_as'));
        link_can = location.href;
        if (!sc_asd) {
            sc_asd = {};
        }
        if (MyBBEditor.val() != sc_asd[link_can]) {
            if ($.trim(MyBBEditor.val())) {
                if(!$('#autosave').length) {
                    $('<div/>', { id: 'autosave', class: 'bottom-right' }).appendTo('body');
                }
                setTimeout(function() {
                    $('#autosave').jGrowl('Auto Save: Message Saved.', { life: 500 });
                },200);
                sc_asd[link_can] = MyBBEditor.val();
                localStorage.setItem('sc_as', JSON.stringify(sc_asd));
            }
            else {
                if (sc_asd[link_can]) {
                    delete sc_asd[link_can];
                    localStorage.setItem('sc_as', JSON.stringify(sc_asd));
                }
            }
        }
    }
}

function qae_ac() {
    sc_asd = JSON.parse(localStorage.getItem('sc_as'));
    link_can = location.href;
    if (!sc_asd) {
        sc_asd = {};
    }    
    if (sc_asd[link_can]) {
        delete sc_asd[link_can];
        localStorage.setItem('sc_as', JSON.stringify(sc_asd));
    }
}

function qae_ar() {
    sc_asd = JSON.parse(localStorage.getItem('sc_as'));
    if (!sc_asd) {
        sc_asd = {};
    }
    if(Object.keys(sc_asd).length > 20) {
        delete sc_asd[Object.keys(sc_asd)[0]];
        localStorage.setItem('sc_as', JSON.stringify(sc_asd));
    }
}

($.fn.on || $.fn.live).call($(document), 'click', 'input[name*="submit"]', function () {
    qae_ac();
});

$(document).ready(function(){
    setInterval(function() {
        qae_as();
        qae_ar();      
    },15000);

    setTimeout(function() {
        sc_asd = JSON.parse(localStorage.getItem('sc_as'));
        link_can = location.href;
        restitem = "";
        if (sc_asd) {
            restitem = sc_asd[link_can];
        }
        if (restitem) {
            var restorebut = [
                '<a class="sceditor-button" title="Restore" onclick="MyBBEditor.insert(restitem);">',
                    '<div style="background-image: url(images/rest.png); opacity: 1; cursor: pointer;">Restore</div>',
                '</a>'
            ];
            $(restorebut.join('')).appendTo('.sceditor-group:last');    
        }
    },600);
    MyBBEditor.blur(function(e) {
        if ($.trim(MyBBEditor.val())) {
            qae_as();
        }
        else {
            qae_ac();
        }
    });
});
</script>

http://www.tripulse.net
user: test
pass: supertest
You didn't follow the tutorial correctly. For example:
. this wysiwygEditorInsertHtml
is not a correct syntax at all.
(2015-03-03, 06:58 AM)Destroy666 Wrote: [ -> ]You didn't follow the tutorial correctly. For example:
. this wysiwygEditorInsertHtml
is not a correct syntax at all.

ah! That explains it.

Now the button appears, but when I click it, nothing happens. Did I do something wrong? Is the tutorial false?

EDIT: Is there a way to not show the WYSIWYG version of the bbcode, but just the bbcode?