Please login or register.

Login with username, password and session length
Advanced search  

News:

You need/want an older version of sNews ? Download an older/unsupported version here.

Author Topic: [MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)  (Read 5217 times)

alexanderpas

  • Newbie
  • *
  • Karma: 0
  • Posts: 9

Port for 1.6 of 1.5 MOD

all documentation is originally written by keyrocks
Mod originally by keyrocks (here) (link updated Aug.11.08)

Adding new tag-set generator functions to the article textarea editor panels in sNews 1.5 is a relatively easy thing to do. For each new generator, there are only two steps in the snews.php file. One - add a link to create the button in function form_articles and... Two - add the generator script to function tag(tag).

In this example, we will add three new tag buttons to generate three CSS tag-sets: for divison ID, division class and span class. We begin by opening your snews.php file in your "good" text editor.

Step One - Buttons: Search for html_input('button', 'include',. And, below the echo '</p>'; string (under the last html_input string), insert the following:
Code: [Select]
// -------------- css tag-insert buttons test -------------------------
echo '<p>';        // identifier, doesn't affect display                // this gets displayed in both tags
echo html_input('button', 'divid', '', 'Div ID', '', 'button', 'onclick="tag(\'divid\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'divclass', '', 'Div Class', '', 'button', 'onclick="tag(\'divclass\')"', '', '', '', '', '', '', '', '');
echo html_input('button', 'spanclass', '', 'Span Class', '', 'button', 'onclick="tag(\'spanclass\')"', '', '', '', '', '', '', '', '');
echo '</p>';
// ---------------------------------------------------------------------
This gives you a new row of 3 buttons for the 3 new tag-insert functions.

Step Two - Generators: Next... scroll down to the bottom of the snews.php file to locate the start of function tag(tag) and under these lines:
Code: [Select]
// basic html textarea editor
function tag(tag) {
var src = document.getElementById('txt');
     var start, end, url, alt, title='';
     switch(tag) {
     case 'break': start = '[break]'; end = ''; break;
insert the following:
Code: [Select]
// ---- css tag generators -----------------------------------------------------
case 'divid':
    url = prompt("<?php echo 'Enter Division ID Name'?>", "");
if(url != null) { start = "<div id=\""+url+"\">"; end = "</div>"; } else { start = ""; end = ""; }
break;
case 'divclass':
    url = prompt("<?php echo 'Enter Division Class Name'?>", "");
if(url != null) { start = "<div class=\""+url+"\">"; end = "</div>"; } else { start = ""; end = ""; }
break;
case 'spanclass':
    url = prompt("<?php echo 'Enter Span Class Name'?>", "");
if(url != null) { start = "<span class=\""+url+"\">"; end = "</span>"; } else { start = ""; end = ""; }
break;
// ---- end of css tag generators ----------------------------------------------
This contains the three tag generators that go with the three buttons. Save the file and try out your new tag-insert buttons.
These were created by simply cloning the img button string and its related generator script and making the required modifications to create the new tag-set generators. If you spend a bit of time looking them over, you will see few places where changes need to be made to create new tag-set generators.

How they work:These work the same way the link and image tag generators work - when you click the button you get a little Prompt Panelthat asks you to insert the name of the division or span class, and generates the tag-set in the textarea. You will need to create a list of the actual CSS tag-names you want to be able to use in your articles. It is not practical to create buttons for every tag because the css stylesheet file uses different class names depending on which template you happen to be using. Once you create the list of tag names you want to make use of, you can also add them into the Admin article panel below the buttons in one of several ways. In sNews fashion... we leave the rest up to you. :)
« Last Edit: August 11, 2008, 02:19:41 pm by Keyrocks »
Logged

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)
« Reply #1 on: May 17, 2007, 01:48:12 am »

Quote from: alexanderpas
Adding new tag-set generator functions to the article textarea editor panels in sNews 1.5 is a relatively easy thing to do.
Might want to change this to 1.6 (it's the first sentence in the first paragraph) ;)

Good job on the port :cool:
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)
« Reply #2 on: May 17, 2007, 02:53:28 am »

Quote from: piXelatedEmpire
Quote from: alexanderpas
Adding new tag-set generator functions to the article textarea editor panels in sNews 1.5 is a relatively easy thing to do.
Might want to change this to 1.6 (it's the first sentence in the first paragraph) ;)
Good job on the port :cool:
It says 1.5 because he didn't write it... he basically applied my original mod to 1.6 and re-pasted it here. :)
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)
« Reply #3 on: May 17, 2007, 05:50:16 am »

I'm aware of that, I'm just saying for clarity ;)
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future

maxiso

  • Newbie
  • *
  • Karma: 0
  • Posts: 9
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)
« Reply #4 on: May 17, 2007, 12:23:06 pm »

I'm not sure but i think he did apply some minor changes to this mod..

originally:    

Quote
else if(tag == 'spanclass'){
            var url = prompt("", "");
            if(url != null) { start = ""; end = ""; } else { start = ""; end = ""; }
            }
into

Quote
case 'spanclass':
                url = prompt("", "");
            if(url != null) { start = ""; end = ""; } else { start = ""; end = ""; }
        break;
But correct me if i'm wrong  :rolleyes:
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6020
  • Semantically Challenged
    • snews.ca
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)
« Reply #5 on: May 17, 2007, 03:34:59 pm »

@ maxiso - you are not wrong.
All of the else if statement groups in 1.5.31 have been converted to case statements in 1.6. Actually, this makes it easier to create custom generators... the new strings are cleaner.
As an example, the generator for justified text in 1.5.31 would be:
Quote
// Justified paragraph tags
else if(tag == 'justify'){ start = "

"; end = "

";}
and we accomplish the same in 1.6 with:
Quote
case 'justify': start = "

"; end = "

"; break;
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

maxiso

  • Newbie
  • *
  • Karma: 0
  • Posts: 9
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)
« Reply #6 on: May 17, 2007, 06:48:14 pm »

Thank keyrocks.

I must say it's not only a lot cleaner it's also ideal for PHPnewbs to finally understand things a lot faster. So mayor thumbs up for 1.6.  ;)
Logged

piXelatedEmpire

  • MIA
  • ULTIMATE member
  • ******
  • Karma: 37
  • Posts: 1401
  • currently MIA
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.6)
« Reply #7 on: June 11, 2007, 08:18:07 am »

I've updated this MOD slightly by replacing the hardcoded JavaScript prompt's with language variables.

Step One - Buttons:
Same as first post ;)

Step Two - Generators:
Near the bottom of snews.php file find:
Code: [Select]
case 'break': start = '[break]'; end = ''; break;and insert the following:
Code: [Select]
// ---- css tag generators -----------------------------------------------------
case 'divid':
                url = prompt("", "");
if(url != null) { start = "
"; end = "
"; } else { start = ""; end = ""; }
break;
case 'divclass':
                url = prompt("", "");
if(url != null) { start = "
"; end = "
"; } else { start = ""; end = ""; }
break;
case 'spanclass':
                url = prompt("", "");
if(url != null) { start = ""; end = ""; } else { start = ""; end = ""; }
break;
// ---- end of css tag generators ----------------------------------------------
Step Three - Language Variables:
Find:
Code: [Select]
$l['link_title']and below it add:
Code: [Select]
$l['div_id'] = 'Enter Division ID Name';
$l['div_class'] = 'Enter Division Class Name';
$l['span_class'] = 'Enter Span Class Name';
Obviously you can change the text within these variables to whatever you like :)
Logged
my apologies to the sNews crew, but I will be MIA for the forseeable future