|
| 1 | +<% content_for :head do %> |
| 2 | + <%= stylesheet_link_tag 'editor' %> |
| 3 | +<% end %> |
| 4 | + |
| 5 | +<div class="editor-mask-container"> |
| 6 | + <div class="editor-mask"></div |
| 7 | + <div class="editor-mask-label"><%= t("editor.loading") %></div |
| 8 | +</div> |
| 9 | + |
| 10 | +<!-- Skin CSS file --> |
| 11 | +<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/assets/skins/sam/skin.css"> |
| 12 | +<!-- Utility Dependencies --> |
| 13 | +<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> |
| 14 | +<script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> |
| 15 | +<!-- Needed for Menus, Buttons and Overlays used in the Toolbar --> |
| 16 | +<script src="http://yui.yahooapis.com/2.8.2r1/build/container/container_core-min.js"></script> |
| 17 | +<script src="http://yui.yahooapis.com/2.8.2r1/build/menu/menu-min.js"></script> |
| 18 | +<script src="http://yui.yahooapis.com/2.8.2r1/build/button/button-min.js"></script> |
| 19 | +<!-- Source file for Rich Text Editor--> |
| 20 | +<script src="http://yui.yahooapis.com/2.8.2r1/build/editor/editor-min.js"></script> |
| 21 | + |
| 22 | +<script type="text/javascript" charset="utf-8"> |
| 23 | + var <%= editor_id %>_editor = new YAHOO.widget.Editor('<%= editor_id %>', { |
| 24 | + height: '300px', |
| 25 | + width: '790px', |
| 26 | + animate: true, |
| 27 | + autoHeight: true, |
| 28 | + handleSubmit: true, |
| 29 | + toolbar: { |
| 30 | + collapse: true, |
| 31 | + titlebar: false, |
| 32 | + draggable: false, |
| 33 | + buttonType: 'advanced', |
| 34 | + buttons: [ |
| 35 | + { group: 'fontstyle', label: '<%= t("editor.font_name_and_size") %>', |
| 36 | + buttons: [ |
| 37 | + { type: 'select', label: 'Arial', value: 'fontname', disabled: true, |
| 38 | + menu: [ |
| 39 | + { text: 'Arial', checked: true }, |
| 40 | + { text: 'Arial Black' }, |
| 41 | + { text: 'Comic Sans MS' }, |
| 42 | + { text: 'Courier New' }, |
| 43 | + { text: 'Lucida Console' }, |
| 44 | + { text: 'Tahoma' }, |
| 45 | + { text: 'Times New Roman' }, |
| 46 | + { text: 'Trebuchet MS' }, |
| 47 | + { text: 'Verdana' } |
| 48 | + ] |
| 49 | + }, |
| 50 | + { type: 'spin', label: '13', value: 'fontsize', range: [ 9, 75 ], disabled: true } |
| 51 | + ] |
| 52 | + }, |
| 53 | + { type: 'separator' }, |
| 54 | + { group: 'textstyle', label: '<%= t("editor.font_style") %>', |
| 55 | + buttons: [ |
| 56 | + { type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' }, |
| 57 | + { type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' }, |
| 58 | + { type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' }, |
| 59 | + { type: 'separator' }, |
| 60 | + { type: 'push', label: 'Subscript', value: 'subscript', disabled: true }, |
| 61 | + { type: 'push', label: 'Superscript', value: 'superscript', disabled: true }, |
| 62 | + { type: 'separator' }, |
| 63 | + { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true }, |
| 64 | + { type: 'color', label: 'Background Color', value: 'backcolor', disabled: true }, |
| 65 | + { type: 'separator' }, |
| 66 | + { type: 'push', label: 'Remove Formatting', value: 'removeformat', disabled: true }, |
| 67 | + { type: 'push', label: 'Show/Hide Hidden Elements', value: 'hiddenelements' } |
| 68 | + ] |
| 69 | + }, |
| 70 | + { type: 'separator' }, |
| 71 | + { group: 'alignment', label: '<%= t("editor.alignment") %>', |
| 72 | + buttons: [ |
| 73 | + { type: 'push', label: 'Align Left CTRL + SHIFT + [', value: 'justifyleft' }, |
| 74 | + { type: 'push', label: 'Align Center CTRL + SHIFT + |', value: 'justifycenter' }, |
| 75 | + { type: 'push', label: 'Align Right CTRL + SHIFT + ]', value: 'justifyright' }, |
| 76 | + { type: 'push', label: 'Justify', value: 'justifyfull' } |
| 77 | + ] |
| 78 | + }, |
| 79 | + { type: 'separator' }, |
| 80 | + { group: 'parastyle', label: '<%= t("editor.paragraph_style") %>', |
| 81 | + buttons: [ |
| 82 | + { type: 'select', label: 'Normal', value: 'heading', disabled: true, |
| 83 | + menu: [ |
| 84 | + { text: 'Normal', value: 'none', checked: true }, |
| 85 | + { text: 'Header 1', value: 'h1' }, |
| 86 | + { text: 'Header 2', value: 'h2' }, |
| 87 | + { text: 'Header 3', value: 'h3' }, |
| 88 | + { text: 'Header 4', value: 'h4' }, |
| 89 | + { text: 'Header 5', value: 'h5' }, |
| 90 | + { text: 'Header 6', value: 'h6' } |
| 91 | + ] |
| 92 | + } |
| 93 | + ] |
| 94 | + }, |
| 95 | + { type: 'separator' }, |
| 96 | + { group: 'indentlist', label: '<%= t("editor.indenting_and_lists") %>', |
| 97 | + buttons: [ |
| 98 | + { type: 'push', label: 'Indent', value: 'indent', disabled: true }, |
| 99 | + { type: 'push', label: 'Outdent', value: 'outdent', disabled: true }, |
| 100 | + { type: 'push', label: 'Create an Unordered List', value: 'insertunorderedlist' }, |
| 101 | + { type: 'push', label: 'Create an Ordered List', value: 'insertorderedlist' } |
| 102 | + ] |
| 103 | + }, |
| 104 | + { type: 'separator' }, |
| 105 | + { group: 'insertitem', label: '<%= t("editor.insert_item") %>', |
| 106 | + buttons: [ |
| 107 | + { type: 'push', label: 'HTML Link CTRL + SHIFT + L', value: 'createlink', disabled: true }, |
| 108 | + { type: 'push', label: '<%= t("editor.insert_image") %>', value: 'insertimage' } |
| 109 | + ] |
| 110 | + } |
| 111 | + ] |
| 112 | + } |
| 113 | + }); |
| 114 | + |
| 115 | + <%= editor_id %>_editor.on('toolbarLoaded', function() { |
| 116 | + var imageUploadConfig = { |
| 117 | + type: 'push', |
| 118 | + label: '<%= t("editor.upload_image") %>', |
| 119 | + value: 'imageUpload' |
| 120 | + }; |
| 121 | + <%= editor_id %>_editor.toolbar.addButtonToGroup(imageUploadConfig, 'insertitem'); |
| 122 | + |
| 123 | + var fileUploadConfig = { |
| 124 | + type: 'push', |
| 125 | + label: '<%= t("editor.upload_file") %>', |
| 126 | + value: 'fileUpload' |
| 127 | + }; |
| 128 | + <%= editor_id %>_editor.toolbar.addButtonToGroup(fileUploadConfig, 'insertitem'); |
| 129 | + }); |
| 130 | + |
| 131 | + <%= editor_id %>_editor.addListener('editorContentLoaded', function() { |
| 132 | + $(".yui-toolbar-imageUpload").upload({ |
| 133 | + name: 'content_image[attachment]', |
| 134 | + action: '/content_images', |
| 135 | + enctype: 'multipart/form-data', |
| 136 | + params: {'content_image[viewable_type]': 'Page', 'content_image[viewable_id]': '<%= @page.id %>]'}, |
| 137 | + autoSubmit: true, |
| 138 | + onSubmit: function() { |
| 139 | + $(".editor-mask-container").addClass("active"); |
| 140 | + }, |
| 141 | + onComplete: function(image_src) { |
| 142 | + var img_html = "<img src='"+image_src+"'/>"; |
| 143 | + <%= editor_id %>_editor.execCommand('inserthtml', img_html); |
| 144 | + $(".editor-mask-container").removeClass("active"); |
| 145 | + } |
| 146 | + }); |
| 147 | + |
| 148 | + $(".yui-toolbar-fileUpload").upload({ |
| 149 | + name: 'content_file[attachment]', |
| 150 | + action: '/content_files', |
| 151 | + enctype: 'multipart/form-data', |
| 152 | + params: {'content_file[viewable_type]': 'Page', 'content_file[viewable_id]': '<%= @page.id %>]'}, |
| 153 | + autoSubmit: true, |
| 154 | + onSubmit: function() { |
| 155 | + $(".editor-mask-container").addClass("active"); |
| 156 | + }, |
| 157 | + onComplete: function(file_url_and_name) { |
| 158 | + var file_url = file_url_and_name.split(",")[0]; |
| 159 | + var file_name_original = file_url_and_name.split(",")[1]; |
| 160 | + $(".editor-mask-container").removeClass("active"); |
| 161 | + var file_name = prompt('<%= t("editor.enter_file_name") %>', file_name_original); |
| 162 | + var link_html = "<a href='"+file_url+"'/>"+file_name+"</a>"; |
| 163 | + <%= editor_id %>_editor.execCommand('inserthtml', link_html); |
| 164 | + } |
| 165 | + }); |
| 166 | + }); |
| 167 | + |
| 168 | + <%= editor_id %>_editor.render(); |
| 169 | + |
| 170 | + $("#<%= editor_id %>_switch_simple, #<%= editor_id %>_switch_rich").click(function() { |
| 171 | + $("#<%= editor_id %>_switch_simple, #<%= editor_id %>_switch_rich").toggle(); |
| 172 | + return false; |
| 173 | + }); |
| 174 | + $("#<%= editor_id %>_switch_simple").click(function() { |
| 175 | + page_body_editor.saveHTML(); |
| 176 | + |
| 177 | + var fc = page_body_editor.get('element').previousSibling, |
| 178 | + el = page_body_editor.get('element'); |
| 179 | + |
| 180 | + YAHOO.util.Dom.setStyle(fc, 'position', 'absolute'); |
| 181 | + YAHOO.util.Dom.setStyle(fc, 'top', '-9999px'); |
| 182 | + YAHOO.util.Dom.setStyle(fc, 'left', '-9999px'); |
| 183 | + page_body_editor.get('element_cont').removeClass('yui-editor-container'); |
| 184 | + YAHOO.util.Dom.setStyle(el, 'visibility', 'visible'); |
| 185 | + YAHOO.util.Dom.setStyle(el, 'top', ''); |
| 186 | + YAHOO.util.Dom.setStyle(el, 'left', ''); |
| 187 | + YAHOO.util.Dom.setStyle(el, 'position', 'static'); |
| 188 | + YAHOO.util.Dom.setStyle(el, 'width', '780px'); |
| 189 | + return false; |
| 190 | + }); |
| 191 | + $("#<%= editor_id %>_switch_rich").click(function() { |
| 192 | + var fc = page_body_editor.get('element').previousSibling, |
| 193 | + el = page_body_editor.get('element'); |
| 194 | + |
| 195 | + YAHOO.util.Dom.setStyle(fc, 'position', 'static'); |
| 196 | + YAHOO.util.Dom.setStyle(fc, 'top', '0'); |
| 197 | + YAHOO.util.Dom.setStyle(fc, 'left', '0'); |
| 198 | + YAHOO.util.Dom.setStyle(el, 'visibility', 'hidden'); |
| 199 | + YAHOO.util.Dom.setStyle(el, 'top', '-9999px'); |
| 200 | + YAHOO.util.Dom.setStyle(el, 'left', '-9999px'); |
| 201 | + YAHOO.util.Dom.setStyle(el, 'position', 'absolute'); |
| 202 | + page_body_editor.get('element_cont').addClass('yui-editor-container'); |
| 203 | + page_body_editor._setDesignMode('on'); |
| 204 | + page_body_editor.setEditorHTML(page_body_editor.get('textarea').value); |
| 205 | + return false; |
| 206 | + }); |
| 207 | +</script> |
0 commit comments