[wp-trac] [WordPress Trac] #21812: Make custom TinyMCE views easier to implement

[WordPress Trac]

#21812: Make custom TinyMCE views easier to implement
----------------------------+-----------------------
 Reporter:  koopersmith     |       Owner:  azaozz
     Type:  task (blessed)  |      Status:  assigned
 Priority:  high            |   Milestone:  3.5
Component:  TinyMCE         |     Version:  trunk
 Severity:  normal          |  Resolution:
 Keywords:  has-patch       |
----------------------------+-----------------------
Changes (by koopersmith):

 * keywords:  needs-patch => has-patch


Comment:

 [attachment:21812.diff] takes the techniques Andrew has been working on
 and transforms them into an API on the `wp` object, namely `wp.mce.view`,
 which acts as a bridge between TinyMCE and Backbone Views.

 The patch differs from [attachment:21812-4.patch] in several ways:

 * Blocker divs are not included — we're frequently going to add UI inside
 the views, so blocking interactions to the view will frequently degrade
 the experience.

 * Fixes several encoding and decoding bugs that caused errors when
 switching between editors.

 * Views are rendered instantly; there is no longer a need to call
 `setTimeout`.

 * There is no scanning on keydown. This should be added in again. I
 experimented with a few other methods, like scoping to the active node, so
 this will be worth experimenting with.

 * There is currently no way to add a preview for only certain editor
 instances. This should be implemented as a function on the object passed
 to `wp.mce.view.add()`.

 It's also worth noting that none of the provided patches isolates the
 replacement text when scanning it with multiple patterns. This could lead
 to collisions and encoding errors. When scanning, we should progressively
 split the string to ensure patterns won't collide or overlap.

 For an example, this code will identify and replace the string `[text]`
 with the string `My test view.`, and record all clicks to the console.

 {{{
         wp.mce.view.add( 'test', {
                 pattern: /\[test\]/g,
                 view: {
                         events: {
                                 'click': 'clicked'
                         },

                         render: function() {
                                 this.$el.text('My test view.');
                         },

                         clicked: function() {
                                 console.log('I was clicked!');
                         }
                 }
         });
 }}}

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/21812#comment:10>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software