Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2 3

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

Keyrocks

  • Doug
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 451
  • Posts: 6262
  • Semantically Challenged
    • snews.ca

This applies to both 1.5 and 1.6 versions of sNews.
(updated: August 11.08)

Adding new tag-set generator functions to the article textarea editor panels in sNews 1.5 (and 1.6) 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:

For sNews 1.5:
The Editor buttons section of script is within the // ARTICLES FORM function. Search in your snews.php file  for html_input('button', 'include', ... And, below the echo '</p>'; string (under the last html_input string), insert the following. It will create a new row of buttons under the existing row of buttons:
Code: [Select]
// -------------- css tag-insert buttons test -------------------------
echo '<p>';        // identifier, doesn't affect display                // this gets displayed in both tags
html_input('button', 'divid', '', 'Div ID', '', 'button', 'onclick="tag(\'divid\')"', '', '', '', '', '', '', '', '');
html_input('button', 'divclass', '', 'Div Class', '', 'button', 'onclick="tag(\'divclass\')"', '', '', '', '', '', '', '', '');
html_input('button', 'spanclass', '', 'Span Class', '', 'button', 'onclick="tag(\'spanclass\')"', '', '', '', '', '', '', '', '');
echo '</p>';
// ---------------------------------------------------------------------

For sNews 1.6:
The Editor buttons section of script is still within the // ARTICLES FORM function but the button strings are all now prefixed with echo .Search in your snews.php file  for echo html_input('button', 'include', ... And, below the echo '</p>'; string (under the last html_input string), insert the following. It will create a new row of buttons under the existing row of buttons:
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 new row gives you the 3 new tag-insert buttons.

Step Two - Generators: Next... scroll down to the bottom of the snews.php file to locate the start of function tag(tag). The script inside this function was completely revised in sNews 1.6 so we'll used different modifications in each case again.

For sNews 1.5: - under these lines:
Code: [Select]
// basic html textarea editor
function tag(tag) {
var src = document.getElementById("txt");
if(tag == 'break'){ start = "[break]"; end = "";}
if(tag == 'br'){ start = ""; end = "";}

insert the following:
Code: [Select]
// ---- css tag generators -----------------------------------------------------
else if(tag == 'divid'){
    var url = prompt("<?php echo 'Enter Division ID Name'?>", "");
if(url != null) { start = "<div id=\""+url+"\">"; end = "</div>"; } else { start = ""; end = ""; }
}
else if(tag == 'divclass'){
    var url = prompt("<?php echo 'Enter Division Class Name'?>", "");
if(url != null) { start = "<div class=\""+url+"\">"; end = "</div>"; } else { start = ""; end = ""; }
}
else if(tag == 'spanclass'){
    var url = prompt("<?php echo 'Enter Span Class Name'?>", "");
if(url != null) { start = "<span class=\""+url+"\">"; end = "</span>"; } else { start = ""; end = ""; }
}
// ---- end of css tag generators ----------------------------------------------

For sNews 1.6: - under this section:
Code: [Select]
// basic html textarea editor - 1.6.0 - completely revised, else-if strings replaced with case statements.
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'?>", '');
start = url !=null ? '<div id="'+url+'">' : '';
end = '</div>';
break;

case 'divclass';
url = prompt("<?php echo 'Enter Division Class Name'?>", '');
start = url !=null ? '<div class="'+url+'">' : '';
end = '</div>';
break;

case 'spanclass';
url = prompt("<?php echo 'Enter Span Class Name'?>", '');
start = url !=null ? '<span class="'+url+'">' : '';
end = '</span>';
break;
// ---- end of css tag generators ----------------------------------------------

In both cases, this new section (containing the 3 tag generators) creates the 3 functioning Editor 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 the 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, 03:07:55 PM by Keyrocks »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Mika

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 9
  • Posts: 1408
    • http://www.ni5ni6.com/
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #1 on: November 20, 2006, 11:08:43 PM »

:D that's the spirit.

I was thinking of expanding button behaviour with a drop down menu (as suggested) but that would include separate(?) stylesheet made just for this purpose... but your solution is pretty nice as well :)
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Wim van Zijl

  • Newbie
  • *
  • Karma: 0
  • Posts: 39
    • http://iwonttelluntillitsdone.com
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #2 on: November 20, 2006, 11:16:46 PM »

Mika, Hold that thought.
wouldn't it be possible to have the drop down add only the class or ID value behind it? maybe it's possible to read those out of a css file, otherwise we need to declare them in a seperate variable? it could still be stylesheet dependable (ie, adjustable by user)
Logged
sessionmedia poorly chosen domainname, my playground
excercise!

Keyrocks

  • Doug
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 451
  • Posts: 6262
  • Semantically Challenged
    • snews.ca
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #3 on: November 20, 2006, 11:24:44 PM »

Quote from: luchtkracht
Mika, Hold that thought.
wouldn't it be possible to have the drop down add only the class or ID value behind it? maybe it's possible to read those out of a css file, otherwise we need to declare them in a seperate variable? it could still be stylesheet dependable (ie, adjustable by user)
I may have a bit of a mental block... but it seems to me you want to have your list of css styles generated automatically based on some way of reading what happens to be available within a given stylesheet... since stylesheets vary from template to template. If so, I don't think that's possible in a simple way by any means. Unless... we had another "settings" panel where you could input all your styles and have them saved into another table in the database... and then you' d need new functions that query the new dbase table for the information that is there and display it so you can choose from it....

Here's another thought... Mika... if you're still awake yet... join in some more. Just thinking how we're using the little prompt box that prompts you to insert the css style name... well... could we not add the var alt=prompt string back in... and have a drop-down in the prompt panel that let's us choose a style-name to insert into the tag-set... in the same way we now insert the alt or title in the img or link tag-sets? I have to break off for a while... get supper going... and eat it... back in an hour or two.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Mika

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 9
  • Posts: 1408
    • http://www.ni5ni6.com/
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #4 on: November 20, 2006, 11:42:09 PM »

I was thinking of new generic stylesheet instead of another db call ;)

here's an example:
Quote
function css_generator($variable) {
$css = array();
// dots and # are for separation purposes (classes and IDs) but this could be done differently as well
$css['text'] ='.text';
$css['img'] ='.img';
$css['example'] ='.example';
$css['text'] ='#text';
$css['img'] ='#img';
$css['example'] ='#example';
//...etc
return $css[$variable];
}
and the css stylesheet would look like:
Quote
/*classes*/
.text {your-style}
.img {your-style}
.example {your-style}
/*IDs*/
#text {your-style}
#img {your-style}
#example {your-style}
so, all we should do is to create some styles for text editor, fill the function css_generator() accordingly and another snippet would automatically create dropdown along with your buttons..

any more ideas on this?
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Mika

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 9
  • Posts: 1408
    • http://www.ni5ni6.com/
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #5 on: November 20, 2006, 11:47:27 PM »

sorry key, it's midnight over here - brainstorming is hard to achieve when living in different time zones :D

btw, bon appétit :)
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Wim van Zijl

  • Newbie
  • *
  • Karma: 0
  • Posts: 39
    • http://iwonttelluntillitsdone.com
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #6 on: November 20, 2006, 11:48:45 PM »

Ah ok I catch your idea.
that would mean an additional stylesheet and addition of variables when needing more styles than default, but it should be working fine.
i think for 99% it would be sufficient.

Keyrocks solution is working fine, so next step is css selectors
man I envy you guys. where does the code rollout?

for now. i have to sleep. long day tomorrow
Logged
sessionmedia poorly chosen domainname, my playground
excercise!

Keyrocks

  • Doug
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 451
  • Posts: 6262
  • Semantically Challenged
    • snews.ca
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #7 on: November 21, 2006, 02:46:21 AM »

Quote from: Mika
I was thinking of new generic stylesheet instead of another db call...
While you guys were taking time to re-charge your energy cells (hope you slept well with coding solutions dancing in your heads), I did a bit of googling and thinking and... came across a link to a page on my snews.ca site... and then a bright light went off... I had already made use of a second stylesheet.css file with custom styles only used for article content in the textarea panel. So, yes, I see where we're going here.

And then I came across this bit (buried) in our Mods and Addons Forum at http://www.solucija.com/forum/viewtopic.php?pid=10956. It is actually a jscript file provided by fellow sNoozer benjer back on July 24/06 and it's all about what we are attempting to do here. (I missed it as it was posted while I was away) Mika's note was interesting... "Nice! Something similar will be done in 1.5..." Interesting how... at different points in time... a few brains from such distance points around the globe end up focusing their 'wavelengths' so closely together.

Will continue this later...
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Mika

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 9
  • Posts: 1408
    • http://www.ni5ni6.com/
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #8 on: November 21, 2006, 07:43:19 AM »

hehe... I remember that conversation... this might be interesting - Luka had showed me his simplified solution (under development at the time) just about a day or two before benjer posted his JS
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Wim van Zijl

  • Newbie
  • *
  • Karma: 0
  • Posts: 39
    • http://iwonttelluntillitsdone.com
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #9 on: November 21, 2006, 11:51:30 PM »

:D
Guys,
I have implemented Keys'buttons yesterday and I am please to say this is almost there,
I have been tinkering with the thought today and i think the dropdown box could even be used when  inserted in keyrocks' solution's popup.
you's then get a different popup for id's & classes.

I have inserted some screen examples  from using keyrocks example:
the first showing how to use, the second the result of an applied ID style (box, red, float left 150px)

« Last Edit: November 02, 2007, 04:10:00 PM by Keyrocks »
Logged
sessionmedia poorly chosen domainname, my playground
excercise!

Keyrocks

  • Doug
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 451
  • Posts: 6262
  • Semantically Challenged
    • snews.ca
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #10 on: November 22, 2006, 04:22:24 AM »

~luchtkracht - my apologies... I've been busy working on some other stuff for a while, so glad to see you are tinkering some more - tinkering is the mother of invention. When you take a look at some of the other tag generators (the ones that are in there by default)... like the one for generating a link... you get 2 prompt panels, one after the other. The image one does that too... one for the image name and one for the alt text. So... I was thinking that setting these up with double prompts might be the way to go... one for the style-tags (as we have now) and the other for the actual style-name. I just haven't figured out how one would be able to put a drop-down to work within the prompt panel.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

Patric Ahlqvist

  • Nobodys perfect, but Im pretty effing close
  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 65
  • Posts: 4957
  • “I'm a self-made man and worships my creator.”
    • p-ahlqvist.com
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #11 on: November 22, 2006, 07:07:40 AM »

Now this is a really good idea, Key's. Sorry for not noticeing this before... Really good thingy I want it ;). And going from this to actually having predecided div and class names isn't that hard, I ask you ? Like I have a admin comment div on my 1.5 sites, could that be integrated ?
Logged
My sNews site
"It's only dead fish that goes with the flow... "
Updated, online again - Free designs

Mika

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 9
  • Posts: 1408
    • http://www.ni5ni6.com/
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #12 on: November 22, 2006, 11:18:42 AM »

I've set up a working demo following the guidelines from our chatter: http://www.ni5ni6.com/snews-mods/snews-article-html-editor/
tell me what you think of it

NOTE: there's no live preview due to possible XSS inputs, but you'll get the idea ;)
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version

Wim van Zijl

  • Newbie
  • *
  • Karma: 0
  • Posts: 39
    • http://iwonttelluntillitsdone.com
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #13 on: November 22, 2006, 12:11:12 PM »

Mika, I have tried your demo,
looks great and works quite nice too,
can i make a couple of suggestions regarding the workflow and ui?

I would place the "div" and "span" buttons right next to the dropdown, and the submit next to that., maybe the submit action can be done by pressing the "div" or "span" button right away?

I also suggest the option of being able to apply both "id" and "class" selectors to a new div.
the way I use extensive stylesheets often includes applying both an id and a class to a selection, this reduces the amount of selectors you have to make in your stylesheet, and thus keeps everythng nice and small.

in the css example below  I declare the following:

an ID named "leftbox": this only creates a float left,
a class named "red" which controls appearance colors size etc,
a class named "white" which controls appearance colors size etc.


 
Code: [Select]
#leftbox
{
float:left;
margin:2px;
padding:4px;
}

.red
{
color:#fff;
font-size:0.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#f03;
width:150px;
border:solid 1px #ff0;

}

.white
{
color:#f03;
font-size:0.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#fff;
width:150px;
border:solid 1px;

}
when applied  this wil result in html code as follows:

Code: [Select]
content for a white leftbox
The advantage is the added diversity in the appearance of selectors with the ID value "leftbox"
I could reuse the ID "leftbox" on a different page but apply the class "red" to it  to make the appearance different.
 
When looking at your form demo, I would seperate the drop down into two; one for "id" values" and one for "class" values.

In keyrocks's example, I would serve the user two popups when inserting a "div", one for "id" and one for "class" which both could be ignored (the cancel button would still insert the "div" but not add the "class" or "id")

ps. my compliments to all of you for contributing so fast! I really have to dive into php coding myself 'cause i'm starting to feel guilty.  if any of you ever need advice on css design, feel free to ask.. that's always been my thing..)
 :|
Logged
sessionmedia poorly chosen domainname, my playground
excercise!

Mika

  • Administrator
  • ULTIMATE member
  • ******
  • Karma: 9
  • Posts: 1408
    • http://www.ni5ni6.com/
[MOD] Add CSS Tag Buttons for article textarea editor (sNews 1.5)
« Reply #14 on: November 22, 2006, 12:41:54 PM »

Let's start with ranting :D

ID is usually used to ensure uniqueness needed to perform some sort of dynamic behaviour (JavaScript for instance) or to create/identify CSS style container as a part of uniform website layout (#header, #left, #right, #footer etc..).
Mixing those two [
] might be a dubious idea (at least that's the way I see it), unless used like [
].
Of course, Luka's JavaScript can be expanded to perform ID selections as well, but I'm not convinced that it's a good idea - what if you define #style1 and .style2 with opposite CSS attributes? Will they eventually make a (validation/displaying) mess out of the code?

NOTE: your example should be done with classes because you cannot use CSS ID selector more than once in the whole document.
Logged
http://www.ni5ni6.com/ - Tutorials, Mods and How-To's about sNews CMS
sNews 1.6 Developers Edition - commented sNews 1.6 version
Pages: [1] 2 3