I am new to Ember.JS, so please forgive me if this is simple, but I have been trying to find any documentation that might point me in the right direction to no avail.
I want to create a Ember Object that extends the TextArea with a WYSIWYG editor and I am currently trying out the SCEditor ([click here][1]) – but not tied to that one if there is an easier solution out there. The SCEditor documentation shows this:
<!-- Include jQuery, this can be omitted if it's already included -->
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Include the default theme -->
<link rel="stylesheet" href="minified/themes/default.min.css" type="text/css" media="all" />
<!-- Include the editors JS -->
<script type="text/javascript" src="minified/jquery.sceditor.bbcode.min.js"></script>
<script>
$(function() {
$("textarea").sceditor({
plugins: "bbcode",
style: "minified/jquery.sceditor.default.min.css"
});
});
</script>
But that replaces all of the TextAreas that are already rendered with the editor. So, when Ember renders that element, nothing happens since that code has already executed.
I’d do something like this - create a view containing an Ember.TextArea. Use the didInsertElement hook to create the editor when the view is inserted into the DOM. Something like this: (coffeescript)
App.WysiwygEditor = Ember.TextArea.extend({
didInsertElement: function(){
var loadCSS = function(url, callback){
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
link.id = 'theme-style';
document.getElementsByTagName('head')[0].appendChild(link);
};
var initEditor = $("ember-text-area").sceditor({
plugins: 'bbcode',
style: "./minified/themes/default.min.css",
width: "500px",
height: "400px",
autoUpdate: true
});
var theme = "./minified/themes/default.min.css";
loadCSS(theme, initEditor);
}
});
I get the editor to render just fine, and I can change the formatting of the text within the editor, but it does not update the elements that it is supposed to be bound to, and thus, does not update what is stored in the database.
I am so close, but it is just not happening for me yet. Does anyone have a suggestion?
You probably need to hook up the content from sceditor to the bound value of the view. I see sceditor has a bind() method - bind() - SCEditor . Perhaps hook that up on keypress so the sceditor.val() is copied to the bound value you’ve set in the template (valueBinding).
Thanks so much for your reply. What you say makes sense, but I still can’t seem to get it to work – and I am very confused. I thought when I created the SCEditor object it was already bound to a textarea that is hidden and when I use the autoUpdate feature it would update the hidden textarea, and hence, my model/data object would also be updated upon loseFocus [or blur].
Also, if I used Google Chrome Developer Tools [GCDT], I can see in the Elements Tab that the formatting is done with HTML tags in the SCEditor, not BBCode. I want to store BBCode in my DB, not HTML.
Plus, when I blur from the SCEditor the GCDT shows no change in my hidden textarea. In fact there is nothing in that textarea – ever.
I guess I just don’t understand some fundamental concept of how this is working under the covers.
Sorry to be such a scatter-brain, but any help would be appreciated.
I am not sure I did everything right, but here is my code http://jsbin.com/emihab/1/ [I think that is the right link]. It doesn’t output any results since my data source is an internal IP address and I can not expose that to the outside world. Should I replace it with some FIXTURE data? Still not sure it would “work” since I added some of my JS links at the bottom of the HTML page – like moment, showdown and xbbcode; in addition to the SCEditor link – even though I realize they will not work as is. I am not sure how to add those into the jsbin interface.
Actually, you might know of a better way to do this since I am sure this is a common thing. All I need to do is to set up a simple blog for our internal site and give the user the ability to use different color/style fonts and formatting. I am not tied to SCEditor, but thought it would be a good learning experience to help me get used to doing things in Ember. It has now become a frustration and I would welcome any other alternatives that might be easier/better.
That jsbin doesn’t work for me, there’s a bunch of js errors with the way you’ve integrated the ember components.
As for not using sceditor, sure, you can use a different editor, but however you do it you’ll have to hook up the editor to ember somehow, and that’s usually done in the didInsertElement hook.
If you don’t need too much customisation perhaps look at using Markdown instead of embedded HTML? That way you just save the content as plain text and convert it on the fly with a markdown js lib.
Martin,
Thanks again for looking into this. Sorry my Ember is so sloppy – I am new and learning.
I would love to use markdown, but the users wants to click icons, not learn a “code language” – which is what Markdown is to them. They want to be able to change font colors & sizes and highlight by changing background colors with the click of a button. Fortunately, another project has bumped this one to a lower priority, so I have the gift of some time. But, I would actually rather work on this than the authentication AD through LDAP to Yii into JSON to Ember project, but the coders can’t always pick the priorities for the company, right?
Anyway, back on topic for this thread, I am really digging the cool editor in the Discuss forum – can anyone tell me how they did that? If I could add some colored fonts, it would be perfect.