add tinymce button that loads add media frame

Author: contactashish13

classes/Visualizer/Module/Admin.php

@@ -61,6 +61,59 @@ public function __construct( Visualizer_Plugin $plugin ) {
 		$this->_addFilter( 'visualizer_logger_data', 'getLoggerData' );
 		$this->_addFilter( 'visualizer_get_chart_counts', 'getChartCountsByTypeAndMeta' );
 		$this->_addFilter( 'visualizer_feedback_review_trigger', 'feedbackReviewTrigger' );
+
+		$this->_addAction( 'admin_init', 'init' );
+	}
+
+	/**
+	 * Admin init.
+	 *
+	 * @access  public
+	 */
+	public function init() {
+		if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) && 'true' == get_user_option( 'rich_editing' ) ) {
+			$this->_addFilter( 'mce_external_languages', 'add_tinymce_lang', 10, 1 );
+			$this->_addFilter( 'mce_external_plugins', 'tinymce_plugin', 10, 1 );
+			$this->_addFilter( 'mce_buttons', 'register_mce_button', 10, 1 );
+		}
+	}
+
+	/**
+	 * Load plugin translation for - TinyMCE API
+	 *
+	 * @access  public
+	 * @param   array $arr  The tinymce_lang array.
+	 * @return  array
+	 */
+	public function add_tinymce_lang( $arr ) {
+		$ui_lang = VISUALIZER_ABSPATH . '/classes/Visualizer/Module/Language.php';
+		$ui_lang = apply_filters( 'visualizer_ui_lang_filter', $ui_lang );
+		$arr[] = $ui_lang;
+		return $arr;
+	}
+
+	/**
+	 * Load custom js options - TinyMCE API
+	 *
+	 * @access  public
+	 * @param   array $plugin_array  The tinymce plugin array.
+	 * @return  array
+	 */
+	public function tinymce_plugin( $plugin_array ) {
+		$plugin_array['visualizer_mce_button'] = VISUALIZER_ABSURL . 'js/mce.js';
+		return $plugin_array;
+	}
+
+	/**
+	 * Register new button in the editor
+	 *
+	 * @access  public
+	 * @param   array $buttons  The tinymce buttons array.
+	 * @return  array
+	 */
+	public function register_mce_button( $buttons ) {
+		array_push( $buttons, 'visualizer_mce_button' );
+		return $buttons;
 	}
 
 	/**

classes/Visualizer/Module/Language.php

@@ -0,0 +1,75 @@
+<?php
+/**
+ * The Language function file for tinymce.
+ *
+ * @link       http://themeisle.com
+ * @since      3.0.0
+ *
+ */
+/**
+ *
+ * SECURITY : Exit if accessed directly
+ */
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Direct access not allowed!' );
+}
+
+/**
+ *
+ * Translation for TinyMCE
+ */
+
+if ( ! class_exists( '_WP_Editors' ) ) {
+	require( ABSPATH . WPINC . '/class-wp-editor.php' );
+}
+
+/**
+ * The module for all languages stuff.
+ *
+ * @category Visualizer
+ * @package Module
+ *
+ * @since 1.0.0
+ */
+class Visualizer_Module_Language extends Visualizer_Module {
+
+	/**
+	 * The strings for translation.
+	 *
+	 * @access   protected
+	 * @var      array $strings The ID of this plugin.
+	 */
+	protected $strings;
+
+	/**
+	 * Initialize the class and set its properties.
+	 *
+	 * @since    3.0.0
+	 * @access   public
+	 */
+	public function __construct() {
+		$this->strings = array(
+			'plugin_label'  => __( 'Insert Chart', 'visualizer' ),
+			'plugin_title'  => __( 'Insert Chart', 'visualizer' ),
+		);
+	}
+
+	/**
+	 *
+	 * The method that returns the translation array
+	 *
+	 * @access   public
+	 * @return string
+	 */
+	public function tinymce_translation() {
+
+		$locale     = _WP_Editors::$mce_locale;
+		$translated = 'tinyMCE.addI18n("' . $locale . '.visualizer_tinymce_plugin", ' . json_encode( $this->strings ) . ");\n";
+
+		return $translated;
+	}
+
+}
+
+$visualizerLangClass = new Visualizer_Module_Language();
+$strings         = $visualizerLangClass->tinymce_translation();

css/media.css

@@ -162,3 +162,13 @@ a.visualizer-library-pagination-page:hover {
 	z-index: 1001;
 	background: url(../images/ajax-loader.gif) no-repeat center center;
 }
+
+
+/* TinyMCE button */
+i.mce-i-visualizer-icon:before {
+	content: "\f184";
+	display: inline-block;
+    -webkit-font-smoothing: antialiased;
+    font: 400 20px/1 dashicons;
+    vertical-align: top;
+}

js/mce.js

@@ -0,0 +1,15 @@
+/* global tinymce */
+/* jshint unused:false */
+(function($) {
+	tinymce.PluginManager.add('visualizer_mce_button', function( editor, url ) {
+		editor.addButton( 'visualizer_mce_button', {
+			title: editor.getLang( 'visualizer_tinymce_plugin.plugin_label' ),
+			label: editor.getLang( 'visualizer_tinymce_plugin.plugin_label' ),
+			icon: 'visualizer-icon',
+			onclick: function() {
+                $('#insert-media-button').trigger('click');
+			}
+		});
+	});
+
+})(jQuery);