Skip to content

Instantly share code, notes, and snippets.

@TrilipuT
Created July 7, 2016 12:45
Show Gist options
  • Save TrilipuT/b332f70e3a655a1bcffcfa9ffc8023bd to your computer and use it in GitHub Desktop.
Save TrilipuT/b332f70e3a655a1bcffcfa9ffc8023bd to your computer and use it in GitHub Desktop.
Customization WordPress TinyMCE
<?php
/**
* Created by vitaly on 7/7/16.
*/
/**
* Remove "text" tab from editor
*/
add_filter('wp_editor_settings', function ($settings, $editor_id) {
if ($editor_id == 'content' && get_post_type() == 'post') {
$settings['quicktags'] = false;
}
return $settings;
}, 999, 2);
/**
* Customize editor buttons
*/
add_action('tiny_mce_before_init', function ($settings, $editor_id) {
if ($editor_id == 'content' && get_post_type() == 'post') {
// customize layout of buttons in editor
//var_dump($settings);
$settings['toolbar1'] = 'bold,italic,underline,|,link,unlink,|,bullist,numlist,|,alignleft,aligncenter,alignright,alignjustify,|,undo,redo';
$settings['toolbar2'] = 'formatselect,styleselect';
$settings['toolbar3'] = 'large_header';
$settings['toolbar4'] = '';
}
return $settings;
}, 999, 2);
/**
* Change block formats
*/
add_action('tiny_mce_before_init', function ($settings) {
$settings['block_formats'] = "Paragraph=p;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6";
return $settings;
});
/**
* Add inline styles
*/
add_filter('tiny_mce_before_init', function ($settings) {
$style = "
p {
color: red;
}
a:visited {
color: green;
}
.large-paragraph {
font-size: 150%;
}
";
$style = trim(preg_replace('/\s+/', ' ', $style));
$settings['content_style'] = $style;
return $settings;
});
/**
* Custom formats
*/
add_filter('tiny_mce_before_init', function ($settings) {
$style_formats = [
['title' => 'Large Paragraph', 'selector' => 'p', 'classes' => 'large-paragraph'],
['title' => 'Anchor', 'block' => 'h4', 'classes' => 'anchor-target'],
];
$settings['style_formats'] = json_encode($style_formats);
$settings['verify_html'] = false;
return $settings;
});
/**
* Add button
*/
add_filter("mce_external_plugins", function ($plugins) {
$plugins['large_header'] = get_template_directory_uri() . '/large_header.js';
return $plugins;
});
add_filter('mce_buttons_3', function ($buttons) {
$buttons[] = 'large_header';
return $buttons;
});
/**
* Add own oEmbed
*/
add_filter('oembed_remote_get_args', function () {
return ['timeout' => 20];
});
$format = '#https?://cloud\.highcharts\.com/(charts|show|inject)/.*#i';
$provider = get_rest_url() . 'oembed/1.0/highcharts';
wp_oembed_add_provider($format, $provider, true);
add_action('rest_api_init',function(){
register_rest_route('oembed/1.0', '/highcharts', array(
array(
'methods' => \WP_REST_Server::READABLE,
'callback' => function ($request) {
$_url = $request['url'];
preg_match("/.*(inject|show|charts)\\/(([^\\/.]*).*)/", $_url, $matches);
$_embed = $matches[2];
$_id = $matches[3];
$response = array(
'version' => '1.0',
'provider_name' => "Highcharts",
'provider_url' => 'http://cloud.highcharts.com',
'author_name' => '',
'author_url' => '',
'title' => 'Highcharts',
'type' => 'rich',
'html' => "<div class=\"content-chart-container\" id='highcharts-{$_id}'><script src='//cloud.highcharts.com/inject/{$_embed}' defer='defer'></script></div>",
);
return $response;
},
'args' => [
'url' => [
'required' => true,
],
],
),
));
});
/**
* Created by vitaly on 7/7/16.
*/
tinymce.PluginManager.add('large_header', function (editor) {
var large_header;
editor.addButton('large_header', {
text: 'Large header',
onPostRender: function () {
large_header = this;
},
onclick: function () {
editor.execCommand('FormatBlock', false, 'h2');
editor.dom.addClass(editor.selection.getNode(), 'large-header');
this.active(true);
}
});
editor.on('NodeChange', function (event) {
var node = event.element;
if (node.nodeName === 'H2' && editor.dom.hasClass(node, 'large-header')) {
large_header.active(true);
} else {
large_header.active(false);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment