Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.0.0/ember.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/ckeditor.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/adapters/jquery.min.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/contents.css" />
  <meta charset="utf-8">
  <title>WYSIWYG Test</title>
</head>
<body>
  <script type="text/x-handlebars" data-template-name="application">
    {{#each newsletters}}
      {{input value=label}}
      <br />
      {{input value=title}}
      <br />
      {{!-- This writes to the fixture
      {{textarea valueBinding="text"}}
      --}}
      {{!-- Trying components --}}
      {{field-editor valueBinding="text"}}
      <br />
      <button {{action "logText" this}}>Log Text</button>
      <button {{action "saveRecord" this}}>Save</button>
      <br />
    {{/each}}
  </script>
  <script type="text/x-handlebars" data-template-name="components/field-editor">
    <textarea>{{value}}</textarea>
  </script>
​
</body>
</html>
 
var App = Ember.Application.create();
​
App.ApplicationAdapter = DS.FixtureAdapter.extend();
​
App.Newsletter = DS.Model.extend({
    label: DS.attr("string"),
    title: DS.attr("string"),
    text: DS.attr("string")
});
​
App.Newsletter.FIXTURES = [
    {
        id: 1,
        label: "December 2013",
        title: "Newsletter 2",
        text: "<p>Here's newsletter 2</p>"
    },{
        id: 2,
        label: "January 2014",
        title: "Newsletter 1",
        text: "<p>Here's newsletter 1</p>"
    }
];
​
App.ApplicationRoute = Ember.Route.extend({
  setupController: function(controller, model){
    this.store.find("newsletter").then(function(newsletters){
      controller.set("newsletters", newsletters);
    });
  },
  actions: {
    saveRecord: function(record){
      console.log("Record: ", record);
      record.save().then(function saveCallback(json){
        console.log("Saved: ", json);
      });
    },
    logText: function(record){
      console.log(record.get("text"));
    }
  }
});
​
App.FieldEditorComponent = Ember.Component.extend({
  didInsertElement: function() {
    var self = this;
    var textarea_el = this.$('textarea');
​
    textarea_el.ckeditor(function(textarea) {
      var editor = $(textarea).ckeditor().editor;
​
      editor.on('change', function(event) {
        if (editor.checkDirty()) {
          //textarea_el.trigger('keyup');
          self.set("value", editor.getData());
        }
      });
    });
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kylecoberlypro
0viewers