Javascript Replace Selection?

[N1CK3RS0N]

Hello all,

 

I'm working on a rich-text editor, aka a WYSIWYG text editor.

 

I'm doing some testing now with custom commands to create rich text. By default there is an execCommand function which lets you apply effects to rich text, but you have limited control on the HTML which is out put and how it works in general.

 

This new method I thought of seems pretty effective.

 

The problem at the moment is that it replaces all the text in the text area with the modified text you highlighted. I need it to replace just the highlighted text.

 

I'm still new to JavaScript so please bear with me.

 

 

function button(type) {
    var txt = '';

    editor_body = document.getElementById('editor').contentWindow.document;

    if (editor_body.getSelection()) {
        txt = editor_body.getSelection();
    } else if (editor_body.selection.createRange()) {
        txt = editor_body.selection.createRange();
    } else return;

    switch (type) {
        case "bold": txt = '<b>' + txt + '</b>'; break
        case "italic": txt = '<i>' + txt + '</i>'; break
        case "underline": txt = '<u>' + txt + '</u>'; break
        case "strike": txt = '<strike>' + txt + '</strike>'; break
        case "supscript": txt = '<sup>' + txt + '</sup>'; break
        case "subscript": txt = '<sub>' + txt + '</sub>'; break
        case "alignleft": txt = '<div style="text-align: left;">' + txt + '</div>'; break
        case "aligncenter": txt = '<div style="text-align: center;">' + txt + '</div>'; break
        case "alignright": txt = '<div style="text-align: right;">' + txt + '</div>'; break
        case "alignjustify": txt = '<div style="text-align: justify;">' + txt + '</div>'; break
        case "ol": txt = '<ol>' + txt + '</ol>'; break
        case "ul": txt = '<ul>' + txt + '</ul>'; break
        case "insertlink": insertlink = prompt("Enter image URL:", "http://"); if ((insertlink != null) && (insertlink != "")) {txt = '<a href="' + insertlink + '">' + txt + '</a>'; } break
        case "insertimage": insertimage = prompt("Enter image URL:", "http://"); if ((insertimage != null) && (insertimage != "")) {txt = '<img src="' + insertimage + '">'; } break
        case 'insertvideo': insertvideo = prompt("Enter video URL:", "http://"); if ((insertvideo != null) && (insertvideo != "")) {txt = '<object type="application/x-shockwave-flash" data="' + insertvideo + '" width="640" height="385"><param name="movie" value="' + insertvideo + '" /></object>';} break
    }

    editor_body.body.innerHTML = txt;
    document.getElementById('editor').contentWindow.focus();
}

function Start() {
    var e;

    document.getElementById('editor').contentWindow.document.designMode = "on";

    try {
        document.getElementById('editor').contentWindow.document.execCommand("undo", false, null);
        editormode = "true";
    } catch (e) {
        editormode = "false";
    }

    if (document.addEventListener) {
        document.addEventListener("mouseup", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.addEventListener("mouseup", dismissmenu, true);
        document.addEventListener("keypress", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.addEventListener("keypress", dismissmenu, true);
    } else if (document.attachEvent) {
        document.attachEvent("mouseup", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.attachEvent("mouseup", dismissmenu, true);
        document.attachEvent("keypress", dismissmenu, true);
        document.getElementById("editor").contentWindow.document.attachEvent("keypress", dismissmenu, true);
    }
}

 

 

[JasonLewis]

This is actually a pretty popular thing to do, Googling will return a few results.

 

http://www.webmasterworld.com/forum91/5005.htm

http://www.codetoad.com/javascript_get_selected_text.asp

http://www.codingforums.com/archive/index.php/t-44821.html

 

You'd just need to tweak them a little to replace the text instead of return.