Preserved Topic: Html and textarea $Pages that link to <a href="https://ozoneasylum.com/backlink?for=18264" title="Pages that link to Preserved Topic: Html and textarea" rel="nofollow" >Preserved Topic: Html and textarea\$

Author	Thread
Rane Bipolar (III) Inmate From: Denmark Insane since: Oct 2001	posted 07-30-2002 10:17 Hiya I'm building a small intranet site where people can make/edit their own articles from a website interface (asp or php). The problem is that most of these people are far from html-sharks so now they've asked what to do if they wanna make a word "bold" or "italic" or "underline" - and how they add a simple link to a word. Basic stuff like this only. But is there a smart way to add these 4 features (text links beside the textarea box) which will work fine? I imagine they write their article first and afterwards they can mark a word in the textarea and then click "bold" etc. - and then html tags will get added to the textarea content - or something like it. If anyone knows of a free script/object that'll work like a richtext-editor - please feel free to guide me to it as well Thanks
mr.maX Maniac (V) Mad Scientist From: Belgrade, Serbia Insane since: Sep 2000	posted 07-30-2002 10:55 http://richtext.cs.ramesys.com/
Rane Bipolar (III) Inmate From: Denmark Insane since: Oct 2001	posted 07-30-2002 11:27 wow, that sure is a feature-rich editor. i suspect it'll be hell to adapt it to my little website, which pretty much only need the bold, italic, underline and link functions - and maybe a color function as well. isnt there a more simple way to create those 5 things only?
Pugzly Paranoid (IV) Inmate From: 127.0.0.1 Insane since: Apr 2000	posted 07-30-2002 16:35 All we do is make a textarea with the body of the article in it. Above the textarea are various buttons such as <input type="button" value="B" onclick="hiliteToBold(body);" style="font-weight: bold" title="Make the highlighted text bold." /> And that calls this simple function: function hiliteToBold(txtArea){ txtAreaName = txtArea.name; txtRange = document.all[txtAreaName].createTextRange(); txtContainer = txtRange.parentElement().name; objRange = document.selection.createRange(); hiliteTxt = objRange.text; toBoldTxt = "<b>" + hiliteTxt + "</b>"; if(hiliteTxt != ""){ objRange.text = toBoldTxt; } } We have them for various effects like bold, italics, line breaks, font sizes, and smart quotes It's simple, easy to add to, and doesn't leave the content editors in the dark.
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 07-30-2002 16:43 Rane: I suspect mr.maX's link is more comprehensive but check this out too: http://webfx.eae.net/dhtml/richedit/richedit.html ___________________ Emps FAQs: Emperor
Petskull Maniac (V) Mad Scientist From: 127 Halcyon Road, Marenia, Atlantis Insane since: Aug 2000	posted 07-30-2002 17:01 elegant, Pugz.... as usual.. Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com ICQ: 67751342
CPrompt Maniac (V) Inmate From: there...no..there..... Insane since: May 2001	posted 07-30-2002 20:11 hey now. . . that is some cool code there Pugzly. Time to do some experiments! Later, C:\ ~Binary is best~
DmS Paranoid (IV) Inmate From: Sthlm, Sweden Insane since: Oct 2000	posted 07-31-2002 11:19 I've done something very similar to Pugslys a while back, this one has a preview as well. http://www.dmsproject.com/test/wysiwygger/DmSWysiwyg.html /Dan {cell 260} -{ a vibration is a movement that doesn't know which way to go }-
DmS Paranoid (IV) Inmate From: Sthlm, Sweden Insane since: Oct 2000	posted 07-31-2002 11:36 Or, you can make your own using this principle (IE only) code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>editablepageexample</title> <script> function b(){ document.execCommand("Bold", false, null); } function i(){ document.execCommand("Italic", false, null); } function r(){ document.execCommand("ForeColor", false, "red"); } </script> </head> <body> <div CONTENTEDITABLE="true"> The text in this page is editable.<br> </div> <a href="javascript:b();">bold</a> <a href="javascript:r();">red</a> <a href="javascript:i();">italic</a> <br><br> </body> </html> More info on commands can be found here: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp One way to do it is to make one page editable and show that in an iframe, you control the editing functions by buttons/images/links whatever, then on submit you grab the html from the page, strip out the head/body tags, place it in a hidden field that you submit, like this document.forms["your_submit_form_name"].your_hidden_field_name_here.value = window.frames['name_of_your_editor'].document.getElementById("name_of_the_editable_element").documentHTML Takes some fiddling, but you can make it just about how advanced or simple you like. /Dan {cell 260} -{ a vibration is a movement that doesn't know which way to go }-

Preserved Topic: Html and textarea\$

Author

Thread

Rane
Bipolar (III) Inmate

From: Denmark
Insane since: Oct 2001

posted 07-30-2002 10:17

Hiya

I'm building a small intranet site where people can make/edit their own articles from a website interface (asp or php). The problem is that most of these people are far from html-sharks so now they've asked what to do if they wanna make a word "bold" or "italic" or "underline" - and how they add a simple link to a word. Basic stuff like this only.

But is there a smart way to add these 4 features (text links beside the textarea box) which will work fine?

I imagine they write their article first and afterwards they can mark a word in the textarea and then click "bold" etc. - and then html tags will get added to the textarea content - or something like it.

If anyone knows of a free script/object that'll work like a richtext-editor - please feel free to guide me to it as well Thanks

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

posted 07-30-2002 10:55

http://richtext.cs.ramesys.com/

Rane
Bipolar (III) Inmate

From: Denmark
Insane since: Oct 2001

posted 07-30-2002 11:27

wow, that sure is a feature-rich editor. i suspect it'll be hell to adapt it to my little website, which pretty much only need the bold, italic, underline and link functions - and maybe a color function as well.

isnt there a more simple way to create those 5 things only?

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

posted 07-30-2002 16:35

All we do is make a textarea with the body of the article in it. Above the textarea are various buttons such as

<input type="button" value="B" onclick="hiliteToBold(body);" style="font-weight: bold" title="Make the highlighted text bold." />

And that calls this simple function:

function hiliteToBold(txtArea){
txtAreaName = txtArea.name;
txtRange = document.all[txtAreaName].createTextRange();
txtContainer = txtRange.parentElement().name;
objRange = document.selection.createRange();
hiliteTxt = objRange.text;
toBoldTxt = "<b>" + hiliteTxt + "</b>";
if(hiliteTxt != ""){ objRange.text = toBoldTxt;
}
}

We have them for various effects like bold, italics, line breaks, font sizes, and smart quotes

It's simple, easy to add to, and doesn't leave the content editors in the dark.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 07-30-2002 16:43

Rane: I suspect mr.maX's link is more comprehensive but check this out too:
http://webfx.eae.net/dhtml/richedit/richedit.html

___________________
Emps

FAQs: Emperor

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted 07-30-2002 17:01

elegant, Pugz.... as usual..

Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted 07-30-2002 20:11

hey now. . . that is some cool code there Pugzly. Time to do some experiments!

Later,
C:\

~Binary is best~

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted 07-31-2002 11:19

I've done something very similar to Pugslys a while back, this one has a preview as well. http://www.dmsproject.com/test/wysiwygger/DmSWysiwyg.html
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

posted 07-31-2002 11:36

Or, you can make your own using this principle (IE only)

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<html>

<head>

	<title>editablepageexample</title>

    <script>

    function b(){

    document.execCommand("Bold", false, null);

    }

    function i(){

    document.execCommand("Italic", false, null);

    }

    function r(){

    document.execCommand("ForeColor", false, "red");

    }

    </script>

</head>



<body>

<div CONTENTEDITABLE="true">

The text in this page is editable.<br>

</div>

<a href="javascript:b();">bold</a>&nbsp;<a 



href="javascript:r();">red</a>&nbsp;<a href="javascript:i();">italic</a>

<br><br>



</body>

</html>

More info on commands can be found here: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/commandids.asp

One way to do it is to make one page editable and show that in an iframe, you control the editing functions by buttons/images/links whatever, then on submit you grab the html from the page, strip out the head/body tags, place it in a hidden field that you submit, like this document.forms["your_submit_form_name"].your_hidden_field_name_here.value = window.frames['name_of_your_editor'].document.getElementById("name_of_the_editable_element").documentHTML

Takes some fiddling, but you can make it just about how advanced or simple you like.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-