Pixel2Life Forum > JS RTE Editor problem.

Pixel2Life Forum > Help Section > PHP, ASP, MySQL, JavaScript and other Web/Database Programming Help

Jynxis

Jun 26 2009, 01:34 PM

I've been working on a new project of mine and since i don't know JavaScript all that well, I've come here for some help.

Its regarding a WYSIWYG editor. I've got it mostly down atm, with a few exceptions with figuring out how to parse it into BBCode when viewing it in text view and then back into HTML when viewing in HTML view.

When i change it from html view with formatted text, it works and shows the markup, but when i try and change back into HTML view it doesnt work. But when i click to change view again, it parses the brackets so < > becomes < >.
The & sign becomes & if i click it once more, and it will keep adding amp; the more i click it.

Please help. I don't really need the RTE style editor, but it would be something "nice" for this project.
The page Source:

CODE

<!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">
<head>
<title> RTE Editor </title>
<script language="JavaScript">
    var viewMode;
    window.onload = function(){
        viewMode = 1;
        rte_window.document.designMode = 'On';
        rte_window.document.body.innerHTML = 'Hello';
    }

    function do_bold(){
        rte_window.document.execCommand('Bold',false, null);
    }

    function do_italic(){
        rte_window.document.execCommand('Italic',false, null);
    }

    function do_underline(){
        rte_window.document.execCommand('Underline',false, null);
    }

    function do_justify(ctrl){
            switch(ctrl){
                case 'left':
                    rte_window.document.execCommand('Justifyleft',false, null);
                break;
                case 'center':
                    rte_window.document.execCommand('Justifycenter',false, null);
                break;
                case 'right':
                    rte_window.document.execCommand('Justifyright',false, null);
                break;
            }
    }

    function do_list(ctrl){
            switch(ctrl){
                case 'ordered':
                    rte_window.document.execCommand('insertorderedlist',false, null);
                break;
                case 'bullet':
                    rte_window.document.execCommand('insertunorderedlist',false, null);
                break;
            }
    }

    function do_http(){
        alink = prompt('url?','')
        if(alink != null)
        rte_window.document.execCommand('createlink', false, alink);
    }

    function do_color(){
        var fCol = prompt('Enter foreground color', '');
        if(fCol != null)
          rte_window.document.execCommand('forecolor', false, fCol);
    }

    function do_bgcolor(){
        var fCol = prompt('Enter background color', '');
        if(fCol != null)
          rte_window.document.execCommand('backcolor', false, fCol);
    }

    function do_image(){
        var imgSrc = prompt('Enter image location', '');
        if(imgSrc != null)
        rte_window.document.execCommand('insertimage',false, imgSrc);
    }

    function do_horizontal(){
        rte_window.document.execCommand('inserthorizontalrule',false, null);
    }

    function toggleview(){
        if(viewMode == 1){
            windowText = rte_window.document.body.innerHTML;
            rte_window.document.body.innerText = windowText;
            rte_window.focus();
            viewMode = 2;
        }else{
            windowText = rte_window.document.body.innerText;
            rte_window.document.body.innerText = windowText;
            rte_window.focus();
            viewMode = 1;
        }
    }
</script>
<style>
  * {
      margin:0px; padding:0px;
  }
  #rte_editor .reviewer { width:600px; display:block;}
  #rte_editor .buttons  { width:600px; float:left; display:block;}
  #rte_editor .window iframe {clear:both; float:left; border:1px #000 solid; }
</style>

<body>
<div id="rte_editor" class="reviewer">
    <div class="buttons">

            <img alt="Bold" src="images/skin/rte_editor/bold.gif" onclick="do_bold()">
            <img alt="Italic" src="images/skin/rte_editor/italic.gif" onclick="do_italic()">
            <img alt="Underline" src="images/skin/rte_editor/underline.gif" onclick="do_underline()">

            <img alt="Left" src="images/skin/rte_editor/left.gif" onclick="do_justify('left')">
            <img alt="Center" src="images/skin/rte_editor/center.gif" onclick="do_justify('center')">
            <img alt="Right" src="images/skin/rte_editor/right.gif" onclick="do_justify('right')">

            <img alt="Ordered List" src="images/skin/rte_editor/ordlist.gif" onclick="do_list('ordered')">
            <img alt="Bulleted List" src="images/skin/rte_editor/bullist.gif" onclick="do_list('bullet')">

            <img alt="Text Color" src="images/skin/rte_editor/forecol.gif" onclick="do_color()">
            <img alt="Background Color" src="images/skin/rte_editor/bgcol.gif" onclick="do_bgcolor()">

            <img alt="Hyperlink" src="images/skin/rte_editor/link.gif" onclick="do_http()">
            <img alt="Image" src="skin/rte_editor/image.gif" onclick="do_image()">
            <img alt="Horizontal Rule" src="images/skin/rte_editor/rule.gif" onclick="do_horizontal()">
            <img alt="Toggle Mode" src="images/skin/rte_editor/mode.gif" onclick="toggleview()" style="float:right;">

    </div>
    <div class="window">
        <iframe id="rte_window"  style="width:600px; height:500px;" frameborder="0"></iframe>
    </div>
    <div class="submitbuttons">

    </div>
</div>
</body>
</html>

Jynxis

Jul 3 2009, 04:51 PM

Shoo.... nobody knows.Huh.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.