That's a behavior common to all html textareas. You can use JavaScript to change it, though.

http://www.webdeveloper.com/forum/showthread.php?s=&threadid=32317

Again my saviour :)

A question: how would I use that piece of code? I suppose somewhere in main.php, but I'm not sure of where...

Could you tell me?

Thanks (again, again, again...)

Francesco

Do you want to get this behavior in the backoffice when you're writing posts, or in the comment form? The former will require putting the code into a couple of files in the admin folder, the latter will require editing files in the skins folder.

I want it work in the backoffice textarea only. I don't care about comments, since they are short phrases not caring about grammar :)

If you would guide me through tweaking process, I'll sign you up for another free beer in Piazza di Spagna :)

Bye4now,

Fra

This post contained some buggy code. Skip to the [url=http://forums.b2evolution.net//viewtopic.php?p=27435#27435]fixed version[/url].

Nothing to do :\

I did what you told me, and all I get when I press tab key is something like this (watch the "end" on the left):

http://www.silenzi.com/end_error.jpg

Hints?

Oops, my mistake. You've got an extra </script> tag at the end of the code I gave you. Remove that so that

</script>
// End -->
</script>

becomes

// End -->
</script>

That will get rid of the // End -->, but if you still don't get the functionality, then we probably need to move the first chunk of code to inside the head tag. I don't know enough about JavaScript to be able to tell when some code has to be in the head to work. The author of this code put the first part in the head, so it will probably have to end up there. So, if fixing that error above doesn't make the tab key work correctly, then let me know and I'll help you get it inside the head tags.

Unfortunately, you're right :| It does remove the "end", but doesn't still take any effect :(

So, if you can, tell me how to insert code chunk in the header.

Thank you!

Ok, I was afraid of that. First, get rid of the first chunk of code that we added (the big one). Leave the other one. Now open up /admin/_menutop.php and find this code:

<script type="text/javascript" src="styleswitcher.js"></script>

Right after that add:

<script type="text/javascript">
function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function replaceSelection (input, replaceString) {
   if (input.setSelectionRange) {
      var selectionStart = input.selectionStart;
      var selectionEnd = input.selectionEnd;
      input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
   
      if (selectionStart != selectionEnd){
         setSelectionRange(input, selectionStart, selectionStart +    replaceString.length);
      }else{
         setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
      }

   }else if (document.selection) {
      var range = document.selection.createRange();

      if (range.parentElement() == input) {
         var isCollapsed = range.text == '';
         range.text = replaceString;

          if (!isCollapsed)  {
            range.moveStart('character', -replaceString.length);
            range.select();
         }
      }
   }
}


// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
   if(navigator.userAgent.match("Gecko")){
      c=e.which;
   }else{
      c=e.keyCode;
   }
   if(c==9){
      replaceSelection(item,String.fromCharCode(9));
      setTimeout("document.getElementById('"+item.id+"').focus();",0);   
      return false;
   }
         
}
</script>

And this time we do want to include the starting and closing <script> tags.

Uhm, what I get is to...get tab key disabled. When I press it, I get nothing: not switching through links, nor making "his work" of creating a big space.

I left the short one piece of code in edit_form and added the big one in menutop.

What's wrong?

Ok, I found my mistake. I tested this on my site, so I know it works. The second bit of code needed to go into textarea tag, not the form tag. Sorry about that. It also turns out that the top Javascript code can go in the body rather than the head. That's better since it will only load on the edit form page and not on the other backoffice pages. The next post below will have the correct instructions. The best thing is to undo all your changes so far (or restore your backed up files if you did that) and start over with those instructions.

If you want the textarea in the backoffice to respond to the tab key by putting a tab in the text (rather than selecting another button), then here's what you need to do:

Open up /admin/_edit_form.php and find this line:

        // End -->
</script>

Right before that, put

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function replaceSelection (input, replaceString) {
   if (input.setSelectionRange) {
      var selectionStart = input.selectionStart;
      var selectionEnd = input.selectionEnd;
      input.value = input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd);
   
      if (selectionStart != selectionEnd){
         setSelectionRange(input, selectionStart, selectionStart +    replaceString.length);
      }else{
         setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length);
      }

   }else if (document.selection) {
      var range = document.selection.createRange();

      if (range.parentElement() == input) {
         var isCollapsed = range.text == '';
         range.text = replaceString;

          if (!isCollapsed)  {
            range.moveStart('character', -replaceString.length);
            range.select();
         }
      }
   }
}


// We are going to catch the TAB key so that we can use it, Hooray!
function catchTab(item,e){
   if(navigator.userAgent.match("Gecko")){
      c=e.which;
   }else{
      c=e.keyCode;
   }
   if(c==9){
      replaceSelection(item,String.fromCharCode(9));
      setTimeout("document.getElementById('"+item.id+"').focus();",0);   
      return false;
   }
         
}

Then, in the same file, find

<textarea rows="16" cols="40" name="content" id="content" tabindex="4">

and change it to:

<textarea rows="16" cols="40" name="content" id="content" tabindex="4" onkeydown="return catchTab(this,event)">

Source:
http://www.webdeveloper.com/forum/showthread.php?s=&threadid=32317

Thank you mr., but the problem remains :\
It works on the textarea, it does tab. But it doesn't save text formatted this way! I mean, when I go publish the post on which I applied several "tabs", they simply aren't displayed on the blog! It aligns text all on the left, just as I wouldn't pressed "tab"! What else should I switch?

I didn't think about how the tabs would be displayed. That's another matter altogether. I did some tests here:

http://www.brendoman.com/dev.php

In the first test, the tabs don't show, but if you look at the page source, they're there. Html just ignores them. The second test uses pre tags. Then the tabs display. That's probably going to be the best way to get this to work. You can edit the pre style in your css to make it match the rest of your page as well as you can.

Yeah, the whole tab idea in the edit box just doesn't work because html ignores extra spaces. It would be easier to lookup how to indent paragraphs using css. The pre tag could get you into some other troubles if you have long urls or other text that could extend across your sidebar and off the page.

Good point. You've got to insert your own line breaks because text in a pre tag won't wrap. Francesco, what is it that you're adding? Indented first line of a paragraph? Or is it more invovled than that? If you just need to indent, you could put this at the beginning of your paragraph:

    

That will insert four spaces that html will not ignore.

Or add a whitespace:pre to the CSS file for the blog body text selector (which for me is .bText)

Hope this helps.

-stk :D

PS - One could accomplish something similar by adding a toolbar button that adds the ISO-8859-1 entity code for "tab", which (if I'm not mistaken, is &.#09;) - minus the red dot. Of course, you'll see &.#09; in your blog entry in the textarea in the back office, rather than an actual tab space, but that's the only drawback. (Just a thought).

PPS - If you want to indent paragraphs, one can do this with INLINE css <p style="text-indent:5px"> blah ... blah ... blah </p> or by modifying (or adding) a .bText p selector with { text-indent:5px; } as the rule.

PPS - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; accomplishes something similar and can also be coded to a quick toolbar button.

Lots of ways to skin a cat, I guess.

Yes, the new-button idea is not bad, not bad at all!
I think I'll try this way, since I need to make an indent.
Thank you anyway to Personmen, for his kindness and patience in following and helping me! Really thank you man!

No problem. Sorry to lead you on such a fruitless chase. I should have thought through the problem and what you really needed before diving in with a solution. If you just want to indent every paragraph, then the CSS solution would be the best one.

I must reconsider what I've said; none of that solution worked: not 5 spaces, nor &.#09; (without point). None of them are recognized and applied by b2.

Any other suggestion? Why it doesn't apply five spaces added manually, but it applies only one space dividing words?

Html just ignores a string of more than one space. You have two options, and both will work pretty well. Use 1. if you want all paragraphs to be intented automatically, without you needing to do anything when you're writing the post.

Use two if you want more control. You can keep the hack we did for using the tab key and add whatever tabs you want in a post.

1.
Open up /skins/leaf/01style0101.css and add this at the very bottom:

.storycontent {
text-indent: 3em;
}

2.
Open up /skins/leaf/01style0101.css and add this at the very bottom:

.storycontent {
white-space: pre;
}