Skip to content

Instantly share code, notes, and snippets.

@vielhuber
Last active October 6, 2022 10:28
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save vielhuber/4ffedf803506220a59a0734f0584aaa0 to your computer and use it in GitHub Desktop.
Save vielhuber/4ffedf803506220a59a0734f0584aaa0 to your computer and use it in GitHub Desktop.
TinyMCE class editor Advanced Custom Formats / Styles / Shortcode Buttons including latex formular editor support #wordpress
/* step 1: load this in editor-style.css in the theme folder */
/* step 2: activate function "Create CSS classes menu" in tinymce advanced settings */
/* step 3: add "Formate" to toolbar in tinymce advanced settings */
/* this gets shown automatically in the formats dropdown */
/* sometimes this is a little bit tricky. delete and recreate "Formats" in the Tinymce Advanced settings */
/* this also can be a programmable alternative: https://codex.wordpress.org/TinyMCE_Custom_Styles */
.Spezial-Button {
background-color:red;
color:#fff;
display: inline-block;
text-decoration:none;
padding:5px 10px;
font-weight:bold;
margin:0 5px;
}
/* if you want to add styles, but don't want them added to the menu, prefix them with .mceContentBody.wp-editor */
.mceContentBody.wp-editor .foo {
/* ... */
}
<?php
add_action('admin_head', function()
{
// check user permissions
if( !current_user_can('edit_posts') && !current_user_can('edit_pages') )
{
return;
}
// check if editor is enabled
if( get_user_option( 'rich_editing' ) == 'true' )
{
add_filter( 'mce_external_plugins', function($plugin_array)
{
$plugin_array['mce_buttons'] = get_stylesheet_directory_uri().'/mce-button.js';
return $plugin_array;
});
}
});
add_filter('mce_buttons', function($buttons)
{
array_push( $buttons, 'mce_button' );
array_push( $buttons, 'mce_dropdown' );
array_push( $buttons, 'mce_latex' );
return $buttons;
});
(function() {
tinymce.PluginManager.add('mce_buttons', function( editor, url ) {
// single button
editor.addButton('mce_button', {
text: 'Button #1',
icon: false,
onclick: function() {
editor.insertContent('<p><a href="#" class="button">Mehr erfahren</a></p>');
}
});
// dropdown and buttons
editor.addButton( 'mce_dropdown', {
text: 'Dropdown',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Button #1',
menu: [
{
text: 'Button #1.1',
onclick: function() {
editor.insertContent('...');
}
},
{
text: 'Button #1.2',
onclick: function() {
editor.insertContent('...');
}
}
]
},
{
text: 'Button #2',
menu: [
{
text: 'Button #2.1',
onclick: function() {
editor.insertContent('...');
}
},
{
text: 'Button #2.2',
onclick: function() {
editor.insertContent('...');
}
}
]
},
{
text: 'Button #3',
onclick: function() {
editor.insertContent('...');
}
}
]
});
editor.addButton('mce_latex', {
text: 'Formeleditor',
icon: 'preview',
onclick: function() {
let popup = null,
url = 'https://latex.codecogs.com/editor_json3.php?type=url&editor=TinyMCE';
popup=window.open('','Formeleditor','width=700,height=450,status=1,scrollbars=yes,resizable=1');
if (!popup.opener) { popup.opener = self; }
popup.document.open();
popup.document.write('<!DOCTYPE html><head><script src="'+url+'" type="text/javascript"></script></head><body></body></html>');
popup.document.close();
}
});
});
})();
/* for latex support */
TinyMCE_Add = function(name) {
let sName = name.match( /(gif|svg)\.latex\?(.*)/ ),
latex = unescape(sName[2]);
latex = latex.replace(/@plus;/g,'+');
latex = latex.replace(/&plus;/g,'+');
latex = latex.replace(/&space;/g,' ');
tinymce.activeEditor.execCommand('mceInsertContent', false, '$$'+latex+'$$');
tinymce.execCommand('mceFocus', false, tinymce.activeEditor.editorId);
}
@vijayanandrp
Copy link

hi can you please tell theme folder example path to put his code? I am new to wordpress

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment