OSDN Git Service

WYSIWYG editor change to YUI rich text editor.
[feedblog/feedgenerator.git] / erbtemp / newentry.html.erb
index 30bc160..9e9542e 100644 (file)
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
         <title><%= APPTITLE %></title>
         <link rel="stylesheet" href="./erbtemp/stylesheet.css" type="text/css">
-        <% if params["action"].blank? || params["action"] == "back" %>
-        <!--[if IE]>
-            <script type="text/javascript" src="./openwysiwyg/scripts/wysiwyg.js">
-            </script>
-            <script type="text/javascript">
-            WYSIWYG.attach('contenteditor');
-            </script>
-        <![endif]--><% end %>
-        <![if !IE]>
-            <script type="text/javascript" src="./jquery/jquery.js">
-            </script>
-            <script type="text/javascript" src="./wymeditor/jquery.wymeditor.js">
-            </script>
-            <script type="text/javascript">
-                jQuery(function(){
-                    jQuery('#contenteditor').wymeditor({
-                        updateSelector: ".wymupdate",
-                        updateSelector: "input",
-                        iframeBasePath: "main_"
-                    });
-                });
-            </script>
-        <![endif]>
-        <script type="text/javascript">
+        <link rel="stylesheet" type="text/css" href="./yui/build/menu/assets/skins/sam/menu.css" />
+        <link rel="stylesheet" type="text/css" href="./yui/build/button/assets/skins/sam/button.css" />
+        <link rel="stylesheet" type="text/css" href="./yui/build/fonts/fonts-min.css" />
+        <link rel="stylesheet" type="text/css" href="./yui/build/container/assets/skins/sam/container.css" />
+        <link rel="stylesheet" type="text/css" href="./yui/build/editor/assets/skins/sam/editor.css" />
+        <script type="text/javascript" src="./yui/build/yahoo-dom-event/yahoo-dom-event.js">
+        </script>
+        <script type="text/javascript" src="./yui/build/animation/animation-min.js">
+        </script>
+        <script type="text/javascript" src="./yui/build/element/element-min.js">
+        </script>
+        <script type="text/javascript" src="./yui/build/container/container-min.js">
+        </script>
+        <script type="text/javascript" src="./yui/build/menu/menu-min.js">
+        </script>
+        <script type="text/javascript" src="./yui/build/button/button-min.js">
+        </script>
+        <script type="text/javascript" src="./yui/build/editor/editor-min.js">
+        </script>
+        <script>
+            (function(){
+                var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
+                
+                var myConfig = {
+                    height: '400px',
+                    width: '100%',
+                    animate: true,
+                    dompath: true,
+                    focusAtStart: true,
+                    handleSubmit: true
+                };
+                
+                var state = 'off';
+                YAHOO.log('Set state to off..', 'info', 'example');
+                
+                YAHOO.log('Create the Editor..', 'info', 'example');
+                var myEditor = new YAHOO.widget.Editor('contenteditor', myConfig);
+                myEditor.on('toolbarLoaded', function(){
+                    var codeConfig = {
+                        type: 'push',
+                        label: 'Edit HTML Code',
+                        value: 'editcode'
+                    };
+                    YAHOO.log('Create the (editcode) Button', 'info', 'example');
+                    this.toolbar.addButtonToGroup(codeConfig, 'insertitem');
+                    
+                    this.toolbar.on('editcodeClick', function(){
+                        var ta = this.get('element'), iframe = this.get('iframe').get('element');
+                        
+                        if (state == 'on') {
+                            state = 'off';
+                            this.toolbar.set('disabled', false);
+                            YAHOO.log('Show the Editor', 'info', 'example');
+                            YAHOO.log('Inject the HTML from the textarea into the editor', 'info', 'example');
+                            this.setEditorHTML(ta.value);
+                            if (!this.browser.ie) {
+                                this._setDesignMode('on');
+                            }
+                            
+                            Dom.removeClass(iframe, 'editor-hidden');
+                            Dom.addClass(ta, 'editor-hidden');
+                            this.show();
+                            this._focusWindow();
+                        }
+                        else {
+                            state = 'on';
+                            YAHOO.log('Show the Code Editor', 'info', 'example');
+                            this.cleanHTML();
+                            YAHOO.log('Save the Editors HTML', 'info', 'example');
+                            Dom.addClass(iframe, 'editor-hidden');
+                            Dom.removeClass(ta, 'editor-hidden');
+                            this.toolbar.set('disabled', true);
+                            this.toolbar.getButtonByValue('editcode').set('disabled', false);
+                            this.toolbar.selectButton('editcode');
+                            this.dompath.innerHTML = 'Editing HTML Code';
+                            this.hide();
+                        }
+                        return false;
+                    }, this, true);
+                    
+                    this.on('cleanHTML', function(ev){
+                        YAHOO.log('cleanHTML callback fired..', 'info', 'example');
+                        this.get('element').value = ev.html;
+                    }, this, true);
+                    
+                    this.on('afterRender', function(){
+                        var wrapper = this.get('editor_wrapper');
+                        wrapper.appendChild(this.get('element'));
+                        this.setStyle('width', '100%');
+                        this.setStyle('height', '100%');
+                        this.setStyle('visibility', '');
+                        this.setStyle('top', '');
+                        this.setStyle('left', '');
+                        this.setStyle('position', '');
+                        
+                        this.addClass('editor-hidden');
+                    }, this, true);
+                }, myEditor, true);
+                myEditor.render();
+                
+            })();
+            
             function switchsubmit(form, action){
                 document.getElementsByName("action").item(0).value = action;
                 form.submit();
             }
         </script>
+        <style>
+            .yui-skin-sam .yui-toolbar-container .yui-toolbar-editcode span.yui-toolbar-icon {
+                background-image: url( ./yui/assets/html_editor.gif );
+                background-position: 0 1px;
+                left: 5px;
+            }
+            
+            .yui-skin-sam .yui-toolbar-container .yui-button-editcode-selected span.yui-toolbar-icon {
+                background-image: url( ./yui/assets/html_editor.gif );
+                background-position: 0 1px;
+                left: 5px;
+            }
+            
+            .editor-hidden {
+                visibility: hidden;
+                top: -9999px;
+                left: -9999px;
+                position: absolute;
+            }
+            
+            textarea {
+                border: 0;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
     </head>
-    <body>
+    <body class="yui-skin-sam">
         <br>
         <%= menu %>
         <br>
                             <td class="forminput">
                                 <% if val != "content" %>
                                 <input type="text" name="<%= val %>" value="<%= entry.send(val) %>" style="width: 100%"><% else %>
-                                <textarea name="<%= val %>" rows="10" style="width: 100%" id="contenteditor"><%= entry.content_for_generator %></textarea>
+                                <textarea name="<%= val %>" rows="10" style="width: 100%" id="contenteditor">
+                                    <%= entry.content_for_generator %>
+                                </textarea>
                                 <% end %>
                             </td>
                         </tr>
                             <td class="forminput">
                                 <% date = Time.now.iso8601 %>
                                 <% if val == "content" %>
-                                <textarea name="<%= val %>" rows="10" style="width: 100%" id="contenteditor"><%= entry.content_for_generator %></textarea>
+                                <textarea name="<%= val %>" rows="10" style="width: 100%" id="contenteditor">
+                                    <% if entry.content.empty? %>
+                                    <p><br></p>
+                                    <% else %>
+                                    <%= entry.content_for_generator %>
+                                    <% end %>
+                                </textarea>
                                 <% elsif val == "entryid" %>
                                 <input type="text" name="<%= val %>" value="<%= db["feed"].feedid %>?<%= date %>" style="width: 100%"><% elsif val == "updated" || val == "published" %>
                                 <input type="text" name="<%= val %>" value="<%= date %>" style="width: 100%"><% elsif val == "url" %>