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.
Related
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
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'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.
I am trying to use simplemodal to have modal popups with text in wordpress posts. I've played around with various plugins but they have specific uses (such as the contact form, or another one I saw that displays a single note you can customize).
I've tried following this tutorial: http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but the instructions are not very clear for people without advanced jquery or wordpress knowledge and it simply isn't working for me. The author does not explain where you put the function, for instance.
For anyone who's gotten simplemodal working in wordpress, without developing a plugin, can you please assist? Thank you.
The tutorial is a good start on a solution, but does not quite provide all of the details. There are also some changes that I would make. Here is what I would do to get it working:
Create the Ajax Handler template and page
Make sure the link you want to use to open the modal includes the postpopup class and has the post ID in the rel attribute.
Create a js/ folder in your theme directory
Download SimpleModal 1.4.1 and place the file in the js/ folder
Create a custom JavaScript file (site.js) and place it in the js/ folder
Put the following code in site.js:
.
jQuery(function ($) {
$('a.postpopup').click(function(){
id = this.rel;
$.get('http://yourdomain.com/ajax-handler/?id='+id, function (resp) {
var data = $('<div id="ajax-popup"></div>').append(resp);
// remove modal options if not needed
data.modal({
overlayCss:{backgroundColor:'#000'},
containerCss:{backgroundColor:'#fff', border:'1px solid #ccc'}
});
});
return false;
});
});
Add the following code to your theme's functions.php file:
.
function my_print_scripts() {
if (!is_admin()) {
$url = get_bloginfo('template_url');
wp_enqueue_script('jquery-simplemodal', $url . '/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
wp_enqueue_script('my_js', $url . '/js/site.js', null, '1.0', true);
}
}
add_action('wp_print_scripts', 'my_print_scripts');
That should get it working for you. Make sure you have the wp_footer() function in your theme's footer. I re-worked the way the modal window was being called so that the auto-centering of the content works.
I need to add a mailto button to TinyMCE in WordPress. Has anybody already done this? Or any tops on how to go about it?
Given you are wanting to put this into WordPress I assume you want to simply insert a href="mailto:" type tag into your document for the currently selected text.
The simplest way is to create a basic plugin. You can do this in the same page that tinyMCE is initialised into. The example below will wrap the currently selected text with a static mailto.
tinymce.create('tinymce.plugins.MailToPlugin', {
init : function(ed, url) {
ed.addCommand('mceMailTo', function() {
var linkText = ed.selection.getContent({format : 'text'});
var newText = "<a href='mailto:foo#bar.com?subject=testing'>" + linkText + "</a>"
ed.execCommand('mceInsertContent', false, newText);
});
// Register example button
ed.addButton('mailto', {
title : 'MailTo',
cmd : 'mceMailTo',
image : url + '/images/mailto.gif'
});
}
});
// Register plugin with a short name
tinymce.PluginManager.add('mailto', tinymce.plugins.MailToPlugin);
You will of course need to create an image (mailto.gif) for the toolbar button.
You then simply add the following to your plugin list
plugins: '-mailto'
and put mailto on the toolbar.
Of course, if you want to allow the end user to specify the email address and subject, then you will need a dialog. There is a good example of how to create a plugin on the TinyMCE site in Creating a Plugin
Unfortunately I can't comment on how you would do either of these in WordPress but I suspect you will need to customise your version of WordPress tinyMCE plugin.
You can use the class I built in WordPress my tutorial and then make the calls to your javascript files through instantiating the class. At least, regarding the reference to adding it to your plugins.
Cheers
First of all, make sure you have tinyMce Advanced plugin installed. Then, you can just use the insert / edit link button from the tinyMce editor. You don't need a different button. In the destination URL add this
mailto:my-mail#my-domain.com