Solved

Wrapping bbcode around selected text in a textarea

Posted on 2012-04-03
9
382 Views
Last Modified: 2012-04-08
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
Comment
Question by:deputycheek
  • 5
  • 4
9 Comments
 
LVL 33

Expert Comment

by:Slick812
ID: 37820336
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
 

Author Comment

by:deputycheek
ID: 37820711
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
 
LVL 33

Expert Comment

by:Slick812
ID: 37821331
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
 
LVL 33

Expert Comment

by:Slick812
ID: 37821340
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:deputycheek
ID: 37821551
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
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
ID: 37821586
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? ? ?
0
 
LVL 33

Expert Comment

by:Slick812
ID: 37821595
Oh here is some simple images -
bold.gif
italic.gif
under.gif
0
 

Author Comment

by:deputycheek
ID: 37821866
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
 

Author Closing Comment

by:deputycheek
ID: 37822371
That code works perfect.  Thanks so much
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now