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.

furnace · 3 Nov 2007 at 12:21

Hey,

FCKEditor is a pain at first but I find it is really customisable and you can strip it down to a lightweight version. I think that really, you'd be better off figuring out FCKEditor, rather than making your own... that way if you want a more fully-featured JS text editor on later on, you would already have dealt with FCKEditor and you could use that - but if you use your own, you'd either have to continue developing yours (which is kind of reinventing the wheel) or you'd have to go and figure out FCKEditor anyway.

That said though, it's always good to teach yourself things - so if you fancy a challenge then I say go ahead and make one

I haven't made one so can't say exactly, but javascript, possibly with iFrames, textareas and innerHTML are all going to come in handy :cool:

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

furnace

furnace

Conrad11

Conrad11