SunQuest
           CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

dynamic rich text with php or css

Discuss dynamic rich text with php or css in the CSS Help forum on Dev Shed.
dynamic rich text with php or css Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Page 1 of 2 1 2 >
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old December 15th, 2003, 07:41 AM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
Unhappy dynamic rich text with php or css
Hi everyone,

I lately build a site with a content management system in php.
Only the client can just type some text. I'd like to give the client a bit more control .

It seems very usefull to add some icons that can make text italic, bold, in a different color, in a different size etc....

A bit like the textfield on devshed where you post your messages with. But with one big difference:

I want to select text, than pressing the (for instance italic button) and than the selected turns italic.

I know it is possible. But I don't know where to start...
I'd like to use css which I used trough the whole site. "<b>" tags don't really combine very well with css...

So anyone????
(I off course sought a lot on the internet before posting this, couldn't find very much of use)

Very many thanx in advance. Greetz Game - Holland
Reply With Quote
  #2  
Old December 15th, 2003, 08:11 AM
pgudge pgudge is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2001
Location: South Yorkshire
Posts: 435 pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 4 h 9 m 22 sec
Reputation Power: 17
You really wanna be looking into using JavaScript.

I did something simular a while back. In Javascript you are able to get the text selected range and length from a textarea box.

Then you have to print the text before it, add your tag then the selected text, your closing tag, then the rest of the textarea.

Go look up some string / html form help on Javascript, it's all there. But it isn't a sail through, come back and let me know if ya struggle.

pgudge
Reply With Quote
  #3  
Old December 15th, 2003, 08:16 AM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
OK thanks! but are the tags visible in the text?
And did you do it with javascript?

Game
Reply With Quote
  #4  
Old December 15th, 2003, 08:34 AM
pgudge pgudge is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2001
Location: South Yorkshire
Posts: 435 pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 4 h 9 m 22 sec
Reputation Power: 17
Yes I did it in Javascript, The only other way is to submit the text and action to another PHP to have that process it, which seems silly when JavaScript is able.

The <textarea> in HTML is a one style object. So You can make the text inside it ANY style you want, but not two stlyes, i.e. Bold and then Italic.

You will have to create TAGs in the textarea, like DevShed does,

[ I ]This should be Italic[ / I ]

Then In your PHP code the displays the text on the front page, you can do a preg match to turn the [ I ] tags into CSS code

e.g.

[ I ]

to

<SPAN STYLE="text-decoration: italic">

My CSS is alittle rusty but you get the idea.

You could always change this [ I ] tag before you submite it back to the database so that you dont have to put it in the view section, but if you ever want to change the style or look of the page, you would have to change all entries in the DB.

HTH's.

p
__________________
regards,

pgudge
Reply With Quote
  #5  
Old December 15th, 2003, 08:37 AM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
OK great. I get the main idea now.
But my javascript is not so good.
What i must do is: make buttons. But what action do I attach to -for instance- an italic button??
Reply With Quote
  #6  
Old December 15th, 2003, 08:46 AM
pgudge pgudge is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2001
Location: South Yorkshire
Posts: 435 pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 4 h 9 m 22 sec
Reputation Power: 17
Go read up on it first, then it might just come to you. But for a jist of the situation.

Textarea
Button (with onclick to a javascript function)
Javscript Fucntion

In the fucntion you need to search for selected text, then get the range of it, so you have a value of where the selection starts and get the length, etc etc.

Just go look into it, and come back if ya get stuck.

p
Reply With Quote
  #7  
Old December 15th, 2003, 08:50 AM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
OK I will. I'll be back when I'm stuck.
Thanks for now!

Greetz Game
Reply With Quote
  #8  
Old December 16th, 2003, 07:59 PM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
Well. I managed to make something that creates certain tags around a selcted tags after pressing the correct button.

But is it possible to make text appear bold after pressing a button?

Greetz Game
Reply With Quote
  #9  
Old December 16th, 2003, 08:25 PM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
oh sorry. I already found a example of wat I want. Hope I can fuse it with my existing situation.
I'll post any problems I'll encounter
Reply With Quote
  #10  
Old December 16th, 2003, 11:44 PM
persaltier's Avatar
persaltier persaltier is offline
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Aug 2001
Location: NYC
Posts: 57 persaltier User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 32 m 19 sec
Reputation Power: 7
Send a message via AIM to persaltier
hardcore editor

free tar file on the site for individual-site use.
Reply With Quote
  #11  
Old December 17th, 2003, 08:02 AM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
Question
thanx a lot! BUt I don't like that sort of stuff somehow.

I'd like to stick to something alse I found.
I only have 2 issues that need to be solved.

>> I like to have a default string or value in the textbox.
>> I like to submit the whole ricj text as a form.

This is the code:

<html>
<head>
<title>Scriptlets Example from npguy@my-deja.com</title>

<!-- Styles -->
<link REL="stylesheet" TYPE="text/css" HREF="styles.css?12">

<SCRIPT>
<!--
var bLoad=false
var pureText=true
var bodyTag="<BODY MONOSPACE STYLE=\"font:10pt arial,sans-serif\">"
var bTextMode=false

public_description=new Editor

function Editor() {
this.put_html=SetHtml;
this.get_html=GetHtml;
this.put_text=SetText;
this.get_text=GetText;
this.CompFocus=GetCompFocus;
}

function GetCompFocus() {
mytext.focus();
}

function GetText() {
return mytext.document.body.innerText;
}

function SetText(text) {
text = text.replace(/\n/g, "<br>")
mytext.document.body.innerHTML=text;
}

function GetHtml() {
if (bTextMode)
return mytext.document.body.innerText;
else {
cleanHtml();
cleanHtml();
return mytext.document.body.innerHTML;
}
}

function SetHtml(sVal) {
if (bTextMode) mytext.document.body.innerText=sVal;
else mytext.document.body.innerHTML=sVal;
}

// -->
</script>
</head>

<body onload="bLoad=true" STYLE="margin:0pt;padding:2pt">

<div class="yToolbar" ID="FormatToolbar">
<div class="TBHandle"></div>
<div class="Btn" TITLE="Cut" onclick="RunCom('cut')">
<img class="Ico" src="cut.gif">
</div>
<div class="Btn" TITLE="Copy" onclick="RunCom('copy')">
<img class="Ico" src="copy.gif">
</div>
<div class="Btn" TITLE="Paste" onclick="RunCom('paste')">
<img class="Ico" src="paste.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Bold" onclick="RunCom('bold');">
<img class="Ico" src="bold.gif">
</div>
<div class="Btn" TITLE="Italic" onclick="RunCom('italic')">
<img class="Ico" src="italic.gif">
</div>
<div class="Btn" TITLE="Underline" onclick="RunCom('underline')">
<img class="Ico" src="under.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Foreground Color" onclick="foreColor()">
<img class="Ico" src="tpaint.gif">
</div>
<div class="Btn" TITLE="Background Color" onclick="backColor()">
<img class="Ico" src="parea.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Align Left" NAME="Justify" onclick="RunCom('justifyleft')">
<img class="Ico" src="aleft.gif">
</div>
<div class="Btn" TITLE="Center" NAME="Justify" onclick="RunCom('justifycenter')">
<img class="Ico" src="center.gif">
</div>
<div class="Btn" TITLE="Align Right" NAME="Justify" onclick="RunCom('justifyright')">
<img class="Ico" src="aright.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Numbered List" onclick="RunCom('insertorderedlist')">
<img class="Ico" src="nlist.gif">
</div>
<div class="Btn" TITLE="Bulletted List" onclick="RunCom('insertunorderedlist')">
<img class="Ico" src="blist.gif">
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Decrease Indent" onclick="RunCom('outdent')">
<img class="Ico" src="ileft.gif">
</div>
<div class="Btn" TITLE="Increase Indent" onclick="RunCom('indent')">
<img class="Ico" src="iright.gif" >
</div>
<div class="TBSep"></div>
<div class="Btn" TITLE="Hyperlink" onclick="createLink()">
<img class="Ico" src="wlink.gif">
</div>
</div>


<div class="yToolbar" ID="ParaToolbar">
<div class="TBHandle"></div>

<!--Paragraph Style begins -->
<!--
<select ID="ParagraphStyle" class="TBGen" TITLE="Paragraph Format" onchange="RunCom('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
-->
<select ID="ParagraphStyle" class="TBGen" TITLE="Paragraph Format" onchange="RunCom('formatBlock',this[this.selectedIndex].value);">
<option selected>Paragraph
<option value="Normal">Normal
<option value="Heading 1">Heading 1 <H1>
<option value="Heading 2">Heading 2 <H2>
<option value="Heading 3">Heading 3 <H3>
<option value="Heading 4">Heading 4 <H4>
<option value="Heading 5">Heading 5 <H5>
<option value="Heading 6">Heading 6 <H6>
<option value="Address">Address <ADDR>
<option value="Formatted">Formatted <PRE>
<option style="color: darkred" value="removeFormat">Remove Formatting
</select>
<!-- Font name begins, always selectect the select font. -->

<!--
<select ID="FontName" class="TBGen" TITLE="Font Name" onchange="RunCom('fontname',this[this.selectedIndex].value);this.selectedIndex=this[this.selectedIndex].value;alert(FontName[FontName.selectedIndex].value)">
-->
<select ID="FontName" class="TBGen" TITLE="Font Name" onchange="RunCom('fontname',this[this.selectedIndex].value);">
<option selected>Font
<option value="Arial">Arial
<option value="Arial Black">Arial Black
<option value="Arial Narrow">Arial Narrow
<option value="Comic Sans MS">Comic Sans MS
<option value="Courier New">Courier New
<option value="System">System
<option value="Times New Roman">Times New Roman
<option value="Verdana">Verdana
<option value="Wingdings">Wingdings
<option value="Kantipur">Kantipur
</select>

<!-- Font size begins -->
<!--
<select ID="FontSize" class="TBGen" TITLE="Font Size" onchange="RunCom('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
-->
<select ID="FontSize" class="TBGen" TITLE="Font Size" onchange="RunCom('fontsize',this[this.selectedIndex].value);">
<option selected>Size
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="10">10
<option value="12">12
<option value="14">14
</select>

<div class="TBSep"></div>
<div ID="EditMode" class="TBGen" style="width:150" TITLE="Editing Mode">
<input type=checkbox name="switchMode" onclick="setMode(switchMode.checked)">
View source
</div>
</div>

<!-- The box where we type-->
<IFRAME class="mytext" width="100%" ID="mytext" height="200">
</IFRAME>

<SCRIPT>
<!--
mytext.document.open();
mytext.document.write(bodyTag);
mytext.document.close();
mytext.document.designMode="On";
// -->
</SCRIPT>

<script SRC="compose.js?169" LANGUAGE="javascript">
</script>

</body>
</html>

Game
Reply With Quote
  #12  
Old December 17th, 2003, 09:48 AM
pgudge pgudge is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2001
Location: South Yorkshire
Posts: 435 pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 4 h 9 m 22 sec
Reputation Power: 17
>> I like to have a default string or value in the textbox.
Code:
<SCRIPT>
<!--
mytext.document.open();
mytext.document.write(bodyTag);
mytext.document.write("It's Christmas, Whoope!");
mytext.document.close();
mytext.document.designMode="On";
// -->
</SCRIPT>


>> I like to submit the whole ricj text as a form.

Not sure what you mean here, you mean, youd like to submit the IFRAME text as a form?
Reply With Quote
  #13  
Old December 17th, 2003, 10:12 AM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
yeah! that's what Im mean. Right now I still have a <textarea> with text </textarea>. The content of the textarea is submitted. Now I want the I frame's content to be submitted. Just like the textarea...

But how??

Thanks in advance! Greet Sam
Reply With Quote
  #14  
Old December 17th, 2003, 10:15 AM
game game is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2003
Location: holland
Posts: 164 game User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 15 h 19 m 9 sec
Reputation Power: 5
Oh.... the default string method you gave two posts before does not work..... Nothing apaers......

Any ideas??
Reply With Quote
  #15  
Old December 17th, 2003, 10:30 AM
pgudge pgudge is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jul 2001
Location: South Yorkshire
Posts: 435 pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level)pgudge User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 4 h 9 m 22 sec
Reputation Power: 17
The

mytext.document.write("It's Christmas, Whoope!");

Works fine here :S



Hummmmm, I think you might have stepped out of my league on Javascript / Form Submitions when it comes to IFRAME content.


At a very very rough guess try this.


1. Create a text input box
2. On submit, try and copy the code from the IFRAME back to the input. You may only get the Text and not HTML formating, so you may have to see if you can grab the source ?!?!?!?!?!
3. send the form and the message body is in the Text Box, just set it to hidden.
Reply With Quote