Guide for making text editor

Conrad11 · 3 Nov 2007 at 12:14

Hi there,

I am looking for a simple guide for making a simple javascript based text editor.

I just want the ability to be able to format text and add quotes/images to a textarea.

I know these already exisit, but I feel they are rather bloated for what i want and wanted to try and make my own.

Does anyone have any guides?

Thanks.

Conrad11 · 3 Nov 2007 at 12:31

Hi there,

Yeah i have already looked at exisiting solutions such as FCKEditor and TinyMCE, but they are still too bloated for my liking.

I simply want a button which opens and alert box, they enter the text and then it puts the formatted text in the textarea - no fancies.

I would like to create it myself as i don't really know much javascript and it would be nice to learn.

Thanks.

EDIT:

I have figured most of it out from W3C Schools webiste.

For anyone that is interested, here is an example:

Code:

 [noparse] 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Text Textarea</title>
    <script type="text/javascript">
    
    function FormatText ( type )
    {
        box = document.getElementById('desc');

        var message = "";

        switch ( type )
        {
            case 1:
                message = "Type the text you like in bold:";
                break;
            case 2:
                message = "Type the text you like to underline:";
                break;
            case 3:
                message = "Type the text you like in italics:";
                break;
            case 4:
                message = "Type the text you would like to quote:";
                break;
            case 5:
                message = "Enter the URL of the image:";
                break;
        }

        var promptBox = prompt ( message,"" )

        if ( promptBox != null && promptBox != "" )
        {
            var formattedText = "";
            
            switch ( type )
            {
                case 1:
                    formattedText = " [b]" + promptBox + "[/b] ";
                    break;
                case 2:
                    formattedText = " [u]" + promptBox + "[/u] ";
                    break;
                case 3:
                    formattedText = " [i]" + promptBox + "[/i] ";
                    break;
                case 4:
                    formattedText = " [quote]" + promptBox + "[/quote] ";
                    break;
                case 5:
                    formattedText = " [img]" + promptBox + "[/img] ";
                    break;
            }

            box.value += ( formattedText )
        }
    }
    
    </script>
</head>
<body>
    <p><input type="button" onclick="FormatText(1)" value="bold" /></p>
    <textarea id="desc" cols="40" rows="5"></textarea>
</body>
</html>
[/noparse]

Guide for making text editor

Conrad11

Conrad11

Conrad11

Conrad11