diff --git a/css/customize-posts.css b/css/customize-posts.css index bc8e24e..af45bc2 100644 --- a/css/customize-posts.css +++ b/css/customize-posts.css @@ -346,6 +346,10 @@ body.customize-posts-content-editor-pane-resize #customize-preview:before { margin-right: 0.25ex; } +.mce-btn.hidden{ + display: none; +} + @media screen and ( max-width: 782px ) { .customize-control-post_date select { height: 40px; diff --git a/js/customize-post-editor-control.js b/js/customize-post-editor-control.js index 3c7e79a..bb8f810 100644 --- a/js/customize-post-editor-control.js +++ b/js/customize-post-editor-control.js @@ -1,9 +1,42 @@ -/* global jQuery, wp, _, tinyMCE */ +/* global jQuery, wp, _, tinyMCE, _wpCustomizePostsEditorExports */ /* eslint consistent-this: [ "error", "control" ], no-magic-numbers: [ "error", { "ignore": [1] } ] */ (function( api, $ ) { 'use strict'; + var editorDefaultSettings = { + media_buttons: true, + html_editor: true, + mce_buttons: { + bold: true, + italic: true, + underline: true, + blockquote: true, + strikethrough: true, + bullist: true, + numlist: true, + alignleft: true, + aligncenter: true, + alignright: true, + undo: true, + redo: true, + link: true, + unlink: true, + fullscreen: true, + wp_more: true, + formatselect: true, + alignjustify: true, + forecolor: true, + pastetext: true, + removeformat: true, + charmap: true, + outdent: true, + indent: true, + wp_adv: true, + hr: true + } + }; + /** * An post editor control. * @@ -17,6 +50,17 @@ initialize: function initialize( id, options ) { var control = this, args; + control.data = { + l10n: { + openEditor: '', + closeEditor: '' + } + }; + + if ( 'undefined' !== typeof _wpCustomizePostsEditorExports ) { + _.extend( control.data, _wpCustomizePostsEditorExports ); + } + _.bindAll( control, 'handleRemoval', @@ -39,7 +83,12 @@ label: api.Posts.data.l10n.fieldContentLabel, active: true, setting_property: null, - input_attrs: {} + input_attrs: {}, + button_labels: { + open_editor: control.data.l10n.openEditor, + close_editor: control.data.l10n.closeEditor + }, + editor_settings: editorDefaultSettings }, options.params || {} ); @@ -151,6 +200,7 @@ } else { control.contentTextarea.val( settingValue ); } + control.updateEditorButtons(); editor.on( 'input change keyup', control.onVisualEditorChange ); control.contentTextarea.on( 'input', control.onTextEditorChange ); $( document.body ).addClass( 'customize-posts-content-editor-pane-open' ); @@ -173,6 +223,27 @@ } }, + /** + * Toggle the editor buttons. + * + * @return {void} + */ + updateEditorButtons: function() { + var control = this, button, + editor = tinyMCE.get( 'customize-posts-content' ), + mediaButton = $( '#wp-customize-posts-content-media-buttons' ), + htmlTab = $( '#customize-posts-content-html' ); + + _.each( control.params.editor_settings.mce_buttons, function( buttonState, buttonName ) { + editor.controlManager.setDisabled( buttonName, ! buttonState ); + button = $( '.mce-i-' + buttonName ).closest( '.mce-btn' ); + button.toggleClass( 'hidden', ! buttonState ); + } ); + + htmlTab.toggleClass( 'hidden', ! control.params.editor_settings.html_editor ); + mediaButton.toggleClass( 'hidden', ! control.params.editor_settings.media_buttons ); + }, + /** * Update the editor heading with the control label, showing if there is more than one editor control in the section. * @@ -421,8 +492,7 @@ updateEditorToggleExpandButtonLabel: function updateEditorToggleExpandButtonLabel( expanded ) { var control = this; - // @todo Allow these labels to be parameters on the control. - control.editorToggleExpandButton.text( expanded ? api.Posts.data.l10n.closeEditor : api.Posts.data.l10n.openEditor ); + control.editorToggleExpandButton.text( expanded ? control.params.button_labels.close_editor : control.params.button_labels.open_editor ); }, /** diff --git a/php/class-wp-customize-editor-control.php b/php/class-wp-customize-editor-control.php deleted file mode 100644 index c739659..0000000 --- a/php/class-wp-customize-editor-control.php +++ /dev/null @@ -1,67 +0,0 @@ -json(); - ?> - <# - _.defaults( data, ); - data.input_id = 'input-' + String( Math.random() ); - #> - - <# if ( data.description ) { #> - {{ data.description }} - <# } #> - - array( + 'openEditor' => __( 'Open Editor', 'customize-posts' ), + 'closeEditor' => __( 'Close Editor', 'customize-posts' ), + ), + ); + + wp_scripts()->add_data( 'customize-post-editor-control', 'data', sprintf( 'var _wpCustomizePostsEditorExports = %s;', wp_json_encode( $exports ) ) ); + } + + /** + * Enqueue a WP Editor instance we can use for rich text editing. + */ + public static function enqueue_editor() { + add_action( 'customize_controls_print_footer_scripts', array( __CLASS__, 'render_editor' ), 0 ); + + // Note that WP_Customize_Widgets::print_footer_scripts() happens at priority 10. + add_action( 'customize_controls_print_footer_scripts', array( __CLASS__, 'maybe_do_admin_print_footer_scripts' ), 20 ); + + // @todo These should be included in _WP_Editors::editor_settings() + if ( false === has_action( 'customize_controls_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ) ) ) { + add_action( 'customize_controls_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ) ); + } + } + + /** + * Render rich text editor. + */ + public static function render_editor() { + ?> +