I would like to force TinyMCE for wordpress to stop adding inline CSS for everything I do during edition.
I found this page that says that I should add this snippet
tinyMCE.init({
...
inline_styles : false
});
add to where? The page, and by the way, the entire TinyMCE documentation fails to tell where we should add the valuable snippets they mention.
Any ideas?
I'm not entirely sure that you can disable the inline-styles via TinyMCE, however the filter used to change default TinyMCE settings is: tiny_mce_before_init, so assuming that inline_styles is still a valid option that can be overwritten, you could theoretically do it like this.
function my_format_TinyMCE( $init ) {
$init['inline_styles'] = false;
return $init;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
There is a note about it in the source code and a bit of documentation here
Related
I'm build a wordpress theme and I've created in my style.css a custom class for the plugin: Social Count plus
The problem's that plugin use an own css called counter.css what I need to do is prevent the inclusion of this css, so I've inserted this line in my functions.php:
wp_dequeue_style( 'counter' );
unfortunately the style is even included during the site reload. What am I doing wrong?
Thanks.
Try this:
add_action('wp_enqueue_scripts', function() {
wp_dequeue_style('social-count-plus');
wp_deregister_style('social-count-plus');
});
Just leave the counter.css file in place but either empty it out or comment everything out. It can't load what's not there. Be aware though, and update to that plugin might add the contents of that file back.
I'm trying to edit the WordPress TinyMCE editor so all the links has the target = "_blank". I've tried with jquery to set the 'Open link in new tab' checkbox to be always checked but, no results.
Thank you
You can accomplish this with the default_link_target setting in your TinyMCE configuration: https://www.tinymce.com/docs/plugins/link/#default_link_target
Here is a TinyMCE Fiddle of this in action: http://fiddle.tinymce.com/31faab
To do this in Wordpress you will need to create a simple plugin that modifies this setting as TinyMCE is loaded. It would look something like this:
<?php
add_filter('tiny_mce_before_init', 'add_my_options', 1000);
function add_my_options($opt) {
$opt['default_link_target'] = "_blank";
return $opt; //you must return $opt to not break things
}
?>
If you have never created a WP plugin they are not hard to build and there are plenty of examples on the web.
Tinymce offers an inline code formatting option that wraps the <code> tag around content. But WordPress does not include this. I think that there must be an easy way to enable it. I have seen discussing on how to do this in earlier versions of WP (with Tinymce 3) in threads like Add "code" button to wordpress tinyMCE ,
but I can't see how to "translate" this into Tinymce 4.
I tried the following. It gives me the Source Code but not the code tag.
// Add <code> support to the Visual Editor
// Load the code TinyMCE plugin
function my_TinyMCEplugins($plugin_array) {
$plugin_array['code'] = get_bloginfo('template_directory') . '/inc/code/plugin.min.js';
return $plugin_array;
}
add_filter('mce_external_plugins', 'my_TinyMCEplugins');
// Add the code button into the toolbar
function my_TinyMCE($in) {
$in['toolbar2'].=',code';
return $in;
}
add_filter('tiny_mce_before_init', 'my_TinyMCE' );
Thanks for any help!
Actually the TinyMCE code plugin is NOT used to insert <code> tags. It is used to edit the source html code, which is redundant in wordpress since you can just click the 'text' tab.
This wordpress plugin will add that functionality for you: https://wordpress.org/plugins/tinymce-code-button/screenshots/.
I am writing a custom widget for my own WordPress theme.
From WordPress 3.5 there is a new Media Uploader instead of the old ThickBox.
My widget used to work fine on WordPress versions older than 3.5, but now the new media uploader prevent the old working behavior.
I added a check in the costructor for the presence of wp_enqueue_media function:
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
but when this part of cose is executed javascript throw an error in the console stopping Js engine:
Uncaught TypeError: Cannot read property 'id' of undefined load-scripts.php:69
I removed all the widget code and reduced it to bare bones... the error is caused by wp_enqueue_media() calls, but I cannot get my head around why and how to fix it.
I also read Wordpress 3.5 custom media upload for your theme options, but there is no mention to this issue
Can anyone point me in the right direction? Is there any documentation available for the the WordPress 3.5 Media Uploader?
It's too late for you now, but might be helpful for other people. I managed to make it work using
add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );
Hope it helps!
The problem you are experiencing is because you probably put your custom jquery in the header and you didn't registered wordpress jquery. If multiple jquery are defined you will get that error.
My sugestion is you should either remove your jquery script or remove the one from wordpress
function remove_jquery() {
wp_deregister_script('jquery');
//wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"), false);
}
if(!is_admin()){add_action('init', 'remove_jquery');}
I suggest you use the jquery wordpress provides you, if not, the proper way to enqueue it is to deregister the default one an register your jquery. Just remove the comments from the remove_jquery function.
Also, the above code should go in functions.php
Cheers.
From codex [1], the function wp_enqueue_media( $args ) should be called from 'admin_equeue_scripts' action hook. or later.
Example:
function enqueue_media() {
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
}
add_action('admin_enqueue_scripts', 'enqueue_media');
Hope it helped.
[1]. https://codex.wordpress.org/Function_Reference/wp_enqueue_media
To debug, you need to get the non-minified versions of the js sent to the browser. See the docs:
SCRIPT_DEBUG
SCRIPT_DEBUG is a related constant that will force WordPress to use the "dev" versions of core CSS and Javascript files rather than the minified versions that are normally loaded. This is useful when you are testing modifications to any built-in .js or .css files. Default is false.
define('SCRIPT_DEBUG', true);
I've been following this tutorial, and many like it: http://codex.wordpress.org/TinyMCE_Custom_Buttons
function myplugin_addbuttons() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
// Add only in Rich Editor mode
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_buttons', 'register_myplugin_button');
}
}
//Should add 'code' to the tinyMce buttons on the rich editor.
function register_myplugin_button($buttons) {
array_push($buttons, "code");
return $buttons;
}
// init process for button control
add_action('init', 'myplugin_addbuttons');
All I want to do is add the "code" button to the rich text editor. It's already in the HTML editor side. From the way the tutorial mentions it, it seems as though I could just write in array_push "code" into buttons. But it doesn't work. What am I doing wrong?
If you have access to add settings to the TinyMCE config (which I'm not sure you do based on your previous comments) then you could add the following.
style_formats : [{title : 'Code', inline : 'code'}]
What this will do is add a "code" item in the Style drop down that will wrap the selected text in the code tags.
If you can't get to the config to add this, then you may need to develop a TinyMCE plugin that registers that format programmatically. BTW, the link to how to develop a TinyMCE plugin on the WordPress article you reference is no longer right. Check out the How-to article instead.
Finally, if all else fails, you could develop a plugin that wraps the selected text (ed.selection.getContent()) in the code and returns it using ed.selection.setContent()
I've written a plugin that does exactly that, i.e. it provides a button named 'codeElement' which users can use to wrap text in a code element or tag.
TinyMCE Plugin page on Sourceforge
direct download
Just stumbled over the http://wordpress.org/plugins/tinymce-code-element/ WordPress plugin, which does the job.