?
Solved

Wrapping bbcode around selected text in a textarea

Posted on 2012-04-03
9
Medium Priority
?
426 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 34

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 34

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
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!

 
LVL 34

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
 

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 34

Accepted Solution

by:
Slick812 earned 2000 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? ? ?
1
 
LVL 34

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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 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