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/.
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
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.
I'm creating a Wordpress App. It consists on using custom fields on custom type, for managing personal projects.
My issue: I want to add the admin editor (tinyMCE) on frontend. Considering that I can have many textareas that will begin TinyMCE editors. So, I used this code:
PHP (on theme functions.php):
// TINY-MCE EDITOR ON FRONTEND
add_filter('wp_head','add_tinymce_editor');
function add_tinymce_editor(){
wp_admin_css('thickbox');
wp_enqueue_script('wp-tinymce');
wp_enqueue_script('tinymce');
wp_enqueue_script('editor');
add_thickbox();
}
JS (on theme single-projects.php):
jQuery(document).ready(function(){
// EDITORS
tinyMCE.init({
mode : "specific_textareas",
theme : "simple",
editor_selector :"tinymce_enabled"
});
});
On JS I set the "editor_selector" with a Class for all textareas that will begin tinyMCE editors. I cannot assign a single ID for each textareas because these can be 4 or 5 or 6, or more!!!
HTML: (on theme single-projects.php):
<textarea name="new-task-description" id="new-task-description"
class="tinymce_enabled required"></textarea>
Each textarea is present on Jquery UI Accordions.
Now, my problem is, on Firebug (or browser console) I get this error:
tinyMCE is not defined
What's wrong?
thanks in advance!!!
With Wordpress 3.3 you can use wp_editor() which is a lot easier.
http://codex.wordpress.org/Function_Reference/wp_editor
The right way to include scripts is add_action('wp_enqueue_scripts', 'tinymce_editor');
If tinymce is not defined the file tiny_mce.js has not been loaded on the page. Make sure the file gets loaded eigther directly or with the means wordpress offers.
The TinyMCE editor in WordPress 3 is removing my div tags if I switch from HTML view to visual and update my page. What would be the best way to prevent this from happening?
I have a styled horizontal rule that I enter into the pages/posts by putting the following code:
<div class="hr"></div>
You could also create a shortcode by entering the following in your themes functions.php file:
function hr_shortcode( $atts, $content = null ) {
return '<div class="hr"></div>';
}
add_shortcode( 'hr', 'hr_shortcode' );
Then you would just need to add [hr] into your post.
Have you tried converting them to entities?
>div class="hr"<>/div<
Wordpress strips certain tags out automatically. Try this plugin that allows you to specify which tags you don't want stripped.
http://wordpress.org/extend/plugins/tinymce-valid-elements/
You can also manually hack the tiny MCE config files, but I think sticking with the plugin is the easiest and safest bet.
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.