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
Related
I am working in Wordpress, and I am using Elementor. Elementor has a native feature for the title of the posts and images to link to the post.
But if I add an excerpt text, it doesn't link to the post. It is not clickable. The read more button does, but not the excerpt of the post.
I am trying to create something like this: greatist.com Every post on their website is clickable - the excerpt, the title, and the image.
My excerpts are really short like on that website, and I would really like them to be clickable. I have absolutely no idea how to do this and I'm beginning to think it's not possible. I am using Hello Elementor theme.
I would deeply appreciate anyone's help. I just registered to ask this question.
You can always try to save text as an photo and make it clickable or make a full section clickable.To do this try to use plugin called "Make Column Clickable Elementor".
Add this code to your website:
const postExcerpts = document.querySelectorAll('.elementor-posts .elementor-post .elementor-post__excerpt');
postExcerpts.forEach(postExcerpt => {
const postUrl = postExcerpt.parentNode.querySelector('.elementor-post__title a').href;
postExcerpt.addEventListener('click', () => {
window.location.href = postUrl;
});
});
This can be added using a script tag. Choose from the following options:
Add this code as a script tag in your functions.php file, to be rendered at the end of the page (wp_footer action hook).
If you have Elementor Pro, use its built-in Custom Code feature to add the code in a script tag to the end of the body tag.
It's recommended to add a pointer cursor so the user will know the excerpt is a link. This can be achieved by adding the following CSS to your style.css file.
.elementor-posts .elementor-post .elementor-post__excerpt {
cursor: pointer;
}
I was asked to disable the "Code Editor" and the "Edit as HTML" function in the WordPress Gutenberg editor.
Unfortunately I am not able to find any solution on Google (thanks, Classic Editor posts...) or in the wp.org Developer Reference.
My first attempt was to filter the Code Editor menu entry with wp_default_editor, but the possible arguments does not seem to fit for WP version 5.*
Any ideas for one of both cases?
To disable the "Edit as HTML" option for all blocks on a site, you'll need to set up Webpack and all that fun sort of thing. You can use Create Guten Block to get the project going if you don't want to set it all up yourself.
Then, in your block.js file (or whatever custom JS file you're setting up for the editor), you'll just need a few lines of code. Use the registerBlockType filter to change all the blocks right as they're registered, and that will allow you to disable "Edit as HTML" as well as other features (such as custom class name) as desired.
// Use WP Hooks
const { addFilter } = wp.hooks;
// Create the filter
addFilter(
"blocks.registerBlockType", // Using the registerBlockType hook
"cgb/change-core-blocks", // Custom namespace, slash, name for your filter
changeCoreBlocks // The name of your custom function
);
function changeCoreBlocks( settings, name ) {
// This will fire for all blocks - from Core, plugins, and themes
settings.supports = Object.assign({}, settings.supports, {
// Setting "html" to false disables the "Edit as HTML" functionality
html: false
});
}
There is probably a way to do this in older JavaScript that wouldn't require you to set up Webpack or use Create Guten Block, which seem rather complicated to run this simple filter.
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'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.