Permalink
Browse files

API Forward the editor events to underlying textarea.

Makes the editor API more flexible by triggering generic JS events that
can be used from entwine. This makes it easier to add event handlers to
the editor and cleans up the initialisation call from unrelated code.

The patching code also forwards editor changes to the textarea field,
which in perspective will allow the changetracker to react to changes in
this field as they happen.
  • Loading branch information...
1 parent e021a19 commit b02b1e6dbc6020e85e48f696dade4953ed168485 @mateusz mateusz committed with chillu Nov 7, 2012
Showing with 31 additions and 22 deletions.
  1. +31 −22 javascript/HtmlEditorField.js
@@ -47,13 +47,29 @@
/**
* Create a new instance based on a textarea field.
*
+ * Please proxy the events from your editor implementation into JS events
+ * on the textarea field. For events that do not map directly, use the
+ * following naming scheme: editor<event>.
+ *
* @param String
* @param Object Implementation specific configuration
* @param Function
*/
- create: function(domID, config, onSuccess) {
+ create: function(domID, config) {
var ed = new tinymce.Editor(domID, config);
- ed.onInit.add(onSuccess);
+
+ // Patch TinyMCE events into underlying textarea field.
+ ed.onInit.add(function(ed) {
+ jQuery(ed.getElement()).trigger('editorinit');
+ });
+ ed.onChange.add(function(ed, l) {
+ // Update underlying textarea on every change, so external handlers
+ // such as changetracker have a chance to trigger properly.
+ ed.save();
+ jQuery(ed.getElement()).trigger('change');
+ });
+ // Add more events here as needed.
+
ed.render();
},
/**
@@ -245,15 +261,6 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
return this.closest('form');
},
- fromContainingForm: {
- onbeforesubmitform: function(){
- if(this.isChanged()) {
- this.getEditor().save();
- this.trigger('change'); // TinyMCE assigns value attr directly, which doesn't trigger change event
- }
- }
- },
-
fromWindow: {
onload: function(){
this.redraw();
@@ -269,20 +276,22 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
// Create editor instance and render it.
// Similar logic to adapter/jquery/jquery.tinymce.js, but doesn't rely on monkey-patching
// jQuery methods, and avoids replicate the script lazyloading which is already in place with jQuery.ondemand.
- ed.create(this.attr('id'), config, function() {
- // Delayed show because TinyMCE calls hide() via setTimeout on removing an element,
- // which is called in quick succession with adding a new editor after ajax loading new markup
-
- //storing the container object before setting timeout
- var redrawObj = $(ed.getInstance().getContainer());
- setTimeout(function() {
- redrawObj.show();
- }, 10);
- });
-
+ ed.create(this.attr('id'), config);
+
this._super();
},
+ oneditorinit: function() {
+ // Delayed show because TinyMCE calls hide() via setTimeout on removing an element,
+ // which is called in quick succession with adding a new editor after ajax loading new markup
+
+ //storing the container object before setting timeout
+ var redrawObj = $(this.getEditor().getInstance().getContainer());
+ setTimeout(function() {
+ redrawObj.show();
+ }, 10);
+ },
+
'from .cms-container': {
onbeforestatechange: function(){
this.css('visibility', 'hidden');

0 comments on commit b02b1e6

Please sign in to comment.