Tuesday, December 21, 2010

Add button in the WYSIWYG editor



The buttons do the insertion into the body of news, anything.
Doing for themselves, as they should be inserted into the short and full story frame with styles and so on. 



Open:
engine/editor/shortnews.php 

Find:
dle_hide, dle_break, dle_page ",
Replace with:
dle_hide, dle_break, dle_page, dle_mb, dle_mb2 ",

Find:
ed.addButton('dle_page', {
            title : '{$lang['bb_t_p']}',
            image : '{$config['http_home_url']}engine/editor/jscripts/tiny_mce/themes/advanced/img/dle_page.gif',
            onclick : function() {

                var enterURL   = prompt("{$lang['bb_page']}", "1");
                var enterTITLE = prompt("{$lang['bb_page_name']}", "");
                if (enterURL == null) enterURL = "1";
                if (enterTITLE == null) enterTITLE = "";
                ed.execCommand('mceInsertContent',false,"[page="+enterURL+"]"+enterTITLE+"[/page]");
            }
               });
Add below:
///Мини Блок///
ed.addButton('dle_mb', {
title : '{$lang['bb_t_br']}',
image : '{$config['http_home_url']}engine/editor/jscripts/tiny_mce/themes/advanced/img/mb.gif',
onclick : function() {

ed.execCommand('mceInsertContent',false,'<table width="50%" border="1" align="center" cellpadding="5" cellspacing="5"><tr><td bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td><td bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td></tr><tr><td bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td><td bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td></tr></table>');}});
////////////////

///Мини Блок 2///
ed.addButton('dle_mb2', {
title : '{$lang['bb_t_br']}',
image : '{$config['http_home_url']}engine/editor/jscripts/tiny_mce/themes/advanced/img/mb2.gif',
onclick : function() {

ed.execCommand('mceInsertContent',false,'<table width="50%" align="right" cellpadding="5" cellspacing="5"><tr><td bgcolor="#990000">&nbsp;</td><td rowspan="2" bgcolor="#333333">&nbsp;</td><td bgcolor="#990000">&nbsp;</td><td rowspan="2" bgcolor="#333333">&nbsp;</td></tr><tr><td bgcolor="#990000">&nbsp;</td><td bgcolor="#990000">&nbsp;</td></tr></table>');}});
////////////////

That's it! 

* - Pictures of buttons to put on at engine /editor/jscripts/tiny_mce/themes/advanced/img/
* - WARNING! The code must be formatted with no breaks between tags: 



This is wrong:
<table width="50%" border="1" align="center" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#CC9900">&nbsp;</td>
<td bgcolor="#333333">&nbsp;</td>
<td bgcolor="#CC9900">&nbsp;</td>
<td bgcolor="#333333">&nbsp;</td>
</tr>
<tr>
<td height="30" bgcolor="#CC9900">&nbsp;</td>
<td bgcolor="#333333">&nbsp;</td>
<td bgcolor="#CC9900">&nbsp;</td>
<td bgcolor="#333333">&nbsp;</td>
</tr>
</table>

This is correct:
<table width="50%" border="1" align="center" cellpadding="5" cellspacing="5"><tr><td bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td><td bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td></tr><tr><td height="30" bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td><td bgcolor="#CC9900">&nbsp;</td><td bgcolor="#333333">&nbsp;</td></tr></table> 

1 comment: