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"}}
      --}}
      {{!-- This doesn't --}}
      {{view App.CKEditorView valueBinding="text"}}
      <br />
      <button {{action "saveRecord" this}}>Save</button>
      <br />
    {{/each}}
  </script>
  <script type="text/x-handlebars" data-template-name="ck-editor">
    {{value}}
  </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);
      });
    }
  }
});
​
App.CKEditorView = Ember.View.extend({
  tagName: "textarea",
  templateName: "ck-editor",
  elementValueDidChange: function(){
    console.log("Change occurred");
    this.$().ckeditor.editor.updateElement();
  },
  init: function(){
    this._super();
    
    this.on("focusOut", this, this.elementValueDidChange);
    this.on("change", this, this.elementValueDidChange);
    this.on("paste", this, this.elementValueDidChange);
    this.on("cut", this, this.elementValueDidChange);
    this.on("input", this, this.elementValueDidChange);
  },
  didInsertElement: function(){
    this.$().ckeditor();
  }
});
Output

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

Dismiss x
public
Bin info
kylecoberlypro
0viewers