pacumming
asked on
Is there any way to highlight text in TextArea, Div, Iframe and know what is highlighted? Javascript, ASP, VBScript
Is there any way to highlight text in TextArea, Div, Iframe and know what is highlighted? Javascript, ASP, VBScript
We want to be able to present a user (without using FrontPage which we have) with a textbox/Div,Iframe.
In this box they will either be able to enter text or edit text.
We do not know of any way where we could highlight text in the box and then press a button that would perhaps put HTML tags around it.
We have found a way to type text and then press a button called "Bold" that will bold the entire entry in the textbox, but not selected text.
Any ideas would be helpful.
Yes, we could use FrontPage (that we own), but we have a very simple application where the user would bold a few lines or underline them.
Thanks, Peter
We want to be able to present a user (without using FrontPage which we have) with a textbox/Div,Iframe.
In this box they will either be able to enter text or edit text.
We do not know of any way where we could highlight text in the box and then press a button that would perhaps put HTML tags around it.
We have found a way to type text and then press a button called "Bold" that will bold the entire entry in the textbox, but not selected text.
Any ideas would be helpful.
Yes, we could use FrontPage (that we own), but we have a very simple application where the user would bold a few lines or underline them.
Thanks, Peter
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
hopefully you'd use this with some content management system that can ensure that this submission will not break your pages
Also, if you're on IE you can use the design mode which lets you do formatting, adding inserting text as if you're using those tools like frontpage or whatever.
If this is only for content management scnenrio where you have control over the browser they're using, etc... then you might want to use that feature
read about it here
http://msdn.microsoft.com/workshop/author/dhtml/edit/dhtmledit.asp
If this is only for content management scnenrio where you have control over the browser they're using, etc... then you might want to use that feature
read about it here
http://msdn.microsoft.com/workshop/author/dhtml/edit/dhtmledit.asp
ASKER
WE will look at the DHTML component. We do not have IE 5.5 so we cannot use the "editable" function.
We have FrontPage but users have found it somewhat cumbersome since our pages uses DIV's and Iframes so when they click on the IE Edit button that launched FrontPage it will not bring up the page they desire.
I guess the question really is: Is there a way a user can highlight select text in a paragraph using their mouse AND then have Javascript know what is highlighted so it can place an HTML tag before and after what is highlightd (after a button on a page is clicked)?
We think we have a way using some Javascript methods that allow you to search for text and then can position the cursor where you want it BUT we really rather use a highlighting method as you might in Word.
Trying to avoid activex controls. We did find a way to do this using the following ActiveX for those that are interested though (however we will not be using this since we want to avoid ActiveX controls)
<html>
<head>
<meta http-equiv="Content-Langua ge" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor. Document">
<title>New Page 2</title>
</head>
<script language="vbscript">
Sub OpenURL()
oEditFrame.LoadURL Trim(document.all.textboxU RL.value)
End Sub
Sub UpdateHiddenTextbox()
document.all.oTextarea.val ue = oEditFrame.DocumentHTML
End Sub
</script>
<body>
<!-- <form id="frmEditHTML" name="frmEditHTML"> -->
<p>
<OBJECT id="oEditFrame" style="LEFT: 0px; TOP: 0px" name="oEditFrame" classid="clsid:2D360200-FF F5-11D1-8D 03-00A0C95 9BC0A"
width=100% height=200 VIEWASTEXT>
<PARAM NAME="ActivateApplets" VALUE="0">
<PARAM NAME="ActivateActiveXContr ols" VALUE="0">
<PARAM NAME="ActivateDTCs" VALUE="-1">
<PARAM NAME="ShowDetails" VALUE="0">
<PARAM NAME="ShowBorders" VALUE="0">
<PARAM NAME="Appearance" VALUE="1">
<PARAM NAME="Scrollbars" VALUE="-1">
<PARAM NAME="ScrollbarAppearance" VALUE="1">
<PARAM NAME="SourceCodePreservati on" VALUE="-1">
<PARAM NAME="AbsoluteDropMode" VALUE="0">
<PARAM NAME="SnapToGrid" VALUE="0">
<PARAM NAME="SnapToGridX" VALUE="50">
<PARAM NAME="SnapToGridY" VALUE="50">
<PARAM NAME="BrowseMode" VALUE="0">
<PARAM NAME="UseDivOnCarriageRetu rn" VALUE="0">
</OBJECT>
</p>
<p><input type="text" size="78" name="textboxURL" value="">
<input type="button" value="Open" name="buttonOpen" onclick="OpenURL()">
<input type="button" value="Submit Changes (Not Active Yet)" name="buttonSubmit" onclick="UpdateHiddenTextb ox()"></p>
<p>
<br>
<center><h3>For demo find your desired page and then click the open button</h3></center>
<br>
<b>Highlight text you wish to change</b><br>
<b>Bold</b> <i>Control + B</i><br>
<b>Italic</b> <i>Contr ol + I</i><br>
<b>Underline</b> <i>Co ntrol + U</i><br>
<b>Add a hyperlink</b> <i>Contr ol + L</i><br>
<br>
<b>Line Break</b> <i>Shift + Enter</i><br>
<b>New Paragraph</b> <i>Ente r</i><br>
<p>hidden textarea</p>
<p><textarea id="oTextarea" name="oTextarea" rows="8" cols="75"></textarea></p>
<!-- </form> -->
</body>
</html>
__________________________ ____
We are playing around with some other JavaScript functions at the moment.
Thanks, Peter
We have FrontPage but users have found it somewhat cumbersome since our pages uses DIV's and Iframes so when they click on the IE Edit button that launched FrontPage it will not bring up the page they desire.
I guess the question really is: Is there a way a user can highlight select text in a paragraph using their mouse AND then have Javascript know what is highlighted so it can place an HTML tag before and after what is highlightd (after a button on a page is clicked)?
We think we have a way using some Javascript methods that allow you to search for text and then can position the cursor where you want it BUT we really rather use a highlighting method as you might in Word.
Trying to avoid activex controls. We did find a way to do this using the following ActiveX for those that are interested though (however we will not be using this since we want to avoid ActiveX controls)
<html>
<head>
<meta http-equiv="Content-Langua
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.
<title>New Page 2</title>
</head>
<script language="vbscript">
Sub OpenURL()
oEditFrame.LoadURL Trim(document.all.textboxU
End Sub
Sub UpdateHiddenTextbox()
document.all.oTextarea.val
End Sub
</script>
<body>
<!-- <form id="frmEditHTML" name="frmEditHTML"> -->
<p>
<OBJECT id="oEditFrame" style="LEFT: 0px; TOP: 0px" name="oEditFrame" classid="clsid:2D360200-FF
width=100% height=200 VIEWASTEXT>
<PARAM NAME="ActivateApplets" VALUE="0">
<PARAM NAME="ActivateActiveXContr
<PARAM NAME="ActivateDTCs" VALUE="-1">
<PARAM NAME="ShowDetails" VALUE="0">
<PARAM NAME="ShowBorders" VALUE="0">
<PARAM NAME="Appearance" VALUE="1">
<PARAM NAME="Scrollbars" VALUE="-1">
<PARAM NAME="ScrollbarAppearance"
<PARAM NAME="SourceCodePreservati
<PARAM NAME="AbsoluteDropMode" VALUE="0">
<PARAM NAME="SnapToGrid" VALUE="0">
<PARAM NAME="SnapToGridX" VALUE="50">
<PARAM NAME="SnapToGridY" VALUE="50">
<PARAM NAME="BrowseMode" VALUE="0">
<PARAM NAME="UseDivOnCarriageRetu
</OBJECT>
</p>
<p><input type="text" size="78" name="textboxURL" value="">
<input type="button" value="Open" name="buttonOpen" onclick="OpenURL()">
<input type="button" value="Submit Changes (Not Active Yet)" name="buttonSubmit" onclick="UpdateHiddenTextb
<p>
<br>
<center><h3>For demo find your desired page and then click the open button</h3></center>
<br>
<b>Highlight text you wish to change</b><br>
<b>Bold</b> <i>Control
<b>Italic</b> <i>Contr
<b>Underline</b> <i>Co
<b>Add a hyperlink</b> <i>Contr
<br>
<b>Line Break</b> <i>Shift + Enter</i><br>
<b>New Paragraph</b> <i>Ente
<p>hidden textarea</p>
<p><textarea id="oTextarea" name="oTextarea" rows="8" cols="75"></textarea></p>
<!-- </form> -->
</body>
</html>
__________________________
We are playing around with some other JavaScript functions at the moment.
Thanks, Peter
ASKER
Actually since we do not want to use ActiveX, a user posted this on the NewsGroups. Hope this helps someone as it did me.
peter
> IE4+ allows
>
> <html>
> <head>
> <title>
> formatting
> </title>
> <script type="text/javascript">
> function formatBold (ta) {
> var range = document.selection.createR ange();
> if (ta == range.parentElement())
> range.text = '<b>' + range.text + '<\/b>';
> }
> </script>
> </head>
> <body>
> <form name="formName">
> <input type="button" value="bold"
> onclick="formatBold (this.form.input);"
> />
> <br />
> <textarea name="input" rows="10" cols="60">
> Kibology or any text you would want to put in this box.
Just highlight what you want and press the bold button.
> </textarea>
> </form>
> </body>
> </html>
peter
> IE4+ allows
>
> <html>
> <head>
> <title>
> formatting
> </title>
> <script type="text/javascript">
> function formatBold (ta) {
> var range = document.selection.createR
> if (ta == range.parentElement())
> range.text = '<b>' + range.text + '<\/b>';
> }
> </script>
> </head>
> <body>
> <form name="formName">
> <input type="button" value="bold"
> onclick="formatBold (this.form.input);"
> />
> <br />
> <textarea name="input" rows="10" cols="60">
> Kibology or any text you would want to put in this box.
Just highlight what you want and press the bold button.
> </textarea>
> </form>
> </body>
> </html>
pacumming , you didn't read my comment. I had alraedy posted code that lets you put tags around text selection
ASKER
Yes you are correct djbusychild. The reason I lost sight of that was because you only had one word in the textarea ("text"). Therefore I did not know you could highlight multiple words. I added multiple words in the textarea, highlighted a few, and it did indeed perform as you suggested.
Thanks for correcting me.
Peter
Thanks for correcting me.
Peter
heh heh ... sorry. =) you do not need IE 5.5 to take advantage of DHTML Edition component
ASKER
Thanks!
Peter
Peter
Use FrontPage. It's probably the easiest way. That, or Netscape Composer. They'll need to have the appropriate username/password to save the files BACK to the server though, and you have absolutely no control over what they do, and they'll have access to ANY files in that folder, and depending on how the site is set up, you could be giving them access to ALL the files on the site. This opens your site up to some very nasty scenarios -- from innocent typos to massive unauthorized changes.
Are you SURE you want to do this?