sandbox/editor/edit.php

	edit.php revision b909d10cf34b5de748b5324ab34c987f9a601449
e371fe50702011b7021c8d79181e88184c23448bAdam Moore<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
e371fe50702011b7021c8d79181e88184c23448bAdam Moore<html>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore<head>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore    <title>YUI: Editor</title>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore    <style type="text/css" media="screen">
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        p, h2 {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            margin: 1em;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #test1 {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            height: 355px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            border: 3px solid red;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            width: 740px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            margin: 1em;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            position: absolute;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            top: 100px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            left: 100px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #test iframe {
54119bda17c0eb663f4d2147df7363de8019647fAdam Moore            border: 1px solid blue;
6eb4be1e0f37f895f72bc59d0d9efd610eb78100Adam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #test {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            height: 260px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            width: 550px;
54119bda17c0eb663f4d2147df7363de8019647fAdam Moore            border-top: 3px solid red;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            float: left;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            padding: 5px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            _background-color: orange;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #test1 button {
54119bda17c0eb663f4d2147df7363de8019647fAdam Moore            background-color: #ccc;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #test1 button.selected {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            background-color: green;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #stub {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            display: none;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #smilies {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            width: 175px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            height: 260px;
54119bda17c0eb663f4d2147df7363de8019647fAdam Moore            border-top: 3px solid red;
54119bda17c0eb663f4d2147df7363de8019647fAdam Moore            border-left: 3px solid red;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            float: right;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
531a5eaa1b3229b1e88802ccfeb1ece1ef004f53Adam Moore
531a5eaa1b3229b1e88802ccfeb1ece1ef004f53Adam Moore        #smilies img {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            cursor: pointer;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            margin: 5px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        #test_render {
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            position: absolute;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            top: 500px;
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        }
e371fe50702011b7021c8d79181e88184c23448bAdam Moore	</style>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore</head>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore<body class="yui-skin-sam">
531a5eaa1b3229b1e88802ccfeb1ece1ef004f53Adam Moore
6eb4be1e0f37f895f72bc59d0d9efd610eb78100Adam Moore<h1 tabindex="1">Editor Testing</h1>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore
531a5eaa1b3229b1e88802ccfeb1ece1ef004f53Adam Moore<div id="test1" role="widget">
b39897a381c2203466da5568bfd2862a54a81311Adam Moore    <div role="toolbar">
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <select id="fontname">
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option selected> </option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option>Arial</option>
531a5eaa1b3229b1e88802ccfeb1ece1ef004f53Adam Moore            <option>Arial Black</option>
531a5eaa1b3229b1e88802ccfeb1ece1ef004f53Adam Moore            <option>Comic Sans MS</option>
b39897a381c2203466da5568bfd2862a54a81311Adam Moore            <option>Courier New</option>
6eb4be1e0f37f895f72bc59d0d9efd610eb78100Adam Moore            <option>Lucida Console</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option>Tahoma</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option>Times New Roman</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option>Trebuchet MS</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option>Verdana</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        </select>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <select id="fontsize">
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option selected> </option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option value="1">10</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option value="2">13</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option value="3">16</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option value="4">18</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option value="5">24</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option value="6">32</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore            <option value="7">48</option>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        </select>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="bold">Bold</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="italic">Italic</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="underline">Underline</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="foo">Foo</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="img">InsertImage</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="wrap">Wrap</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="inserthtml">InsertHTML</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="addclass">AddClass</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="removeclass">RemoveClass</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="bidi">BiDi</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="indent">Indent</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="outdent">Outdent</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="insertorderedlist">InsertOrderedList</button>
e371fe50702011b7021c8d79181e88184c23448bAdam Moore        <button value="insertunorderedlist">InsertUnOrderedList</button>
        <button value="createlink">createlink</button>
        <button value="inserthorizontalrule">inserthorizontalrule</button>
        <button value="backcolor">backcolor</button>
        <button value="forecolor">forecolor</button>
        <button value="justifycenter">justifycenter</button>
        <button value="justifyleft">justifyleft</button>
        <button value="justifyright">justifyright</button>
        <button value="justifyfull">justifyfull</button>
        <button value="replacecontent">ReplaceContent</button>
    </div>
    <div id="test"></div>
    <div id="smilies"></div>
</div>

<button id="getHTML">Get HTML</button>
<button id="setHTML">Set HTML</button>
<button id="focusEditor">Focus Editor</button>
<!--button id="showEditor">Show Editor</button-->

<div id="stub">
<p>Above the HR</p>
<hr size="1">
<?php //include('mail.php'); ?>
</div>
    <!---div><br></div>
    <ul>
        <li style="font-family: courier new">Item #1</li>
        <li>Item #1</li>
        <li>Item #1</li>
    </ul>
    <p>This is a test..</p>
    <div style="font-family: ; font-size: ;"><br>
        <div style="font-family: times new roman, new york, times, serif; font-size: 12pt;">
            <font size="2" face="Tahoma">
            <hr size="1">
            <b><span style="font-weight:bold;">From:</span></b> yahoo-account-services-us@cc.yahoo-inc.com<br>
            <b><span style="font-weight: bold;">To:</span></b> hb.stone@yahoo.com<br>
            <b><span style="font-weight: bold;">Cc:</span></b> <br>
            <b><span style="font-weight: bold;">Sent:</span></b> 2010-07-09 14:19:12<br>
            <b><span style="font-weight: bold;">Subject:</span></b> Verify this email address<br>
            </font><br>
            <div id=yiv759936264>
                <div style="direction:ltr;">
                    <img src="https://s.yimg.com/lq/i/brand/purplelogo/base/us.gif" vspace="10" hspace="20">
                    <hr noshade width="95%"> <br><br>
                    <table border="0" width="735">
                        <tbody>
                            <tr>
                                <td width="10%">&nbsp;</td>
                                <td width="80%">  <font size="+1" color="#631266" face="Arial">  <b>Verify this email address</b>  </font>  <br>  </td>
                                <td width="10%">&nbsp;</td>
                            </tr>
                            <tr>
                                <td colspan="3">&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>
                    <hr noshade width="95%">
                    <table width="750">
                        <tbody>
                            <tr>
                                <td width="2.5%">&nbsp;</td>
                                <td>  <font face="Arial" size="-3"></font>  </td>
                            </tr>
                            <tr>
                                <td width="2.5%">&nbsp;</td>
                                <td>  <font face="Arial" size="-3"><p>Copyright © 2010 Yahoo! Inc. All rights reserved.<a rel="nofollow" target="_blank" href='http://docs.yahoo.com/info/copyright/copyright.html'>Copyright/IP Policy</a> | <a rel="nofollow" target="_blank" href='http://docs.yahoo.com/info/terms/'>Terms of Service</a></p>  <p>NOTICE: We collect personal information on this site. To learn more about how we use your information, see our <a rel="nofollow" target="_blank" href='http://privacy.yahoo.com/'>Privacy Policy</a>.</p><br>  </font>  </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div><br><br>
        </div>
    </div>
</div-->
<!--p><b>This is a <u>test. <i>This is</i> another</u> test.</b></p>
This is some <strong>other</strong> loose test.
<p>This <strong>is</strong> <font face="Courier New">another</font> test.</p>
<ul>
    <li style="font-family: courier new">Item #1</li>
    <li>Item #1</li>
    <li>Item #1</li>
</ul>
<hr>
<p>This <strong>is</strong> <font face="Courier New">another</font> test.</p>
<ul>
</div-->

<script type="text/javascript" src="../../build/yui/yui-debug.js?bust=<?php echo(time()); ?>"></script>
<!--script type="text/javascript" src="http://yui.yahooapis.com/3.1.0/build/yui/yui-debug.js?bust=<?php echo(time()); ?>"></script-->


<script type="text/javascript" src="js/editor-base.js?bust=<?php echo(time()); ?>"></script>
<script type="text/javascript" src="js/frame.js?bust=<?php echo(time()); ?>"></script>
<script type="text/javascript" src="js/exec-command.js?bust=<?php echo(time()); ?>"></script>
<script type="text/javascript" src="js/selection.js?bust=<?php echo(time()); ?>"></script>
<script type="text/javascript" src="js/lists.js?bust=<?php echo(time()); ?>"></script>
<script type="text/javascript" src="js/editor-tab.js?bust=<?php echo(time()); ?>"></script>
<script type="text/javascript" src="js/createlink-base.js?bust=<?php echo(time()); ?>"></script>
<script type="text/javascript" src="js/editor-bidi.js?bust=<?php echo(time()); ?>"></script>

<script type="text/javascript">
var yConfig = {
    //debug: false,
    //filter: 'RAW',
    debug: true,
    filter: 'debug',
    allowRollup: false,
    logExclude: {
        'yui': true,
        'event': true,
        base: true,
        attribute: true,
        augment: true,
        get: true,
        loader: true,
        Selector: true
    },
    throwFail: true
};

YUI(yConfig).use('node', 'selector-css3', 'base', 'editor-base', 'frame', 'substitute', 'exec-command', 'editor-lists', 'createlink-base', 'editor-bidi', 'editor-lists', function(Y) {
    //console.log(Y, Y.id);

    Y.delegate('click', function(e) {
        e.target.toggleClass('selected');
        var cmd = e.target.get('innerHTML').toLowerCase(),
            val = '';
        switch (cmd) {
            case 'wrap':
                val = 'del';
                break;
            case 'addclass':
            case 'removeclass':
                val = 'foo';
                break;
            case 'insertimage':
                val = 'http://farm3.static.flickr.com/2723/4014885243_58772b8ff8_s_d.jpg';
                break;
            case 'inserthtml':
                val = ' <span style="color: red; background-color: blue;">Inserted Text (' + (new Date()).toString() + ')</span> ';
                break;
            case 'backcolor':
                val = '#33CC99';
                break;
            case 'forecolor':
                val = '#0000FF';
                break;
        }
        editor.frame.focus();
        var ex_return = editor.execCommand(cmd, val);
        //console.info('Return: ', cmd, ' :: ', ex_return);
    }, '#test1 > div', 'button');

    Y.delegate('change', function(e) {
        var cmd = e.currentTarget.get('id'),
            val = e.currentTarget.get('value');

        editor.frame.focus();
        var ex_return = editor.execCommand(cmd, val);
    }, '#test1 > div', 'select');


    var smilies = [
        null,
        ':)',
        ':(',
        ';)',
        ':D',
        ';;)',
        '>:D<',
        ':-/',
        ':x',
        ':">',
        ':P'
    ];

    var s_cont = Y.one('#smilies');
    Y.each(smilies, function(v, k) {
        if (v) {
            s_cont.append('<img src="smilies/' + k + '.gif" alt="Click to insert">');
        }
    });
    s_cont.delegate('click', function(e) {
        var img = e.currentTarget, inst = editor.getInstance();
        editor.focus();
        editor.execCommand('insertandfocus', '<span>:)</span>');
        /*
        editor.focus(function() {
            editor.execCommand('insertandfocus', '<span>:)</span>');
        });
        e.halt();
        */
    }, 'img');

    var buttons = Y.all('#test1 button');
    var f_options = Y.all('#fontname option');
    var s_options = Y.all('#fontsize option');

    var updateButtons = function(e) {
        //console.log(e);
        var tar = e.changedNode;
        if (tar) {
            var cmds = e.commands;

            buttons.removeClass('selected');
            buttons.each(function(v) {
                if (cmds[v.get('value')]) {
                    v.addClass('selected');
                }
            });

            var fname = e.fontFamily,
            size = e.fontSize;
            f_options.item(0).set('selected', true);
            if (fname) {
                f_options.each(function(v) {
                    var val = v.get('value').toLowerCase();
                    if (val === fname.toLowerCase()) {
                        v.set('selected', true);
                    }
                });
            }
            s_options.item(0).set('selected', true);
            if (size) {
                size = size.replace('px', '');
                s_options.each(function(v) {
                    var val = v.get('value').toLowerCase(),
                        txt = v.get('text');
                    if (size === txt) {
                        v.set('selected', true);
                    }
                });
            }
        }
    };

    //Mixin the new commands
    Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
        foo: function() {
            alert('You clicked on Foo');
        },
        replacecontent: function() {
            var inst = this.getInstance(),
                sel = new inst.Selection();

            sel.setCursor();
            var html = this.get('host').get('content');
            html = '<div><p>Added From Selection Cache Test.</p>' + html + '</div>';
            this.get('host').set('content', html);
            var cur = sel.focusCursor();
        }
    });


    editor = new Y.EditorBase({
        content: Y.one('#stub').get('innerHTML'),
        extracss: 'body { color: red; } p { border: 1px solid green; padding: .25em; margin: 1em; } #yui-cursor { border: 1px solid purple; }'
    });
    editor.after('nodeChange', function(e) {
        //console.log('changedType: ' + e.changedType);
        //if (e.changedType !== 'execcommand') {
        switch (e.changedType) {
            case 'keyup':
            case 'mouseup':
                updateButtons(e);
                break;
        }

        /*
        if (e.changedType === 'keyup') {
            if (e.changedNode) {
                var txt = e.changedNode.get('text');
                Y.each(smilies, function(v, k) {
                    //Hackey, doesn't work on new line.
                    if (txt.indexOf(' ' + v) !== -1) {
                        e.selection.replace(v, '<span>&nbsp;<img src="smilies/' + k + '.gif">&nbsp;</span>');
                    }
                });
            }
        }
        */

    });

    //editor.plug(Y.Plugin.EditorLists);
    //editor.plug(Y.Plugin.EditorBidi);

    //Disabled for IE testing..
    //editor.plug(Y.Plugin.EditorTab);
    editor.after('dom:paste', function(e) {
        console.log('DOM Paste');
        /*
        var inst = editor.getInstance();
        Y.later(100, null, function() {
            var div = inst.one('p > div');
            if (div) {
                div.setAttribute('style', '');
            }
        });
        */
        /*
        console.log(e);
        e.frameEvent.preventDefault();
        if (e.clipboardData.data) {
            console.log(e.clipboardData.data);
            editor.execCommand('paste');
            //editor.execCommand('insertandfocus', e.clipboardData.data);
        }
        */
    });

    editor.on('dom:keydown', function(e) {
        if (e.keyCode === 13) {
            if (e.ctrlKey) {
                console.log('Control Pressed');
                editor.execCommand('insertbr');
                e.frameEvent.halt();
            } else {
                //console.log('Not Pressed');
            }
            //console.log(e);
        }
    });
    editor.on('frame:ready', function() {
        Y.log('frame:ready, set content', 'info', 'editor');

        //This stops image resizes, but for all images!!
        //editor.execCommand('enableObjectResizing', false);
        //this.set('content', Y.one('#stub').get('innerHTML'));
        editor.frame.on('keydown', function(e) {
            if (e.charCode == 83 && (e.ctrlKey || e.metaKey)) {
                e.halt();
            }
        });
    });
    //editor.on('dom:focus', function() {console.log("Focus called");});
    //editor.on('dom:blur', function() {console.log("Blur called");});
    /*
    editor.on('nodeChange', function(e) {
        if (Y.UA.ie) {

            var inst = this.getInstance(),
    	    sel = inst.config.doc.selection.createRange();

            editor._lastBookmark = sel.getBookmark();

            //console.log(e.changedType + ' :: ' + editor._lastBookmark);

        }
    });

    editor.frame.on('dom:focus', function() {
        var inst = this.getInstance(), sel, cur;

        console.log("Focus called");

        if (editor._lastBookmark) {
        } else {
            sel = new inst.Selection();
            cur = sel.getCursor();

            if (cur && cur.size()) {
                sel.focusCursor(true, false);
            }
        }
    });

    editor.frame.on('dom:activate', function(e) {
        var inst = this.getInstance(), sel, cur;
        console.log('activate called');
            sel = inst.config.doc.selection.createRange();
            console.log('focus: ' + editor._lastBookmark);
            var bk = sel.moveToBookmark(editor._lastBookmark);
            sel.collapse(true);
            sel.select();
            console.log('Move: ' + bk);
            editor._lastBookmark = null;


    });
    editor.frame.on('dom:focusout', function(e) {
        console.log('focusout called');
    });
    editor.frame.on('dom:blur', function(e) {
        console.log("Blur called");
        if (!Y.UA.ie) {
            var inst = this.getInstance(),
                sel = new inst.Selection();
            sel.setCursor();
        }
    });
    */


    /*
    editor.on('dom:keyup', function(e) {
        var inst = this.getInstance(),
            sel = new inst.Selection();

        if (sel.anchorNode) {
            var txt = sel.anchorNode.get('text');
            Y.each(smilies, function(v, k) {
                //Hackey, doesn't work on new line.
                if (txt.indexOf(' ' + v) !== -1) {
                    sel.replace(v, '<span>&nbsp;<img src="smilies/' + k + '.gif">&nbsp;</span>', sel.anchorTextNode);
                }
            });
        }
    });
    */
    editor.render('#test');


    Y.on('click', function(e) {
        var html = editor.getContent();
        console.log(html);
    }, '#getHTML');

    Y.on('click', function(e) {
        editor.set('content', '<p>This is a test: ' + (new Date()) + '</p>');
    }, '#setHTML');

    Y.on('click', function(e) {
        editor.focus(true);
    }, '#focusEditor');

    Y.on('click', function(e) {
        Y.one('#test1').setStyle('display', 'block');
        editor.render('#test');
    }, '#showEditor');

});

</script>
</body>
</html>