wp_editor shows no button - php

I'm trying to use wp_editor in a simple PHP page (not a plugin, not in the admin section) :
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
$editor_id = 'mycustomeditor';
wp_editor( "My content", $editor_id );
I got the field and the Visual/HTML buttons but that's all, I don't have any other buttons or toolbar.
Do I need to load other WP library before calling wp_editor ?
Thank you !

You can pass some settings variable to editor as well. Without passing it, it will take default values.
Another thing I have noticed that, If I do exit(); anywhere in my page before loading footer, it will not display any buttons in toolbar as it loads some of the scripts from footer. So If you have exit() or die() before loading footer it will not load the toolbar.
Here I have passed it to my editor and its working fine.
define('WP_USE_THEMES', false);
require('wp-blog-header.php');
$editor_id = 'mycustomeditor';
$settings = array(
'wpautop' => true, // use wpautop?
'media_buttons' => true, // show insert/upload button(s)
'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
'tabindex' => '',
'editor_css' => '', // extra styles for both visual and HTML editors buttons,
'editor_class' => '', // add extra class(es) to the editor textarea
'teeny' => false, // output the minimal editor config used in Press This
'dfw' => false, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
);
wp_editor( "My content", $editor_id, $settings );

Related

Wordpress Customizer keeps hiding custom sections

I have custom plugin that adds Customizer sections and options.
The sections can be seen briefly on the customizer screen but then disappear. This behavior is happening on all themes (I am using my plugin on other sites).
Maybe it might be because the setting fields are not used in the theme yet, but even if I create my own theme (for which this plugin is mainly used) and add echo get_theme_mod('setting-key') somewhere in the themes code, the sections are still being hidden by wordpress.
I have clean Wordpress install version 5.2.2, using default Twenty Nineteen theme with only jQuery updater plugin active. I have checked all JS code for potential errors and any hiding happening, but nothing on my part can be causing this.
This is how I am adding sections, in customize_register hook:
add_action('customize_register', 'setup_section');
function setup_section($wp_customize){
// Add section
$wp_customize->add_section('section_id', array(
'title' => 'Section Title',
'priority' => 160,
));
// Add settings for a field
$wp_customize->add_setting('setting_id', array(
'default' => '',
'transport' => 'refresh',
));
// Add the field into a section and assign setting id
$wp_customize->add_control('setting_id', array(
'label' => 'Option Label',
'section' => 'section_id',
'settings' => 'setting_id',
'type' => 'text',
));
}
The PHP code is working as expected, but after the page loads, all my custom sections get display: none; inline css added and the sections disappear.
Any help is appreciated.
Another reason why the custom sections kept hidden is when they don't have any controls. When a section is empty WordPress hides it by default.
Here's a full working piece of code for adding a section within Customizer with one control:
function mytheme_customize_register( $wp_customize ) {
$wp_customize->add_section('footer_settings_section', array(
'title' => 'Footer Text Section'
));
$wp_customize->add_setting('text_setting', array(
'default' => 'Default Text For Footer Section',
));
$wp_customize->add_control('text_setting', array(
'label' => 'Footer Text Here',
'section' => 'footer_settings_section',
'type' => 'textarea',
));
}
add_action( 'customize_register', 'mytheme_customize_register' );

Why wp_editor is going outside the container?

I have searched a lot about it but didn't find any answer.I am using wp_editor on frontend but its printed outside the div element.
below is a screenshot
And below is my codes
wp_editor(
$content = '',
$editor_id = 'ec_frontend_editor',
$settings = array(
'wpautop' => false, // use wpautop?
'media_buttons' => true, // show insert/upload button(s)
'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
'tabindex' => '',
'editor_css' => '', // extra styles for both visual and HTML editors buttons,
'editor_class' => '', // add extra class(es) to the editor textarea
'teeny' => false, // output the minimal editor config used in Press This
'dfw' => true, // replace the default fullscreen with DFW (supported on the front-end in WordPress 3.4)
'tinymce' => true, // load TinyMCE, can be used to pass settings directly to TinyMCE using an array()
'quicktags' => true // load Quicktags, can be used to pass settings directly to Quicktags using an array()
)
)
it's been too late but it will be helpful for someone in future. I got same problem because of I am taking string:
$html = '';
$html .= wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
echo $html;
then I replaced my code with this code:
<div class="container">
wp_editor( $real_value, 'gg_contact_html_wp_editor', $wp_editor_settings );
</div>

wordpress how to add wp_editor in an array

I had a small problem in my wordpress code I need to show a wordpress wp_editor in my page where it has array of values.the values are defined like the following
$fields[] = array(
'name' => __('Class', 'my-theme'),
'desc' => __('', 'my-theme'),
'id' => 'class'.$n,
'std' => ( ( isset($class_text[$n]['class']) ) ? $class_text[$n]['class'] : '' ),
'type' => 'text');
When I define my wp_editor like the above array it doesn't display where I want. Instead all the editors displayed at the top before any content in all pages.
I tried like the following set of array for the editor:
$fields[] = array(
'name' => __('My Content', 'my-theme'),
'id' => 'sectioncontent'.$n,
'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
'type' => wp_editor( '', 'sectioncontent'.$n ));
Attached the image of my problem:
Cause
By default wp_editor prints the textarea that's why you cannot assign it to any variable or array.
Solution
you can use output buffering of php to get printed data in variable like this:
ob_start(); // Start output buffer
// Print the editor
wp_editor( '', 'sectioncontent'.$n );
// Store the printed data in $editor variable
$editor = ob_get_clean();
// And then you can assign that wp_editor to your array.
$fields[] = array(
'name' => __('My Content', 'my-theme'),
'id' => 'sectioncontent'.$n,
'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
'type' => $editor); // <-- HERE
Looks to me like you're using Redux Framework to set up your theme/plugin option page - If you are looking to add the default Wordpress WYSIWYG (What You See Is What You Get - the same editor from the edit post page in the backend) editor in there you'll need to use the type: 'editor'.
It can be confusing - the wp_editor() function you are using is the right place to start if you were setting up this options page from scratch, but you'd need to do quite a bit of work to have it display where and how you want it. Redux et al make this quite a bit easier for you by generating the editor for you, so instead of you using the wp_editor function at all you just tell Redux that you want an editor field called 'My Content' to be one of the fields on the page.
The documentation for the editor field is here: https://docs.reduxframework.com/core/fields/editor/
If I am correct that you are using redux, the correct code to replace what you have is:
$fields[] = array(
'name' => __('My Content', 'my-theme'),
'id' => 'sectioncontent'.$n,
'std' => ( ( isset($class_text[$n]['content']) ) ? $class_text[$n]['content'] : '' ),
'type' => 'editor');
To explain the other parts of this field array:
'Name' will be what shows up in the label for this field. In this case you are using the localization functions in wordpress (__()) to get a phrase from the local dictionary in the 'my-theme' domain.
'id' is what you will use to retrieve what has been entered into this field. It will also affect the ID attribute assigned to the HTML elements in the options page.
'std' is the default for the field, which will be the value of the field when the options page is first displayed, before the user has set any options
On the editor documentation page linked above, you'll see the details of various other options you can define, like whether to show Media Upload buttons, and whether to run the input through wpautop to replace line breaks in the editor with <p> tags (by default both of these are true).

WYSIWYG editor generated by Wp_editor is disabled

Initial issue:
My client wanted an custom HTML rendering sidebar widget for their wordpress site. I created a simple one that allows them to choose the color (class switching) and gives them a textarea to put their HTML into. Now they have requested a basic WYSIWYG interface attached to it (CKEditor or TinyMCE) but I dont know how to add it to the textarea inside the widget code. Does anyone know how, have an example, or a place to see how it can work? Thanks!
EDIT (After use of wp_editor):
So I have my code to this point but the editor is disabled and not able to be used. Any ideas why?
<fieldset>
<label>Enter your HTML</label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => ',bold,italic,underline,|,link,unlink',
),
'quicktags' => false
);
$bodyID = $this->get_field_id('body');
$content = '';
wp_editor($content, $bodyID, $settings );
?>
</fieldset>
Use wp_editor function, your code will look something like this:
http://codex.wordpress.org/Function_Reference/wp_editor
<fieldset>
<label> Your label for the text area </label>
<?php
$settings = array(
'wpautop' => true,
'media_buttons' => false,
'tinymce' => array(
'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
'bullist,blockquote,|,justifyleft,justifycenter' .
',justifyright,justifyfull,|,link,unlink,|' .
',spellchecker,wp_fullscreen,wp_adv ',
),
'quicktags' => false
);
wp_editor('initial content', 'id of textarea', $settings );
?>
</fieldset>
Note that if you want to put the content in the WP database from front end you should use in addition wp_insert_post function and a POST varible as a link.

Wordpress: add events inside TinyMCE iframe

I've added some div wrapper styles to Wordpress, but when I use them in the page, it is impossible to add content below them in the page. CSS:after works inside the divs to create a selectable area, but it doesn't work to create a selectable area after the div.
In my functions.php I have:
function my_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Box Two Columns',
'block' => 'div',
'classes' => 'twocolbox',
'wrapper' => true
),
array(
'title' => 'Image with Caption',
'block' => 'div',
'classes' => 'img_caption',
'wrapper' => true
),
array(
'title' => 'Gallery Horizontal',
'block' => 'div',
'classes' => 'scroller horizontal',
'wrapper' => true
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
add_editor_style();
Is there a way to use execCommand here to add some html after the div styles I defined? To add something like an empty paragraph tag afterwards with a clear float?
I tried:
tinyMCE.execCommand('mceInsertContent',false,'Hello world!!');"
MCE editor breaks then.
...
Tried this but it's too buggy:
In editor-styles.css:
#tinyMCE:after {
content: " ";
clear:both;
width: 4em; height:4em;
}
Note that you may need to clear cache AND shift-reload button to see any changes to editor-styles.css in Wordpress.
...
Still working on this. Found a thread:
To access tinymce iframe elements through jquery
I tried adding the code in this thread to my_mce_before_init, but it just broke.
....
Also tried loading a jQuery script, but the target paths wouldn't work on the TinyMCE iframe. None of these selectors work:
jQuery(document).ready(function($) {
$("#tinyMCE").find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("div").css("color","red");
$("#content_ifr").contents().find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("#content_ifr").contents().find("#tinymce p").css("color","red");
$("#wp-content-editor-container").find("textarea").css("color","red");
$("iframe").contents().find("p").css("color","red");
$('#content_ifr').load(function(){
$('#content_ifr').contents().find('p').css("color","red");
});
});
You can add html pseudo elements using the tinymce configuration option content_css.
There you can define after elements. Give it a try!
Update:
When initializing tinymce set the setup paramter to the following (inside tinyMCE.init({...})
...
theme: "advanced", // example param
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$("#content_ifr").contents().find("p").css("color","red");
// other approach
//$(ed.getBody()).find('p').css("color","red");
});
},
cleanup: true, // example param
...

Categories