I want to add WP editor with TinyMCE to my custom text widget, but it won't show TinyMCE buttons it just shows textarea. When I test my code on page.php it works perfectly - editor shows with all the buttons and metabox. Can You please tell me what I'm doing wrong?EDITWidgets screenshot.Same code used in page.php screenshot
The code I use :
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'textarea_name' => 'test-editor',
'textarea_rows' => get_option('default_post_edit_rows', 10),
'tabindex' => '',
'editor_css' => '',
'editor_class' => '',
'teeny' => true,
'dfw' => true,
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,underline'
),
'quicktags' => false
);
wp_editor( 'Text in editor', 'test-editor', $settings );
Looks like you need to find another WYSIWYG editor. Reading the Codex, there are two issues with your code:
The $editor_id
can only be composed of lower-case letters. No underscores, no hyphens. Anything else will cause the WYSIWYG editor to malfunction.
And this one that prevents the editor from working in a meta box
Once instantiated, the WYSIWYG editor cannot be moved around in the DOM. What this means in practical terms, is that you cannot put it in meta-boxes that can be dragged and placed elsewhere on the page.
Related
I'm trying to find a solution for this for weeks and I'm finding answers all
over the internet but I do not know where and how to add this very short script.
I want to have plain text paste enabled on my frontend wordpress tinymce.
So people say use this
tinymce.init({
plugins: "paste",
paste_as_text: true
});
But I don't know where to put this script in.
The class-wp-editor.php does not have any tinymce.init config that I can find.
Would be great if I can solve this.
Thanks
I would use
wp_editor()
with a shortcode.
tinymce is part of settings.
$settings = array( 'tinymce' => array('your_options') );
wp_editor($content, $editor_id, $settings);
Thank you for your respond.
Still I don't know how where to add this.
Do I need to add this to my function.php or a new .php file.
If so how can I make tinymce see this file?
This is the script I use to display the tinymce at the frontend.
With searching over the internet I added the 'paste as text' => true in,
but this does not help as the editor still paste in styled format.
Did I do this correct, if not, how to enable 'paste as text'?
<?php $cont = isset($post) ? $post->post_content : '';
wp_editor(wpautop(stripslashes($cont)),'post_content', array(
'paste_as_text' => true,
'textarea_name' => 'pack[post_content]',
'teeny' => 1, 'media_buttons' => 0,
'tinymce' => array('toolbar1' => 'bold,italic,underline,blockquote,strikethrough,bullist,link,unlink,media,mybutton'),
'quicktags' => false, 'textarea_rows' => 15)); ?>
I created some custom fields for the Wordpress dashboard, for example:
functions.php
function create_field() {
register_post_type('field',
array(
'labels' => array(
'name' => 'Field',
'singular_name' => 'Field'
),
'public' => true,
'has_archive' => false,
'rewrite' => false,
'show_in_menu' => false,
'capability_type' => 'post',
'capabilities' => array(
'create_posts' => false
),
'map_meta_cap' => true,
)
);
}
add_action('init', 'create_field');
In some of them, only one post will be created. It will be continually edited and never deleted. So, what I want is to change de URL of this item in dashboard menu and go directly to this post inside it instead of showing the list of posts, because it will be no necessary.
For example, in the dashboard menu, when click in Products, instead of going to www.mywebsite.com/wp-admin/edit.php?post_type=products, I want it to go directly to the only post created inside it: www.mywebsite.com/wp-admin/post.php?post=24&action=edit.
Is that possible? I searched and tried a lot of things, since rewrite, different add_action functions, removing the item and trying to replace it and so on. I don't know exactly what else I can try for now.
I searched a little more without success. Unfortunately I had to use JavaScript, something I was avoiding, but solves it temporarily.
First, I used admin_enqueue_scripts action hook in functions.php to add JavaScript on the administration screens.
function admin_scripts() {
wp_enqueue_script( "", get_template_directory_uri() . "/scripts_admin.js", "", "", true );
}
add_action( "admin_enqueue_scripts", "admin_scripts" );
Then on my JavaScript I replaced the link hrefs:
// examples
document.querySelector("#menu-posts-products a").href = "post.php?post=10&action=edit";
document.querySelector("#menu-posts-contact a").href = "post.php?post=20&action=edit";
I still think there is a way to do it through Wordpress, maybe in the creation of Post Types. But for now, that solves it.
NOTE: Here is a video that helps explain my question: https://drive.google.com/file/d/1c3pS-j8yq75GAwGDrrMMh9X7fDrCKV5R/view?pli=1
I am creating a custom post type that includes a set of blocks as a template. My basic code looks like this:
function register_article_post_type(){
$post_settings = array(
'label' => 'Articles',
'public' => true,
'show_in_rest' => true,
'template_lock' => 'all',
'template' => array(
array( 'core/heading',
array(
'placeholder' => 'Add Categories Heading...',
'className' => 'tour_categories_heading'
)
),
)
);
register_post_type('article', $post_settings);
}
That will create a Custom Post Type called Articles which has a singular Heading block. The thing is, I don't want a heading block, I want the Classic Editor block.
But I can't figure out how to add it. I can easily change the Heading block to a different block (say the paragraph block) if I change array( 'core/heading', to array( 'core/paragraph',.
But when I check the code in Gutenberg for the name of the Classic editor, nothing shows up. As such, I cannot figure out how to add a Classic editor to the custom post type.
Any ideas.
Try core/freeform - should be the slug for the classic editor block
Custom wordpress form, using wp_editor, I create a Tinymce instance on the textarea.
Editor defaults to HTML but if I click into the editing area the contents disappear.
However if I switch to Visual mode, all works as expected, then switch back to HTML mode all works there too, maybe the click is being intercepted by TinyMCE?
Any clues please....
Thanks
Martin
PS initializations are:
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,underline,blockquote,|,undo,redo,|,fullscreen',
'theme_advanced_buttons2' => '',
'theme_advanced_buttons3' => '',
'theme_advanced_buttons4' => '',
'theme_advanced_resizing' => true,
'width' => '600px'
)
);
Such problems (besides others) may arise when a hidden textarea (or other html element) is used to init a tinymce editor. Best way to avoid this is to make it visible just before you init the editor.
I've taken a different approach and re-init the tinyMCE when switching between them. Attach it to an even handler:
var postContent = "Take Content from some hidden field, AJAX call, etc.";
if ( tinyMCE
&& tinyMCE.activeEditor
&& tinyMCE.activeEditor.id )
{
tinyMCE.activeEditor.setContent( postContent, {} );
tinymce.execCommand( 'mceRemoveControl', true, tinyMCE.activeEditor.id );
}
I've read several tutorials for adding custom styles to the WYSIWYG (TinyMCE) editor. None of them seem to work in the newest version(s) of Wordpress. I'm using v3.3.2. The instructions from the codex work, but in a limited way...
NOTE: To be 100% clear, I'm trying to add a "Styles" dropdown which the author can use to apply my custom styles to the text. (Please don't confuse my question with how to style the editor its self, using editor-style.css... )
I managed to get the code working, but only using the commented-out line in my_mce_before_init(). The problem with this version is that it adds the class with a generic <span>. I'm trying to use the more powerful version of the code (as shown below), but something isn't quite right. The styles drop-down box appears, but it's blank. If I click it the first item is says "Styles" but does nothing. I suspect there's something off about my array. Hopefully someone more knowledgeable than me can set me straight.
Here's the relevant code in my theme's functions.php...
Here's how I add the button:
// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');
Here's how I add the styles (it works when I uncomment the ):
//Define the actual styles that will be in the box
function my_mce_before_init($init_array)
{
// add classes using a ; separated values
//$init_array['theme_advanced_styles'] = "Section Head=section-head;Sub Section Head=sub-section-head";
$temp_array['theme_advanced_styles'] = array(
array(
'title' => 'Section Head',
'block' => 'h3',
'classes' => 'section-head'
),
array(
'title' => 'Sub Section Head',
'block' => 'h4',
'classes' => 'sub-section-head'
)
);
$styles_array = json_encode( $temp_array['theme_advanced_styles'] );
// THIS IS THE PROBLEM !!!! READ BELOW
$init_array['theme_advanced_styles'] = $styles_array;
return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
UPDATE: I figured it out (see my answer below). Before you scroll down, notice in the code above, theme_advanced_styles is the wrong key. It should be style_formats when defining the custom styles in the way that I'm doing. I suspect this is a common mistake.
It seems you're using this (awesome) tutorial: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
Worked great for me so I compared your code with mine: it seems you lack a
'wrapper' => true
as a fourth parameter to each sub-array. This is needed for adding a class on a parent element of your selection (it can broaden your selection) and not creating a new element around your exact selection before adding it a class.
Thus if you select part of a paragraph or part of 2 paragraphs, it'll select the whole paragraph(s) (not so sure about the 2 paragraphs thing, please test :) but at least it won't create inline element around your exact selection).
From the documentation (above link):
wrapper [optional, default = false]
if set to true, creates a new block-level element
around any selected block-level elements
My customization:
$style_formats = array(
array(
'title' => 'Column',
'block' => 'div',
'classes' => 'col',
'wrapper' => true
),
array(
'title' => 'Some div with a class',
'block' => 'div',
'classes' => 'some_class',
'wrapper' => true
),
array(
'title' => 'Title with other CSS',
'selector' => 'h3',
'classes' => 'other_style'
),
array(
'title' => 'Read more link',
'selector' => 'a',
'classes' => 'more'
)
);
Hope it works for you
AHA!
I found the problem: the two different versions of defining the custom classes must be added to different keys in the settings array.
This version...
"Section Head=section-head;Sub Section Head=sub-section-head";
...needs to be the value of 'theme_advanced_styles'.
Whereas this version...
$style_formats = array(
array(
'title' => 'Column',
'block' => 'div',
'classes' => 'col',
'wrapper' => true
),
);
...needs to be the value of 'style_formats' in the TinyMCE settings array.
I had changed to the second style but hadn't noticed the different key for the array.
Wordpress provides a function for adding a custom stylesheet to the editor: http://codex.wordpress.org/Function_Reference/add_editor_style