Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11

    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
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    South Yorkshire
    Posts
    442
    Rep Power
    23
    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
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11
    OK thanks! but are the tags visible in the text?
    And did you do it with javascript?

    Game
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    South Yorkshire
    Posts
    442
    Rep Power
    23
    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
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11
    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??
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    South Yorkshire
    Posts
    442
    Rep Power
    23
    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
    regards,

    pgudge
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11
    OK I will. I'll be back when I'm stuck.
    Thanks for now!

    Greetz Game
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11
    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
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11
    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
  18. #10

  19. Join Date
    Aug 2001
    Location
    NYC
    Posts
    57
    Rep Power
    13
    hardcore editor

    free tar file on the site for individual-site use.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11

    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 &lt;H1&gt;
    <option value="Heading 2">Heading 2 &lt;H2&gt;
    <option value="Heading 3">Heading 3 &lt;H3&gt;
    <option value="Heading 4">Heading 4 &lt;H4&gt;
    <option value="Heading 5">Heading 5 &lt;H5&gt;
    <option value="Heading 6">Heading 6 &lt;H6&gt;
    <option value="Address">Address &lt;ADDR&gt;
    <option value="Formatted">Formatted &lt;PRE&gt;
    <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
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    South Yorkshire
    Posts
    442
    Rep Power
    23
    >> 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?
    regards,

    pgudge
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11
    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
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    holland
    Posts
    186
    Rep Power
    11
    Oh.... the default string method you gave two posts before does not work..... Nothing apaers......

    Any ideas??
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2001
    Location
    South Yorkshire
    Posts
    442
    Rep Power
    23
    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.
    regards,

    pgudge
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo