Search code examples
javascriptjquerycreatejs

CreateJS working but does not show the Toolbar


As the title states I followed their documentation which it not the best for someone new to it or someone who is not that good with jQuery.

My head:

<head>
    {{ HTML::script('/themes/admin/js/jquery.js') }}
    {{ HTML::script('/themes/admin/js/jquery-ui.js') }}
    {{ HTML::script('/themes/admin/js/underscore-min.js') }}
    {{ HTML::script('/themes/admin/js/vie.js') }}

    {{ HTML::script('/packages/createjs/create.js') }}
        <script type="text/javascript">
        jQuery(document).ready(function() {

          jQuery('body').midgardCreate({
            url: function() { return '/admin/content/create'; }
          });

          jQuery('body').midgardToolbar({
            display: 'full'
          });

          jQuery('[about]').midgardEditable({
            vie: new VIE()
          });

        });
      </script>
</head>

My editable div under body:

<div class="well col-md-3" about="/content/create">
  <div property="content" contenteditable="true">
    Lorem ipsum.
  </div>
</div>

This lib seems really good for what I'm trying to implement however there really are not that many resources/tutorials on it.


Solution

  • Here you can find a fully working example

    http://jsfiddle.net/S9Hgg/5/

    In order to understand the exact libraries required.

    It is based on the demo found at createjs which is using hallo editor, http://createjs.org/demo/hallo/

    This is the code that starts it up,

    jQuery('body').midgardCreate({
        url: function() {
          return 'javascript:false;';
        },
        stanbolUrl: 'http://dev.iks-project.eu:8081',
        collectionWidgets: {
          'default': null,
          'feature': 'midgardCollectionAdd'
        }
      });
    

    You will find it commented out since your code works too. It works with jquery1.7.2 and jquery-ui1.8.18, but i think this has to do with the version of hallo. You may experiment with the latest versions and see.

    So the dependencies are,

    • jquery1.7.2
    • jquery-ui1.8.18
    • modernizr.custom.80485.js
    • underscore-min.js
    • backbone-min.js
    • vie-min.js
    • jquery.rdfquery.min.js
    • annotate-min.js
    • create.js
    • rangy-core-1.2.3.js
    • hallo.js
    • font-awesome.css
    • create-ui.css
    • midgardnotif.css
    • bootstrap.css
    • create-2012.css