How to make a WYSIWYG editor in PHP

Question

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?

Answer 1

Hi Jona.

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

Answer 2

Try this? http://tinymce.moxiecode.com/index.php

Answer 3

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.

Answer 4

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.