3

I am trying to create a WYSIWYG editor in PHP. So far I got this (I'm new btw):

HTML:

   <form action="" method="POST">
        <select name="fontSize" onchange="this.form.submit();">
            <option>Font Size</option>
            <option value="14px">14px</option>
            <option value="24px">24px</option>
            <option value="34px">34px</option>
        </select>
    </form>

    <form action="" method="POST">
        <textarea name="bodyText" style="width:500px;height:200px;font-size:<?php echo $fontSize; ?>"></textarea>
    </form>

PHP:

<?php

$fontSize = $_POST['fontSize'];

switch($fontSize)
{
    case "14px":
    $fontSize = "14px";
    break;

    case "24px":
    $fontSize = "24px";
    break;

    case "34px":
    $fontSize = "34px";
    break;

    default:
    $fontSize = "12px";
}

?>

The problem is when I select a new font size from the drop down menu the font size for the entire text area changes, instead I want to be able to highlight a particular word or letter and only have the font size of that change and not of the entire text area. How to go about this?

3
  • 2
    I would suggest using a rich-text editor from an existing Javascript framework (like JQuery) instead of trying to roll your own form-based one. – Anon. Feb 4 '10 at 0:52
  • 3
    You do realise that your switch block is completely and utterly redundant. $fontSize = "12px"; $fontSize = $_POST['fontSize']; does the same thing. – Nick Bedford Feb 4 '10 at 0:52
  • 2
    Btw downvoters should explain why they downvote. Only because someone is probably new to client/server side programming does not mean it is a stupid question. And the question is totally clear. – Felix Kling Feb 4 '10 at 1:18
5

You can do it (theoretically), but users who have to use it won't be happy with it. The problem is, that every time, a button pressed, the page gets refreshed. That means the content of the form is sent to server, modified there and sent back.

For just e.g. changing the font, the response time is way too long. The user won't work comfortable with this editor.

The way to got is indeed to use a JS WYSIWYG editor that handles all the formatting, etc. at the client side (to which the other answers link to).

Especially what you have asked for, i.e. only changing the highlighted text, is not trivial to solve. You might be able to do this by sending two additional fields that hold the start end the end point of the highlighted text. These would have to be updated via JS.

You cannot achieve this without JS. As already said, the text is modified at the server side. You have no possibility to figure out what the user is doing by just using the text.

Do yourself a favor and don't try to do it. It really is not worth the effort.

0

Please adhere to the DRY principle (Don't Repeat Yourself) and take one of the many Javascript WYSIWYG editors like http://tinymce.moxiecode.com/.

Trust me, people have put a lot of work in those and you really don't want to do it yourself.

Bye

2
  • 2
    If that's what DRY meant, Stack Overflow wouldn't exist. Think of the first time you programmed. It probably took building a blog to get the hang of things (There's already WordPress, Movable Type, Blogger, et al). – orokusaki Feb 4 '10 at 1:17
  • Yeah... DRY is more meant per project as in. Dont copy and paste code, put it in functions, etc. – Oscar Godson Dec 7 '10 at 18:30
0

Agreed, we use TinyMCE and it's very robust. Check out http://tinymce.moxiecode.com/examples/full.php to see all of the features it has. The footer of the examples page shows a bunch of configurations with fewer buttons for specific purposes.

It definitely takes some patience to get it running the way you desire but in the end it works better than everything else I've seen. The FileManager and ImageManager plugins are not free but they are still open source when you purchase them and work really well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.