Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Anno on December 16, 2004, 01:53:52 PM

Title: Enhanced text markup function
Post by: Anno on December 16, 2004, 01:53:52 PM
When one uses the bold, italic and other tags without making a selection first, the cursor is always set outside the tags. This is a bit annoying, since one has the move it back to the right place before being able to write.

The following fixes it:

In /Themes/default/script.js in the function surroundText

search for:
          caretPos.select();

insert before:
          if (lenght==0){
            n = text2.length;
            movedStart = caretPos.moveStart("character", -n);
            movedEnd = caretPos.moveEnd ("character", -n);
}


Title: Re: Cursor position when using markup in IE
Post by: Anno on December 22, 2004, 01:25:39 PM
In addition to this, I modified the function a bit more to ignore the whiespace at the beginning and the end of a selection.

You can test it out here
http://www.fungifun.com/smmarkup/sm.html

The modified function:


function surroundText(text1, text2, textarea)
{
// Can a text range be created?
if (typeof(textarea.caretPos) != "undefined" && textarea.createTextRange){
var caretPos = textarea.caretPos;

//  remove white space at the beginning and end of selection
selection = caretPos.text;
var spacebefore = 0;
var spaceafter = 0;
while (selection.substring(0,1) == ' ') {
selection = selection.substring(1);
spacebefore = spacebefore + 1;
}
while (selection.substring(selection.length-1,selection.length) == ' '){
selection = selection.substring(0,selection.length-1);
spaceafter = spaceafter + 1;
}

            if(spacebefore > 0 ) {
  movedStart = caretPos.moveStart("character", +spacebefore);
}
    if(spaceafter > 0 ) {
            movedEnd = caretPos.moveEnd ("character", -spaceafter);
}

lenght = caretPos.text.length;

caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' '
? text1 + caretPos.text + text2 + ' '
: text1 + caretPos.text + text2;

if (lenght==0){
n = text2.length;
caretPos.moveStart("character", -n);
caretPos.moveEnd ("character", -n);
}
if (lenght > 0){
n = text1.length + text2.length + length;
caretPos.moveStart("character", -n);
}
caretPos.select();
}
//  Mozilla text range wrap.
else if (typeof(textarea.selectionStart) != "undefined")
{
var start =   textarea.selectionStart;
var finish =  textarea.selectionEnd;
var begin =     textarea.value.substr(0, start);
var selection = textarea.value.substr(start, finish - start);
var end = textarea.value.substr(finish);
var newCursorPos = start;
var scrollPos = textarea.scrollTop;

//  remove white space at the beginning and end of selection
var spacebefore = 0;
var spaceafter = 0;
while (selection.substring(0,1) == ' ') {
selection = selection.substring(1);
spacebefore = spacebefore + 1;
}
while (selection.substring(selection.length-1,selection.length) == ' '){
selection = selection.substring(0,selection.length-1);
spaceafter = spaceafter + 1;
}

            if(spaceafter > 0  || spacebefore > 0 ) {
  start = start + spacebefore;
  finish = finish - spaceafter ;
  var begin = textarea.value.substr(0, start);
var selection = textarea.value.substr(start, finish - start);
var end = textarea.value.substr(finish);
var newCursorPos = start;
var scrollPos = textarea.scrollTop;
             }

textarea.value = begin + text1 + selection + text2 + end;

if (textarea.setSelectionRange)
{
if (selection.length == 0)
textarea.setSelectionRange(newCursorPos + text1.length, newCursorPos + text1.length);
else
textarea.setSelectionRange(newCursorPos, newCursorPos + text1.length + selection.length + text2.length);
textarea.focus();
}
textarea.scrollTop = scrollPos;
}
// Just put them on the end, then.
else
{
textarea.value += text1 + text2;
textarea.focus(textarea.value.length - 1);
}
}




Title: Re: Enhanced text markup function
Post by: Jerry on December 23, 2004, 12:14:24 AM
this is neat :), I am going to add it to my forums.
Title: Re: Enhanced text markup function
Post by: [Unknown] on December 23, 2004, 04:43:51 AM
Okay, I've fixed the caret positioning in 1.1 for Internet Explorer.

-[Unknown]
Title: Re: Enhanced text markup function
Post by: Anno on January 01, 2005, 03:54:38 PM
I edited the function, to fix this problem with IE
http://www.simplemachines.org/community/index.php?topic=16970
Title: Re: Enhanced text markup function
Post by: [Unknown] on January 01, 2005, 04:02:34 PM
I fixed it a different way anyway :P.

-[Unknown]
Title: Re: Enhanced text markup function
Post by: Anno on January 01, 2005, 04:52:03 PM
Yes? How?
Title: Re: Enhanced text markup function
Post by: [Unknown] on January 01, 2005, 07:55:41 PM
var caretPos = textarea.caretPos, temp_length = caretPos.text.length;

caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text1 + caretPos.text + text2 + ' ' : text1 + caretPos.text + text2;

if (temp_length == 0)
{
caretPos.moveStart("character", -text2.length);
caretPos.moveEnd("character", -text2.length);
caretPos.select();
}
else
textarea.focus(caretPos);


-[Unknown]
Title: Re: Enhanced text markup function
Post by: Anno on January 02, 2005, 03:45:37 AM
textarea.focus ......nice!