• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 448
  • Last Modified:

Wrapping bbcode around selected text in a textarea

I want a text area to have B, I, U and smilies.  I do not want to use any premade editors like tiny_mce or ckeditor.  

I've been searching forever and haven't found a working example code that will cross between all the browsers.  All the premade editors load slow and you can see the textarea for a second or two before it loads the editor.

How do I do this?  I suck with javascript which is why I'm asking here.

Also, what editor does EE use?
0
deputycheek
Asked:
deputycheek
  • 5
  • 4
1 Solution
 
Slick812Commented:
greetings  deputycheek, , I may or may not be able to help, I am posting because no one else has, , ,
First, I do not really understand what you are asking to do in your question, , I guess it has to do with =  "I want a text area to have Bold, Italic, Underline and smilies", but in your question you have = "bbcode around"   bulletin board code is much different than visual javascript editors like tiny_mce.

There are many visual javascript textarea editors, and they all took alot of time and effort to get to work correctly, you may be better off if you use a lightweight editor like  widgEditor, or you may have to spend time developing your own javascript editor.

Can you give us some more about what the minimum of functioning you might need, although, I probpally do not have the time to do  a full editor.
0
 
deputycheekAuthor Commented:
I have a simple text area.  I would like to click a button, and have bbcode wrapped around the text that is selected in my textarea.  If there is no text selected, then I would like to insert the bbcode at the cursor point.
0
 
Slick812Commented:
OK, ,  You are now only using the "bbcode" as what shows in the textarea,  and you want buttons to place the bbcode (I guess 4 buttons, one for Bold, one for Italic, one for Underline, and one for Smiles).

So, if you have this line in the textarea -

       this is a test

and you click the bold button it will show -

       this is a test


I may can do something for that,  but you have the word  "smilies"  in your question, which is plural, and might mean more than one smilie, this may be more difficult since if there is more than one, some sort of menu or choice needs to be shown.

So if they click the Smilie button the textarea would show -

       this is a test :-)


I will see what I can find, I have done this before, but it is availible in more complete PHP Bulletin Board Classes
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Slick812Commented:
sorry, I did not realize that this messed up EE interface did bbcode, I will try again, maybe It will show in the "code" input

ok I guess not, , so I will have to use alternate way -

So, if you have this line in the textarea -

       this is a test

and you click the bold button it will show as -

       this is a test(b)(/b)

where the ( would be a [
0
 
deputycheekAuthor Commented:
it would be like this...

textarea:

this is a test

then if you click and highlight "is a" in the text area, and then hit the bold button

textarea:

this (b)is a(/b) test

however, if you just clicked the button without highlighting text then:

textarea:

this is a test(b)(/b)


As far as the smilies, I can open up a small popup and when someone clicks on a certain smiley then it will put the code for that smiley in the box at cursor position.
0
 
Slick812Commented:
OK, , Here is some code you can try, it works for me in firefox, don't have time to test in other browsers now

<html><head><title>A JS BBcode tester</title>
<style type="text/css">
.but {border: 1px solid #bbb; margin: 1px; padding: 2px;}
.size1 {width: 440px; height: 140px;}
</style>
<script type="text/javascript">

function addTags(tagB, tagE,  area){
var ta = document.getElementById(area);
// Code for IE
if (document.selection) {
	ta.focus();
	var sel = document.selection.createRange();
	sel.text = tagB + sel.text + tagE;
	} else  {  // Code for Mozilla Firefox
	var start = ta.selectionStart;
	var end = ta.selectionEnd;
	var st = ta.scrollTop;
	var sl = ta.scrollLeft;
	var sel1 = ta.value.substring(start, end);
	sel1 = tagB + sel1 + tagE;
	var len = ta.value.length;
	ta.value =  ta.value.substring(0,start) + sel1 + ta.value.substring(end,len);
	ta.scrollTop = st;
	ta.scrollLeft = sl;
	}
}
</script>  
</head>
<body><h3>JS BBcode tester</h3>
<p> 
<div>Click button to add BB tag -<img class="but" src="bold.gif" title="Bold" onClick="addTags('[b]','[/b]','ta1')"> 
  <img class="but" src="italic.gif" title="Italic" onClick="addTags('[i]','[/i]','ta1')">
  <img class="but" src="under.gif" title="Underline" onClick="addTags('[u]','[/u]','ta1')">
</div>
  <textarea name="ta1" id="ta1" class="size1">This is some TEST text</textarea>
</p>
</body></html>

Open in new window


see if this is something like what you want,

I did not get what you mean when you said -
"I can open up a small popup and when someone clicks on a certain smiley then it will put the code for that smiley in the box at cursor position"


does this mean that I do not have to do code for smilies, that you can do it or is this just telling me what you would like me to do? ? ?
1
 
Slick812Commented:
Oh here is some simple images -
bold.gif
italic.gif
under.gif
0
 
deputycheekAuthor Commented:
Thanks for the code but do you mind commenting it a bit so i can learn from it?  I'll try it out this evening. Thanks again
0
 
deputycheekAuthor Commented:
That code works perfect.  Thanks so much
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now