WYSIWYG / Rich Text Editor That's Compatible with Ember.js

1

Hey gang, seemingly simple question that this forum and SO are leaving me high-and-dry on.

Right now, I have a textarea that I want to store/edit HTML in. As a textarea, it works just fine- reads/writes from the server and displays on the page correctly. I want to put a bare-bones WYSIWYG on it (line breaks, basic formatting, etc).

What are folks using for this? jWYSIWYG was a bit much, and now I’ve burned a day trying to get CKEditor to work. From a UX standpoint, I’d kind of prefer the standard box to something inline, but I’m at the point where the amount of time I’ve spent on this is greatly exceeding my interest in the feature- I’ll take whatever works. This seems like something that the community has probably already solved a hundred times over, and my codebase is starting to look less coherent and no more functional.

Any ideas?

2

What were your problems with implementing CKEditor? I think it can be done within a matter of minutes.

3

That’s sort of what I thought! I’ve tried this a few different ways, but here’s a bin of one of them:

http://jsbin.com/cetim/1/edit

If you un-comment the textarea, that element works the way I would expect. The view I made won’t read the initial state, and won’t write any state. It doesn’t pass the “smell test” (looks kind of goofy and I’m sure I’m duplicating a lot of built-in behavior) but I can’t find an example of how it’s supposed to work. I’m willing to approach it completely differently if I’m being totally backward- I’d rather do this the “canonical way.”

The pre- and post- save states are being written to the log. What am I missing?

4

We use tinymce together with ember, there are a few questions asked and answered on stack overflow that will get you going.

The answer in this question is what I used to get started:

5

I have this in my codebase and it’s working fine:

CMS.FieldEditorComponent = Ember.Component.extend({
  didInsertElement: function() {
    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');
        }
      });
    })
  }
});
1 Like
6

Thanks for the replies gang!

I love how clean the component approach is. I’ve updated the JS bin, and I have it working now, BUT-

  1. The keyup trigger wasn’t updating the element, so I tried changing it to a get/set:

    self.set(“value”, editor.getData());

  2. It throws a metamorph error on every change. It still updates the value correctly, and it will persist the record correctly.

Did I misunderstand something, am I doing something goofy, or…?

7

Take a look at: Indexia on Github

1 Like
8

What kind of text editor should I use if I just want a Facebook style posting that only includes linebreaks and autolink?

9

I tried using tinymce with my project and worked perfectly in the development environment, but cannot build or run the app in production environment, Is there anybody who is facing the same problem and would like to know how the issue is solved and also welcome solutions if somebody understood why is it so.