Solved

Wrapping bbcode around selected text in a textarea

Posted on 2012-04-03
9
390 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 look for a specific file type in a local or remote server directory using PHP.

895 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

11 Experts available now in Live!

Get 1:1 Help Now