edit.php revision 0f1450734e0b54ad8aff1d00e374ced2a37e1444
0N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2362N/A<html>
0N/A<head>
0N/A <title>YUI: Editor</title>
0N/A <style type="text/css" media="screen">
0N/A p, h2 {
0N/A margin: 1em;
0N/A }
0N/A #test1 {
0N/A height: 355px;
0N/A border: 3px solid red;
0N/A width: 740px;
0N/A margin: 1em;
0N/A position: absolute;
2362N/A top: 100px;
0N/A left: 100px;
0N/A display: none;
0N/A }
0N/A #test iframe {
0N/A border: 1px solid blue;
0N/A }
0N/A #test {
0N/A height: 260px;
0N/A width: 550px;
0N/A border-top: 3px solid red;
0N/A float: left;
0N/A padding: 5px;
0N/A _background-color: orange;
0N/A }
0N/A #test1 button {
0N/A background-color: #ccc;
4378N/A }
4378N/A #test1 button.selected {
4378N/A background-color: green;
4378N/A }
4378N/A #stub {
4378N/A display: none;
4378N/A }
4378N/A #smilies {
4378N/A width: 175px;
0N/A height: 260px;
0N/A border-top: 3px solid red;
0N/A border-left: 3px solid red;
0N/A float: right;
0N/A }
0N/A
0N/A #smilies img {
0N/A cursor: pointer;
0N/A margin: 5px;
0N/A }
0N/A #test_render {
0N/A position: absolute;
0N/A top: 500px;
0N/A }
0N/A </style>
0N/A</head>
0N/A<body class="yui-skin-sam">
0N/A
0N/A<h1 tabindex="1">Editor Testing</h1>
0N/A
0N/A<div id="test1" role="widget">
0N/A <div role="toolbar">
0N/A <select id="fontname">
0N/A <option selected> </option>
0N/A <option>Arial</option>
0N/A <option>Arial Black</option>
0N/A <option>Comic Sans MS</option>
0N/A <option>Courier New</option>
0N/A <option>Lucida Console</option>
0N/A <option>Tahoma</option>
0N/A <option>Times New Roman</option>
0N/A <option>Trebuchet MS</option>
0N/A <option>Verdana</option>
0N/A </select>
0N/A <select id="fontsize">
0N/A <option selected> </option>
0N/A <option value="1">10</option>
0N/A <option value="2">13</option>
0N/A <option value="3">16</option>
0N/A <option value="4">18</option>
0N/A <option value="5">24</option>
0N/A <option value="6">32</option>
0N/A <option value="7">48</option>
0N/A </select>
0N/A <button value="bold">Bold</button>
0N/A <button value="italic">Italic</button>
0N/A <button value="underline">Underline</button>
0N/A <button value="foo">Foo</button>
0N/A <button value="img">InsertImage</button>
0N/A <button value="wrap">Wrap</button>
0N/A <button value="inserthtml">InsertHTML</button>
0N/A <button value="addclass">AddClass</button>
0N/A <button value="removeclass">RemoveClass</button>
0N/A <button value="bidi">BiDi</button>
0N/A <button value="indent">Indent</button>
0N/A <button value="outdent">Outdent</button>
0N/A <button value="insertorderedlist">InsertOrderedList</button>
0N/A <button value="insertunorderedlist">InsertUnOrderedList</button>
0N/A <button value="createlink">createlink</button>
0N/A <button value="inserthorizontalrule">inserthorizontalrule</button>
0N/A <button value="backcolor">backcolor</button>
0N/A <button value="forecolor">forecolor</button>
0N/A <button value="justifycenter">justifycenter</button>
0N/A <button value="justifyleft">justifyleft</button>
0N/A <button value="justifyright">justifyright</button>
0N/A <button value="justifyfull">justifyfull</button>
0N/A <button value="replacecontent">ReplaceContent</button>
0N/A </div>
0N/A <div id="test"></div>
0N/A <div id="smilies"></div>
0N/A</div>
0N/A
0N/A<button id="getHTML">Get HTML</button>
0N/A<button id="setHTML">Set HTML</button>
0N/A<button id="focusEditor">Focus Editor</button>
0N/A<button id="showEditor">Show Editor</button>
0N/A
0N/A<div id="stub">
0N/A</div>
0N/A <!---div><br></div>
0N/A <div style="font-family: ; font-size: ;"><br>
0N/A <div style="font-family: times new roman, new york, times, serif; font-size: 12pt;">
0N/A <font size="2" face="Tahoma">
0N/A <hr size="1">
0N/A <b><span style="font-weight:bold;">From:</span></b> yahoo-account-services-us@cc.yahoo-inc.com<br>
0N/A <b><span style="font-weight: bold;">To:</span></b> hb.stone@yahoo.com<br>
0N/A <b><span style="font-weight: bold;">Cc:</span></b> <br>
0N/A <b><span style="font-weight: bold;">Sent:</span></b> 2010-07-09 14:19:12<br>
0N/A <b><span style="font-weight: bold;">Subject:</span></b> Verify this email address<br>
0N/A </font><br>
0N/A <div id=yiv759936264>
0N/A <div style="direction:ltr;">
0N/A <img src="https://s.yimg.com/lq/i/brand/purplelogo/base/us.gif" vspace="10" hspace="20">
0N/A <hr noshade width="95%"> <br><br>
0N/A <table border="0" width="735">
0N/A <tbody>
0N/A <tr>
0N/A <td width="10%">&nbsp;</td>
0N/A <td width="80%"> <font size="+1" color="#631266" face="Arial"> <b>Verify this email address</b> </font> <br> </td>
0N/A <td width="10%">&nbsp;</td>
0N/A </tr>
0N/A <tr>
0N/A <td colspan="3">&nbsp;</td>
0N/A </tr>
0N/A </tbody>
0N/A </table>
0N/A <hr noshade width="95%">
0N/A <table width="750">
0N/A <tbody>
0N/A <tr>
0N/A <td width="2.5%">&nbsp;</td>
0N/A <td> <font face="Arial" size="-3"></font> </td>
0N/A </tr>
0N/A <tr>
0N/A <td width="2.5%">&nbsp;</td>
0N/A <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>
0N/A </tr>
0N/A </tbody>
0N/A </table>
0N/A </div>
0N/A </div><br><br>
0N/A </div>
0N/A </div>
0N/A</div-->
0N/A<!--p><b>This is a <u>test. <i>This is</i> another</u> test.</b></p>
0N/AThis is some <strong>other</strong> loose test.
0N/A<p>This <strong>is</strong> <font face="Courier New">another</font> test.</p>
0N/A<ul>
0N/A <li style="font-family: courier new">Item #1</li>
0N/A <li>Item #1</li>
0N/A <li>Item #1</li>
0N/A</ul>
0N/A<hr>
0N/A<p>This <strong>is</strong> <font face="Courier New">another</font> test.</p>
0N/A<ul>
0N/A</div-->
0N/A
0N/A<script type="text/javascript" src="../../build/yui/yui-debug.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<!--script type="text/javascript" src="http://yui.yahooapis.com/3.1.0/build/yui/yui-debug.js?bust=<?php echo(mktime()); ?>"></script-->
0N/A
0N/A
0N/A<script type="text/javascript" src="js/editor-base.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<script type="text/javascript" src="js/frame.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<script type="text/javascript" src="js/exec-command.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<script type="text/javascript" src="js/selection.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<script type="text/javascript" src="js/lists.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<script type="text/javascript" src="js/editor-tab.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<script type="text/javascript" src="js/createlink-base.js?bust=<?php echo(mktime()); ?>"></script>
0N/A<script type="text/javascript" src="js/editor-bidi.js?bust=<?php echo(mktime()); ?>"></script>
0N/A
0N/A<script type="text/javascript">
0N/Avar yConfig = {
0N/A debug: true,
0N/A filter: 'DEBUG',
0N/A allowRollup: false,
0N/A logExclude: {
0N/A 'yui': true,
0N/A 'event': true,
0N/A base: true,
0N/A attribute: true,
0N/A augment: true,
0N/A get: true,
0N/A loader: true,
0N/A Selector: true//,
0N/A //frame: true
0N/A },
0N/A throwFail: true
0N/A};
0N/A
0N/AYUI(yConfig).use('node', 'selector-css3', 'base', 'editor-base', 'frame', 'substitute', 'exec-command', 'editor-lists', 'createlink-base', 'editor-bidi', function(Y) {
0N/A //console.log(Y, Y.id);
0N/A
0N/A Y.delegate('click', function(e) {
0N/A e.target.toggleClass('selected');
0N/A var cmd = e.target.get('innerHTML').toLowerCase(),
0N/A val = '';
0N/A switch (cmd) {
0N/A case 'wrap':
0N/A val = 'del';
0N/A break;
0N/A case 'addclass':
0N/A case 'removeclass':
0N/A val = 'foo';
0N/A break;
0N/A case 'insertimage':
0N/A val = 'http://farm3.static.flickr.com/2723/4014885243_58772b8ff8_s_d.jpg';
0N/A break;
0N/A case 'inserthtml':
0N/A val = ' <span style="color: red; background-color: blue;">Inserted Text (' + (new Date()).toString() + ')</span> ';
0N/A break;
0N/A case 'backcolor':
0N/A val = '#33CC99';
0N/A break;
0N/A case 'forecolor':
0N/A val = '#0000FF';
0N/A break;
0N/A }
0N/A editor.frame.focus();
0N/A var ex_return = editor.execCommand(cmd, val);
0N/A //console.info('Return: ', cmd, ' :: ', ex_return);
0N/A }, '#test1 > div', 'button');
0N/A
0N/A Y.delegate('change', function(e) {
0N/A var cmd = e.currentTarget.get('id'),
0N/A val = e.currentTarget.get('value');
0N/A
0N/A editor.frame.focus();
0N/A var ex_return = editor.execCommand(cmd, val);
0N/A }, '#test1 > div', 'select');
0N/A
0N/A
0N/A var smilies = [
0N/A null,
0N/A ':)',
0N/A ':(',
0N/A ';)',
0N/A ':D',
0N/A ';;)',
0N/A '>:D<',
0N/A ':-/',
0N/A ':x',
0N/A ':">',
0N/A ':P'
0N/A ];
0N/A
0N/A var s_cont = Y.one('#smilies');
0N/A Y.each(smilies, function(v, k) {
0N/A if (v) {
0N/A s_cont.append('<img src="smilies/' + k + '.gif" alt="Click to insert">');
0N/A }
0N/A });
0N/A s_cont.delegate('click', function(e) {
0N/A var img = e.currentTarget, inst = editor.getInstance();
0N/A editor.focus();
0N/A editor.execCommand('insertandfocus', '<span>:)</span>');
0N/A }, 'img');
0N/A
0N/A var buttons = Y.all('#test1 button');
0N/A var f_options = Y.all('#fontname option');
0N/A var s_options = Y.all('#fontsize option');
0N/A
0N/A var updateButtons = function(e) {
0N/A //console.log(e);
0N/A var tar = e.changedNode;
0N/A if (tar) {
0N/A var cmds = e.commands;
0N/A
0N/A buttons.removeClass('selected');
0N/A buttons.each(function(v) {
0N/A if (cmds[v.get('value')]) {
0N/A v.addClass('selected');
0N/A }
0N/A });
0N/A
0N/A var fname = e.fontFamily,
0N/A size = e.fontSize;
0N/A f_options.item(0).set('selected', true);
0N/A if (fname) {
0N/A f_options.each(function(v) {
0N/A var val = v.get('value').toLowerCase();
0N/A if (val === fname.toLowerCase()) {
0N/A v.set('selected', true);
0N/A }
0N/A });
0N/A }
0N/A s_options.item(0).set('selected', true);
0N/A if (size) {
0N/A size = size.replace('px', '');
0N/A s_options.each(function(v) {
0N/A var val = v.get('value').toLowerCase(),
0N/A txt = v.get('text');
0N/A if (size === txt) {
0N/A v.set('selected', true);
0N/A }
0N/A });
0N/A }
0N/A }
0N/A };
0N/A
0N/A //Mixin the new commands
0N/A Y.mix(Y.Plugin.ExecCommand.COMMANDS, {
0N/A foo: function() {
0N/A alert('You clicked on Foo');
0N/A },
0N/A replacecontent: function() {
0N/A var inst = this.getInstance(),
0N/A sel = new inst.Selection();
0N/A
0N/A sel.setCursor();
0N/A var html = this.get('host').get('content');
0N/A html = '<div><p>Added From Selection Cache Test.</p>' + html + '</div>';
0N/A this.get('host').set('content', html);
0N/A var cur = sel.focusCursor();
0N/A }
0N/A });
0N/A
0N/A
0N/A editor = new Y.EditorBase({
0N/A content: Y.one('#stub').get('innerHTML'),
0N/A extracss: 'body { color: red; } p { border: 1px solid green; padding: .25em; margin: 1em; }'
0N/A });
0N/A editor.after('nodeChange', function(e) {
0N/A //if (e.changedType !== 'execcommand') {
0N/A switch (e.changedType) {
0N/A case 'keyup':
0N/A case 'mouseup':
0N/A updateButtons(e);
0N/A break;
0N/A }
0N/A
0N/A if (e.changedType === 'keyup') {
0N/A if (e.changedNode) {
0N/A var txt = e.changedNode.get('text');
0N/A Y.each(smilies, function(v, k) {
0N/A //Hackey, doesn't work on new line.
0N/A if (txt.indexOf(' ' + v) !== -1) {
0N/A e.selection.replace(v, '<span>&nbsp;<img src="smilies/' + k + '.gif">&nbsp;</span>');
0N/A }
0N/A });
0N/A }
0N/A }
0N/A
0N/A });
0N/A //Disabled for IE testing..
0N/A //editor.plug(Y.Plugin.EditorLists);
0N/A //editor.plug(Y.Plugin.EditorTab);
0N/A editor.plug(Y.Plugin.EditorBidi);
0N/A
0N/A editor.on('frame:keydown', function(e) {
0N/A if (e.keyCode === 13) {
0N/A if (e.ctrlKey) {
0N/A console.log('Control Pressed');
0N/A editor.execCommand('insertbr');
0N/A e.frameEvent.halt();
0N/A } else {
0N/A //console.log('Not Pressed');
0N/A }
0N/A //console.log(e);
0N/A }
0N/A });
0N/A editor.on('frame:ready', function() {
0N/A Y.log('frame:ready, set content', 'info', 'editor');
0N/A
0N/A //This stops image resizes, but for all images!!
0N/A //editor.execCommand('enableObjectResizing', false);
0N/A //this.set('content', Y.one('#stub').get('innerHTML'));
0N/A editor.frame.on('keydown', function(e) {
0N/A if (e.charCode == 83 && (e.ctrlKey || e.metaKey)) {
0N/A e.halt();
0N/A }
0N/A });
0N/A });
0N/A /*
0N/A editor.on('frame:keyup', function(e) {
0N/A var inst = this.getInstance(),
0N/A sel = new inst.Selection();
0N/A
0N/A if (sel.anchorNode) {
0N/A var txt = sel.anchorNode.get('text');
0N/A Y.each(smilies, function(v, k) {
0N/A //Hackey, doesn't work on new line.
0N/A if (txt.indexOf(' ' + v) !== -1) {
0N/A sel.replace(v, '<span>&nbsp;<img src="smilies/' + k + '.gif">&nbsp;</span>', sel.anchorTextNode);
0N/A }
0N/A });
0N/A }
0N/A });
0N/A */
0N/A //editor.render('#test');
0N/A
0N/A
0N/A Y.on('click', function(e) {
0N/A var html = editor.getContent();
0N/A console.log(html);
0N/A }, '#getHTML');
0N/A
0N/A Y.on('click', function(e) {
0N/A editor.set('content', '<p>This is a test: ' + (new Date()) + '</p>');
0N/A }, '#setHTML');
0N/A
0N/A Y.on('click', function(e) {
0N/A editor.focus(true);
0N/A }, '#focusEditor');
0N/A
0N/A Y.on('click', function(e) {
0N/A Y.one('#test1').setStyle('display', 'block');
0N/A editor.render('#test');
0N/A }, '#showEditor');
0N/A
0N/A});
0N/A
0N/A</script>
0N/A</body>
0N/A</html>
0N/A