2 * WordPress View plugin.
7 TreeWalker = tinymce.dom.TreeWalker,
10 tinymce.create('tinymce.plugins.wpView', {
11 init : function( editor, url ) {
14 // Check if the `wp.mce` API exists.
15 if ( typeof wp === 'undefined' || ! wp.mce )
18 editor.onPreInit.add( function( editor ) {
19 // Add elements so we can set `contenteditable` to false.
20 editor.schema.addValidElements('div[*],span[*]');
23 // When the editor's content changes, scan the new content for
24 // matching view patterns, and transform the matches into
25 // view wrappers. Since the editor's DOM is outdated at this point,
26 // we'll wait to render the views.
27 editor.onBeforeSetContent.add( function( editor, o ) {
31 o.content = wp.mce.view.toViews( o.content );
34 // When the editor's content has been updated and the DOM has been
35 // processed, render the views in the document.
36 editor.onSetContent.add( function( editor, o ) {
37 wp.mce.view.render( editor.getDoc() );
40 editor.onInit.add( function( editor ) {
42 // When a view is selected, ensure content that is being pasted
43 // or inserted is added to a text node (instead of the view).
44 editor.selection.onBeforeSetContent.add( function( selection, o ) {
45 var view = wpView.getParentView( selection.getNode() ),
48 // If the selection is not within a view, bail.
52 // If there are no additional nodes or the next node is a
53 // view, create a text node after the current view.
54 if ( ! view.nextSibling || wpView.isView( view.nextSibling ) ) {
55 target = editor.getDoc().createTextNode('');
56 editor.dom.insertAfter( target, view );
58 // Otherwise, find the next text node.
60 walker = new TreeWalker( view.nextSibling, view.nextSibling );
61 target = walker.next();
64 // Select the `target` text node.
65 selection.select( target );
66 selection.collapse( true );
69 // When the selection's content changes, scan any new content
70 // for matching views and immediately render them.
72 // Runs on paste and on inserting nodes/html.
73 editor.selection.onSetContent.add( function( selection, o ) {
77 var node = selection.getNode();
79 if ( ! node.innerHTML )
82 node.innerHTML = wp.mce.view.toViews( node.innerHTML );
83 wp.mce.view.render( node );
87 // When the editor's contents are being accessed as a string,
88 // transform any views back to their text representations.
89 editor.onPostProcess.add( function( editor, o ) {
90 if ( ( ! o.get && ! o.save ) || ! o.content )
93 o.content = wp.mce.view.toText( o.content );
96 // Triggers when the selection is changed.
97 // Add the event handler to the top of the stack.
98 editor.onNodeChange.addToTop( function( editor, controlManager, node, collapsed, o ) {
99 var view = wpView.getParentView( node );
101 // Update the selected view.
103 wpView.select( view );
105 // Prevent the selection from propagating to other plugins.
108 // If we've clicked off of the selected view, deselect it.
114 editor.onKeyDown.addToTop( function( editor, event ) {
115 var keyCode = event.keyCode,
118 // If a view isn't selected, let the event go on its merry way.
122 // If the caret is not within the selected view, deselect the
124 view = wpView.getParentView( editor.selection.getNode() );
125 if ( view !== selected ) {
130 // If delete or backspace is pressed, delete the view.
131 if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
132 if ( (instance = wp.mce.view.instance( selected )) ) {
138 // Let keypresses that involve the command or control keys through.
139 // Also, let any of the F# keys through.
140 if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) )
143 event.preventDefault();
147 getParentView : function( node ) {
149 if ( this.isView( node ) )
152 node = node.parentNode;
156 isView : function( node ) {
157 return (/(?:^|\s)wp-view-wrap(?:\s|$)/).test( node.className );
160 select : function( view ) {
161 if ( view === selected )
166 wp.mce.view.select( selected );
169 deselect : function() {
171 wp.mce.view.deselect( selected );
175 getInfo : function() {
177 longname : 'WordPress Views',
178 author : 'WordPress',
179 authorurl : 'http://wordpress.org',
180 infourl : 'http://wordpress.org',
187 tinymce.PluginManager.add( 'wpview', tinymce.plugins.wpView );