search

spree-contrib / spree_editor

Rich text editor for Spree with Image and File uploading in-place.
http://guides.spreecommerce.org
BSD 3-Clause "New" or "Revised" License
112 stars 183 forks source link

spree_editor hooks editor javascript into head but spree loads javascript in the body now, so requirements (jquery) aren't available and loading fails #47

Closed garrettjacobson closed 11 years ago

garrettjacobson commented 11 years ago

Currently the editors are hooking admin_inside_head and result in a tag that looks like:

  <head data-hook="admin_inside_head">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <script src="/assets/tinymce/preinit.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/tiny_mce_jquery_src.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce/jquery.tinymce.js?body=1" type="text/javascript"></script>
<script src="/assets/tinymce-jquery.js?body=1" type="text/javascript"></script>

<script type="text/javascript">
  $(function() {
    var myConfig = { dompath: true };
    tinyMCE.init({"mode":"exact","editor_selector":"tinymce","theme":"advanced","language":"en","skin":"o2k7","plugins":"safari,style,layer,table,advhr,advimage,inlinepopups,insertdatetime,preview,media,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template","theme_advanced_buttons1":"cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview","theme_advanced_buttons2":"bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,sub,sup,|,bullist,numlist,|,outdent,indent,blockquote,|,","theme_advanced_buttons3":"styleselect,formatselect,fontselect,fontsizeselect,|,forecolor,backcolor","theme_advanced_buttons4":"tablecontrols,|,hr,removeformat,visualaid","theme_advanced_buttons5":"fullscreen,|,charmap,media,advhr,|,visualchars,blockquote","theme_advanced_toolbar_location":"top","theme_advanced_toolbar_align":"left","theme_advanced_statusbar_location":"top","theme_advanced_resizing":false,"elements":"product_description,page_body"});
  });
</script>
</head>

However, spree 2.0.3 appears to be loading all assets in the top of the body:

<body>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />

<title>
  Spree Administration: Orders
</title>

<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,cyrillic,greek,vietnamese' rel='stylesheet' type='text/css'>
<link href="/assets/jquery.alerts/jquery.alerts.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.alerts/jquery.alerts.spree.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/responsive-tables.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/normalize.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/skeleton.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui.datepicker.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.powertip.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/select2.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/admin/spree_admin.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/admin/spree_backend.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/admin/all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/admin/spree_social_products.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/admin/spree_editor.css?body=1" media="screen" rel="stylesheet" type="text/css" />

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-migrate-1.0.0.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/modernizr.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.cookie.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.delayedobserver.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.jstree/jquery.jstree.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.alerts/jquery.alerts.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.powertip.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.vAlign.js?body=1" type="text/javascript"></script>
<script src="/assets/css_browser_selector_dev.js?body=1" type="text/javascript"></script>
<script src="/assets/spin.js?body=1" type="text/javascript"></script>
<script src="/assets/trunk8.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.adaptivemenu.js?body=1" type="text/javascript"></script>
<script src="/assets/equalize.js?body=1" type="text/javascript"></script>
<script src="/assets/responsive-tables.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.horizontalNav.js?body=1" type="text/javascript"></script>
<script src="/assets/jsuri.js?body=1" type="text/javascript"></script>
<script src="/assets/spree.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/address_states.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/admin.js?body=1" type="text/javascript"></script>
<script src="/assets/handlebars.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/handlebar_extensions.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/variant_autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/taxon_autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/option_type_autocomplete.js?body=1" type="text/javascript"></script>
<script src="/assets/select2.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/spree-select2.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/user_picker.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/product_picker.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/calculator.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/checkouts/edit.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/gateway.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/image_settings.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/images/index.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/images/new.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/nested-attribute.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/orders/edit.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/orders/edit_form.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/payments/new.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/progress.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/promotions.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/shipments.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/states.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/stock_management.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/stock_transfer.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/taxon_tree_menu.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/taxonomy.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/underscore-min.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/zone.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/spree_backend.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/spree_editor.js?body=1" type="text/javascript"></script>
<script src="/assets/admin/all.js?body=1" type="text/javascript"></script>

This means that none of the requirements are already loaded (ex. jquery) and results in the editors not working properly. Seems to be doing the same thing for both supported editors.

garrettjacobson commented 11 years ago

FWIW, goodylabs/spree_editor seems to have a fix that works, but it does feel kinda strange having to use :insert_before => "div#wrapper" so it makes me feel like there might be a more architecturally correct way to insert the JS at the right place...

peterberkenbosch commented 11 years ago

see #49 When i got the specs running this will fix the issue you have as well.